Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Vaadin Charts 3 - Shared Tooltip - Series Shape&Color

Julien Charpenel
5 years ago Apr 26, 2016 7:28am
Guillermo Alvarez
5 years ago Apr 29, 2016 2:05pm

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!

Julien Charpenel
5 years ago May 02, 2016 7:05am