I’m using Echarts v5.2.2 (in an Angular project, with ngx-echarts) to render a line chart using multiple series. I have a listener for the ‘highlight’ event. This event is giving me an object with a batch of seriesIndex
and dataIndex
but it doesn’t provide the color of each series.
Is there a way to get the colors that were dynamically assigned by echarts?
This is what I’m trying to implement:
- Listen when the mouse pointer snapped into a graph line point.
- Doing this via
this.chartInstance.on('highlight', this.handleShowTip);
.
- Doing this via
- Use the batch of
seriesIndex
&dataIndex
where the mouse pointer snapped to render a table using color, x & y value as columns (the table is placed outside the graph.
I understand that I could use the tooltip’s formatter option with a callback function which will provide the series colors in its arguments… and I could broadcast these arguments outside my graph component to render what I need anywhere I want, but this does not feel correct (a formatter is aimed to return HTML or string) and I wonder if there’s a better way to get the generated series colors.
Thank you!
Advertisement
Answer
The Echarts uses a built-in palette based on the theme. The easiest way to get a set of colors is this:
myChart.getOption().color
To get the colors that are mapped to the series, you can do the following:
myChart.getModel().getSeries().map(s => { return { seriesIndex: s.seriesIndex, seriesColor: myChart.getVisual({ seriesIndex: s.seriesIndex }, 'color') } })
And the result will be something like this:
[ { "seriesIndex":0, "seriesColor":"#5470c6" }, { "seriesIndex":1, "seriesColor":"#91cc75" }, { "seriesIndex":2, "seriesColor":"#fac858" }, { "seriesIndex":3, "seriesColor":"#ee6666" }, { "seriesIndex":4, "seriesColor":"#73c0de" } ]