How to edit the tooltip text in a highcharts boxpl

问题:

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?

回答1:

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

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

回答2:

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.

回答3:

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