reactjstypescriptechartsdarkmodeapache-echarts

How to control legend symbols in Apache ECharts StackChart?


I have React App where I utilize a few StackChart charts created with Apache's echarts library (at version 5.5.0)

// package.json

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  // ...
  "dependencies": {
    "echarts": "^5.5.0",
    // other deps...
  }

stack-chart-looks-in-different-themes

According to the docs "ECharts will automatically detect it via backgroundColor by default and adjust the text color accordingly" (https://echarts.apache.org/en/option.html#darkMode)...still, i'm not relying on that as my app keeps track of theme/dimensions using hooks.

The chart config options are as follows:

 const options: EChartsOption = {
      darkMode: isThemeDark,
      color: ["#E95793", "#EA0C81", "#940B92", "#3623CA", "#610C9F", "#ee0793", "#be438a"],
      grid: {
        containLabel: true,
        left: "3%",
        right: "5%",
        bottom: "3%",
        ...(breakpoint === Breakpoint.Mobile && legendData.length > 2 && { top: 100 }),
      },
      xAxis: [
        {
          type: "category",
          data: xAxisData,
          axisLabel: {
            color: isThemeDark ? "#ccc" : "#444",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            color: isThemeDark ? "#ccc" : "#444",
          },
        },
      ],
      legend: {
        data: legendData,
        textStyle: {
          color: isThemeDark ? "#ccc" : "#444",
        },
        itemStyle: {
           // ...I see options like "color", "borderColor", "borderWidth", "opacity"...
           // but none of them seem to affect the insides of legend items...
        }
      },
      series: Object.keys(data).map((k, i) => ({
        name: legendData[i],
        type: "line",
        stack: "Total",
        emphasis: {
          focus: "series",
        },
        data: Object.values(data[k]).map((obj) => obj.value),
      })),
    };

I already read the docs for legends https://echarts.apache.org/en/option.html#legend and tried to play around with options.legend.itemStyle, but couldn't find a way to control the appearance of legends.

That said, here I ask: Is there a way to control legend symbols in Apache ECharts?


Solution

  • Checking the docs I realized that options.series can take a symbol property, which does exactly what I needed!

    https://echarts.apache.org/en/option.html#series-line.symbol

    I learned it by checking the following example:

    https://echarts.apache.org/examples/en/editor.html?c=line-style

     series: Object.keys(data).map((k, i) => ({
        name: legendData[i],
        type: "line",
        symbol: "circle", // "roundRect" | "rect" | "triangle"| "arrow"| "pin" | "diamond"
        symbolSize: 6,
        // ...
    });