Highcharts如何显示某些工具提示而不显示其他工具提示

Question

I need to show tooltips for only the last two series when hovering the mouse over the graph. In this example the idea will be to show only the tool tips for the values 1699 and 1750. The rest of the values can't show any tooltips when hovering the mouse. How can I achive that? I haven't found any way to do so. Is it possible? Thanks in advance.

 (function () { var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750']; Highcharts.chart('grafica1', { chart: { type: 'area', }, title: { text: ' ' }, xAxis: { labels: { enabled: true, formatter: function () { return categories[this.value]; } }, tickmarkPlacement: 'on', title: { enabled: false } }, yAxis: { title: { text: 'Percent' } }, tooltip: { pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>', split: true }, plotOptions: { area: { stacking: 'percent', lineColor: '#ffffff', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#ffffff', } } }, series: [{ name: 'Africa', data: [502, 635, 809, 947, 1402, 3634, 5268] }, { name: 'L. America', data: [106, 107, 111, 133, 221, 767, 1766] }, { name: 'Oceania', data: [163, 203, 276, 408, 547, 729, 628] }, { name: 'SE. Asia', data: [18, 31, 54, 156, 339, 818, 1201] }, { name: 'Japan', data: [2, 2, 2, 6, 13, 30, 46] }, { name: 'China', data: [2, 2, 2, 6, 13, 30, 46] }, { name: 'Near East', data: [2, 2, 2, 6, 13, 30, 46] }, { name: 'Asian CIS', data: [2, 2, 2, 6, 13, 30, 46] }, { name: 'Russia', data: [2, 2, 2, 6, 13, 30, 46] }, { name: 'East Europe', data: [2, 2, 2, 6, 13, 30, 46] }, { name: 'Central Europe', data: [2, 2, 2, 6, 13, 30, 46] }, { name: 'W. Europe - Nordic', data: [2, 2, 2, 6, 13, 30, 46] }, { name: 'Nordic', data: [2, 2, 2, 6, 13, 30, 46] }, { name: 'N. America', data: [2, 2, 2, 6, 13, 30, 46] }] }); }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="grafica1" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Answer 1

You can wrap tooltip.prototype.renderSplit method to show the tooltip only if the points have certain x values.

Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', function (p, labels, points) {
  if (!this.options.showOnLastTwo) {
    return p.call(this, labels, points)
  }

  const point = points[0]

  if (point) {
    const allowedXs = point.series.xData.slice(-2)

    if (allowedXs.includes(point.x)) {
      return p.call(this, labels, points)
    }
  }

  this.destroy()
})

And set in tooltip options showOnLastTwo flag to true:

tooltip: {
  split: true,
  showOnLastTwo: true
},

The flag is not necessary but the wrap changes Highcharts globally so it will affect every chart - the flag will prevent this.

live example: http://jsfiddle.net/sLvekuht/1/

Answer 2

You can use the formatter like this :

    tooltip: {
        formatter: function() {
          if(this.points[0].key < (this.points[0].series.xData.length -2)){
                return false;
          }
          var s = [];
          s.push(this.x);
          this.points.forEach(function(point) {
            s.push('<b>' + point.series.name + '</b>: ' + point.y);
          });

          return s;
        },
        split: true
    },

Fiddle

Not the cleanest code (there still an error in the console) but it's work.

Edit
Following Deep 3015 comment, code and fiddle updated