CODEWITHSUNDEEP
highcharts
David Jones
David Jones

Reputation: 11

How to edit the tooltip text in a highcharts boxplot

I want to change the text of the popup on a box plot.

From the api and the example linked there, I assumed it would be a case of adding a formatter function to the series. So I went to the demo and clicked 'Edit in jsFiddle'. I then changed:

tooltip: {
    headerFormat: '<em>Experiment No {point.key}</em><br/>'
}

to

tooltip: {
    headerFormat: '<em>Experiment No {point.key}</em><br/>',
    formatter: function() { return 'some random string'; }
}

I expected the tooltip to change to 'some random string' (as happens in the demo linked from the tooltip api reference), but it was unchanged. Any hints?

Upvotes: 1

Views: 5022

Answers (3)

Senal
Senal

Reputation: 1610

Like Ricardo mentioned if you add formatter property for whole chart's tooltip method it will apply the formatter for all the timeseries.

You can use pointFormatter property if you want to add formatting to individual series. Below is a sample formatter for a boxplot series.

tooltip: {
   pointFormatter: function() {
      const x = this.x;
      const currentData = this.series.data.find(data => data.x === x);
      const boxplotValues = currentData ? currentData.options : {};
      return `Max: ${boxplotValues.high}<br>
              Q3: ${boxplotValues.q3}<br>
              Median: ${boxplotValues.median}<br>
              Q1: ${boxplotValues.q1}<br>
              Low: ${boxplotValues.low}<br>`;
   }
}

Find the working fiddle here

Upvotes: 0

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

Take a look the refference.

series.tooltip
"A configuration object for the tooltip rendering of each single series. Properties are inherited from tooltip, but only the following properties can be defined on a series level."

Source

As you can see, there's no formatter there.

You're looking for this one, which have to be used in the main tooltip object.

Upvotes: 1

Sam
Sam

Reputation: 4595

The formatter should be added to the tooltip property of the main options object.

Demo here: http://jsfiddle.net/kxbXx/

Upvotes: 7

Related Questions