0
297
ViewsIs there a way on echarts to get the series colors
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&dataIndexwhere 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!
1 answers
Answer question0
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"
}
]