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...
}
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?
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,
// ...
});