[Feature] To be able to have the same marker symbols in tooltips than in chart

[AntidotUser]

What problem does this feature solve?

In line charts, one can have different symbol markers on his different lines, which is great for accessibility. Unfortunately, I have found no way to retrieve the symbol used in a line in order to put it in the tooltip of the chart. That would allow to have tooltips stating such things as:

• "RedDiamond" sales: 300$
• "BlueSquare" purchases: 250$

when hovering the mouse over the chart.

I've tried:

formatter: function(paramsRaw) {
  let text = '';
  paramsRaw.forEach(param => {
    text += `${param.marker}<br>`;
  })
  return text;
}

But 'marker' always gives me the round bullet (fortunately, with the right colour), which defeats the accessibility I aim at when using symbols.

N.B.: I use only one symbol type on each line, even when there is more than one value on the line.

Cf.: symbols example where the legend uses the right symbols but not the tooltip

What does the proposed API look like?

Maybe to have a 'symbol' property in the params of the tooltip formatter function would be enough, like so:

formatter: function(paramsRaw) {
  let text = '';
  paramsRaw.forEach(param => {
    text += `${param.symbol}<br>`;
  })
  return text;
}

This way, if you want to access the round marker you can (for example when a single line has several symbols) and when you want to access a line which has several markers using symbols, you can access them, too.

[Ovilia]

You should store this information before passing it to option.

[AntidotUser]

I'm not sure to know what you mean, sorry. Could you show me a code snippet?

[Ovilia]

Here is a demo.

[AntidotUser]

I'm sorry but I wasn't asking for the symbol names in the tooltip. Rather what I'm trying to achieve is to have a symbol itself as a reminder of a line meaning in a line chart tooltip.

Let's say I have a line which represents eggs with a value of 3 and a green triangle as a symbol, and another line which represents bacon with a value of 5 and a red circle as a symbol. Then, I'd like to have in the tooltip :

"the drawing of the green triangle": 3 eggs "the drawing of the red circle": 5 slices of bacon

Just as in the legend where the drawing of the symbols are used to enrich the legend.

[AntidotUser]

Hello,

Is there any news there, please? Or shall I reverse the problem and provide my own SVGs to eCharts and then display them as HTML in the tooltips (just as in the example using the 'marker' property)?

The greatest advantage of letting eCharts roll his own is that the end result is more than correct and that it applies in my app to a lot of charts at once as we have factorised eCharts code. Plus it would benefit to other users with the same need.

On the other side, if I provide the symbol as SVGs as seen here: SVG path data it will be even more flexible but every user of the lib is forced to do so without you providing us the right property. Hence, my current request.

Thanks a lot in advance!

[helgasoft]

@AntidotUser, that would be a nice new feature indeed. And also consistent with the legend icons. Here is a workaround with custom SVGs - Demo.

[AntidotUser]

Thanks a lot for the demo code: it demonstrates elements of the API that I did not know about. I'll do like this & wait for the feature to become official. Congratulations for such a neat piece of software and thanks for the hard work.

[helgasoft]

Thank you for the kind words 💖 Actually there is no need to use internal calls. Here is a simplified version - Demo.

[AntidotUser]

Ho you're welcome. Thanks, that's even better. It's most appreciated.

[AntidotUser]

Ho thanks again, this is even better. Cheers!