Search code examples
javascriptchartshighcharts

Display multiple values for each y-axis series in high charts

Passing the values to y-axis series like below:

this.chartOptions = {
  series: [
    {
      type: 'line',
      data: [
            [0,38.6],
            [0,49.8],
            [1,39.2],
            [1,41.1],
            [1,46.6],
            [2,44]
        ],
      color: '#004191',
      showInLegend: false,
      name: 'price',
      threshold: 40,
      negativeColor: '#F34336',
      marker: {
        enabled: true,
        radius: 3,
        symbol: 'circle',
      },
    },
  ],
  title: {
    text: '',
  },
  xAxis: {
    title: {
      text: 'Days',
    },
    categories: ["16-Jan", "15-Jan", "14-Jan"],
  },
  yAxis: {
    title: {
      text: 'price',
    },
    gridLineWidth: 1,
    min: 10,
    max: 100,
    tickPixelInterval: 35,
  },
  exporting: {
    enabled: false,
    showTable: false,
    buttons: {
      contextButton: {
        menuItems: ['downloadPDF'],
      },
    },
  },
  credits: {
    enabled: false,
  },
};

But the issue is the multiple values are rendering in the view but the values are not displayed in the tooltip on mouse hover of particular value.

Case: When I hover on 49.8 it shows tooltip but won't show for 38.6. Even though they belongs to 1st series of y-axis.

enter image description here

Soution required:

  1. Should display every value in the tooltip of y-axis on mouse hover.
  2. I need to display multiple values in the tooltip(i,e display,rtMode,initMode).

Attaching stackblitz ref

Solution

  • This is possible to achive by following steps:

    • First, instead of the line series, use scatter type. Set lineWidth: 2 just to simulate line series.

    • Next, adjust the tooltip via headerFormat (to use identical as original line series) and more advanced pointFormatter:

      tooltip: {
     headerFormat: '<span style="font-size: 0.8em">{point.key}</span><br/>',
     pointFormatter() {
       let pointFormat = '',
       hoveredPoint = this;

       this.series.points.forEach(point => {
         if (point.x === hoveredPoint.x) {
           pointFormat += `<span style=\"color:${point.color}\">●</span> ${point.series.name}: <b>${point.y}</b><br/>`
         }
       })
       return pointFormat
     }
   },

    Demo: https://jsfiddle.net/BlackLabel/ts7bcjwo/

    API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormatter