CODEWITHSUNDEEP
angulartypescripthighcharts
Shivank
Shivank

Reputation: 105

How to show unique name of every points in highCharts using angular

I am new to angular and developing a project using it. I need to show a scatter graph by using HighChart and in that need to show a unique name in a tooltip of every point, Names and points come from API.

    plotOptions:{
        scatter:{
          dataLables:{
            enabled: true
          }, 
           marker:{
              enabled:true
           },
           tooltip: {
              borderRadius:20,
              shared:true 
           }
        }
     },
     series : [{
       name:"Forecast",
       color:'blue',
       data:data:[{"name":"firstTest" ,"x":4.2,"y":1.3}]
    },{
       name:"Threshold",
       color:'orange',
       data:[{"name":"secondTest" ,"x":3.2,"y":5.3}]
    }]
  };

Upvotes: 0

Views: 152

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

You need to use tooltip.pointFormat property to add the point's name to a tooltip:

tooltip: {
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.name} {point.y}</b><br/>'
},

Live demo: http://jsfiddle.net/BlackLabel/gh3yd2q0/1/

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

Upvotes: 1

Related Questions