Vaadin Charts Tooltip dynamic formatter

Question

Does Vaadin Charts provide a way for formatting the tooltip on the fly. I would like to bind some logic to the value presentation on the tooltip. In place of SOME_STRING, I need reverseNormalization func to alter the values.

Map coefficients = new HashMap();
Chart chart = new Chart(ChartType.LINE);
Configuration conf = chart.getConfiguration();
Tooltip tooltip = conf.getTooltip();

tooltip.setFormatter(
  "function() { " +
    "return SOME_STRING }"
);

func reverseNormalization(String name, Double normalizedValue) {
    return normalizedValue * coefficients.get(name);;
}

It is possible to include HTML and JavaScript in tooltip formatter string. — Tatu Lund, Jun 03 '18 at 15:48

score 0 · Accepted Answer · answered Jun 06 '18 at 02:08

Here is an example:

conf.getTooltip().setPointFormatter(
            "function() { " +
              "var category = this.x; " +
              "var multiplier = 10; " +
              "switch (category) " + 
              "{ " + 
              "   case 0: " + 
              "       multiplier = 10; " + 
              "       break; " + 
              "   case 1: " + 
              "       multiplier = 20; " + 
              "       break; " + 
              "   case 2: " + 
              "       multiplier = 30; " + 
              "       break; " + 

              "   default:  " + 
              "       multiplier = 50; " + 
              "}" +
              "var tipTxt = this.series.name + ': <b>' + this.y*multiplier + '</b><br>'; " +
              "return tipTxt; " +
              "}"  
            );

this.x will give you the category value (starting from zero) of the point which tooltip is presenting. You can use the this.x, this.y and this.series.name to apply your dynamic calculations and format.

Vaadin Charts Tooltip dynamic formatter

1 Answers1