8

Is there a easy way to use different suffix values on each line?

Right now I have 3 lines, I'm trying to change the suffix for each, but I was only able to find it using the formatter function.

But if I use the formatter function I need to edit every tooltip, make it just like the default one, and I don't know the default format.

I mean, a easy way like changing colors, what we can simply do:

{
name: 'First line',
type: 'line',
color: '#33CC66',
zIndex: 0,
data: [ ... ]
}
saulob
  • 615
  • 1
  • 10
  • 25

1 Answers1

15

I think this is what you want. You can specify the tooltip attribute on each series and use valueSuffix :

http://jsfiddle.net/aXvcw/

        tooltip: {
            formatter : function() {
                 return this.y + ' ' +  this.series.tooltipOptions.valueSuffix;
            }
        },
        series: [{
            name: 'Rainfall',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Temperature',
            type: 'spline',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            tooltip: {
                valueSuffix: '°C'
            }
        }]

Modified from this demo: http://www.highcharts.com/demo/combo-dual-axes.

You don't need to provide the tooltip formatter function either, but if you wanted other than the default, that is how you could access the series valueSuffix.

Scott Gearhart
  • 1,161
  • 7
  • 7
  • Perfect! Thank you very much. I was able to edit the suffix and the decimals of the specified tooltip :) – saulob Mar 28 '13 at 10:46
  • Is there any way to add dynamic valuesuffix for each point on the graph? Consider this [jsfiddle](http://jsfiddle.net/Rafaelhegre/f5451zyg/2/). As you hover the graph, you get a value based on the point in the `valuesuffix` array. However, this only works when you display one tooltip at a time. If you want it a shared tooltip, and add `shared: true,` inside tooltip, it does not work. – Rafael code Jun 09 '16 at 13:08