Skip to content

[Feature Request] Support for oklch & CSS variable colours #1154

@jantoney

Description

@jantoney

Feature

It would be good for it to support oklch colours.

Reason

Many modern applications use Tailwind and other colour systems that have moved onto oklch colour schemes along with colour variables like var(--card).
While zrender does pass through these colours for some things like background and lines, when it needs to modify colours like in the calendar heat maps, all colours just end up black.

Tailwind CSS

root: {
  --chart-1: oklch(0.68 0.130 261.82);
  --card: oklch(1 0 0);
}

eCharts Theming

How I would like to be ale to use the colours

  visualMap: {
    color: [
      'var(--chart-1)',
      'oklch(from var(--chart-1)) l c h / 0.6)',
      'var(--card)',
    ],
  },

Current Output

Image

My Application

  • "@tanstack/react-start": "1.167.8",
  • "@tailwindcss/vite": "4.2.2",
  • "echarts": "^6.0.0",
  • zrender: @6.0.0

Workaround

  • None found so far

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions