Is there a way on echarts to get the series colors

Question

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:

1. Listen when the mouse pointer snapped into a graph line point.
   • Doing this via this.chartInstance.on('highlight', this.handleShowTip);.
2. 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!

Answer 1

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"
   }
]