1

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?

enter image description here

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!

Ricardo Fornes
  • 382
  • 1
  • 4
  • 11

1 Answers1

2

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"
   }
]
Sergey Fedorov
  • 3,696
  • 2
  • 17
  • 21
  • I'm using Echarts v5.2.2 and when I try `this.chartInstance.getModel()` I get TypeScript error `Property 'getModel' is private and only accessible within class 'ECharts'` (I'm using Angular) – Ricardo Fornes Jan 20 '22 at 15:10
  • [It works](https://jsfiddle.net/creadone/qd5kvaxo/) in the plain JS, I don't know how to get the same for TypeScript and Angular. – Sergey Fedorov Jan 20 '22 at 15:22
  • 1
    I'm accepting your answer. Getting the series data is actually not a problem as I can access it from my class, what helped most was the `myChart.getVisual` method. Thanks for your help! – Ricardo Fornes Jan 20 '22 at 17:45
  • For people using Angular with ngx-echarts, you can bypass the private property error by casting the instance to any like this `this.chartInstance as any).getModel().getSeries()` – Ricardo Fornes Jan 20 '22 at 18:49