Customize tooltip for bands in highcharts angular

Question

I am trying to customize the band names in highcharts graph in angular. The following is the code snippet for the same. But it is returning undefined for the band name.

Here is the working code

Below is the code snippet for band plotting

{
   name: 'Band',
   type: 'area',
   data: [{
     x: currentlyAchievableChartData.bar_graph_min,
     y: 2
   }, {
     x: currentlyAchievableChartData.bar_graph_max,
     y: 2
   }, {
     x: currentlyAchievableChartData.bar_graph_max,
     y: -2
   }, {
     x: currentlyAchievableChartData.bar_graph_min,
     y: -2
   }],
   color: 'rgba(192,192,192,0.5)', // set the band color to transparent grey
   fillOpacity: 1, // set the opacity of the band fill to 1
   lineWidth: 0, // hide the line connecting the band points
   borderRadius: 10 // set the corner radius of the band to 10 pixels
 },

In this example, you can see a band is plotted as bar_graph_min to bar_graph_max. and the tooltip is showing the value starting as Band:224000 and ending as Band:313600. Instead of this, I need to show it as

Band Start:22400

and

End Start:313600

as tooltips. Also, it should show in the line passing through the center of the band. Currently, it is showing in the corners.

Answer 1

You can add name property to the first series data and adapt the tooltip formatter. Also, set findNearestPointBy to 'xy' to show a tooltip in all the corners.

 Highcharts.chart('container', {
   ...,
   tooltip: {
     formatter: function() {
       if (['Propery Price', 'Band'].includes(this.series.name)) {
         return this.point.name + ': ' + this.x;
       } else
         return this.series.name + ': ' + this.x;
     }
   },
   series: [{
       name: 'Band',
       type: 'area',
       findNearestPointBy: 'xy',
       data: [{
         x: currentlyAchievableChartData.bar_graph_min,
         y: 2,
         name: 'Band Start'
       }, {
         x: currentlyAchievableChartData.bar_graph_max,
         y: 2,
         name: 'Band End'
       }, {
         x: currentlyAchievableChartData.bar_graph_max,
         y: -2,
         name: 'Band Start'
       }, {
         x: currentlyAchievableChartData.bar_graph_min,
         y: -2,
         name: 'Band End'
       }],
       ...
     },
     {
       name: 'Propery Price',
       ...
     },
     {
       name: 'Estimated Achievable Property Value - Med',
       ...
     }
   ]
 });

---

Live demo: https://jsfiddle.net/BlackLabel/ugsqoxc5/

API Reference: https://api.highcharts.com/highcharts/series.area.findNearestPointBy