Geek Answers Handbook

Highcharts: dynamically changing tooltip formatting?

I want to format a reusable tooltip based on a global value. (I use the same chart to switch between currency and numeric values: if I show the currency data on the chart, I want to format the tooltip as the currency.)

However, this in the Highcharts help function seems to refer only to the local data point, and I seem to be unable to pass the value.

How do I pass a value or get a global value? This is my code right now that is failing:

 getChartTooltip: function() { return function(graphType) { var prefix = (graphType === 'currency') ? '$' : ''; // Fails return prefix + Highcharts.numberFormat(this.y, 0); }; }, initializeChart: function() { var graphType = 'currency'; var chartOptions = {}; chartOptions.tooltip = { formatter: getChartTooltip(graphType) }; // create chart, etc... $('change-chart-type').on('click', function() { // Try to update the tooltip formatter, fail horribly... graphType = 'number'; chart.series[0].update({ tooltip: { formatter: _this.getChartTooltip(graphType) } }); });

What is the best way to do this?

+5
source share
2 answers

You do not need to change tooltip.formatter , because formatter itself will change tooltip .

I would try something like:

 tooltip: { formatter: function() { var unit = ' $', result = this.value; if(this.series.name == 'your_currency_serie_name'){ result += unit; } return result; } }

Where 'your_currency_serie_name' is the name of the series that refers to currency values.

+4
source

You can set tooltip options in each series also through valueDecimals , valuePrefix and valueSuffix . tooltip will then use these options to display the data. Live demo .

General setup:

 ... series: [{ tooltip: { valueDecimals: 0, valuePrefix: '', valueSuffix: '' }, data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { tooltip: { valueDecimals: 2, valuePrefix: '$', valueSuffix: ' USD' }, data: [129.9, 171.5, 1106.4, 1129.2, 1144.0, 1176.0, 1135.6, 1148.5, 1216.4, 1194.1, 195.6, 154.4] }] ...
+2
source

More articles:


All Articles