Search code examples
javatooltipvaadinformattervaadin-charts

Vaadin Charts Tooltip dynamic formatter


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);;
}

Solution

  • 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.