Vaadin Charts 3 - Shared Tooltip - Series Shape&Color

Flow
1

Specifying a custom tooltip that is shared, how do i sho th series shape & color in the point format the way it’s by default?


EDIT

I have just seen the series shape is not show, but how can I at least specify a small filled circle colored with the seris color?
I tried something like that:

tooltip.setPointFormat("<span style=\"color:'{series.color}'\">" + FontAwesome.CIRCLE.getHtml() + "</span> <b>{series.name}</b>: {point.y}<br/>"); But this did not work.

2

Hi,

If you just want to have the correct color in the circle you can do it by using pointFormat property as it’s done by default:

configuration.getTooltip().setPointFormat("<span style=\"color:{point.color}\">\u25CF</span> {series.name}: <b>{point.y}</b><br/>");

If you want to have the correct shape apart from the correct color you will need some more complex handling, this example for instance will only work if you use MarkerSymbolEnum:

configuration.getTooltip().setPointFormatter( "function() {" + " var symbol;" + " switch (this.graphic.symbolName) {" + " case 'circle':" + " symbol = '●';" + " break;" + " case 'diamond':" + " symbol = '♦';" + " break;" + " case 'square':" + " symbol = '■';" + " break;" + " case 'triangle':" + " symbol = '▲';" + " break;" + " case 'triangle-down':" + " symbol = '▼';" + " break;" + " }" + " return this.x + '<br/>' + '<span style=\"color:' + this.series.color + '\">' + symbol + '</span>' + ' ' + this.series.name + ': ' + this.y;" + " }"); This was just a quick test, but it should work

Hope this helps!

3

Thanks for the detailed answer, this works!