Chart chart diagram with a name for each point

Question

I am trying to set up a Highcharts scatter chart with this series of dates

series: [{ data: [[1,2],[2,5]] }] 

so that I can put the name at every point, I want to show the name in the tooltip. The doc API says an object with named values ​​can be defined as follows

 series: [{ data: [{ name: 'Point 1', x: 1, y: 2 }, { name: 'Point 2', x: 2, y: 5 }] }] 

but it seems that x and y are not selected. See my jsfiddle example.

Answer 1

As indicated in the documentation , the name field is the name of the point, as shown in the legend, tooltip, dataLabel, etc. I updated your script to include a library of tall diagrams and I see this behavior (i.e. If I hover over a point, its label is displayed).

If you want the x-axis labels to be set correctly, you need to make sure that there is no categories key in the xAxis section of your chart configuration.

Answer 2

You can also display the names in the legend section. Updated selected answer above here

 series: [{ name: 'Point 1', data: [[3, 3]] }, { name: 'Point 2', data: [[4, 8]] }, { name: 'Point 3', data: [[9, 15]] }] 

Answer 3

This is a new feature in HighCharts 3.0. You must define the xAxis type for "Category" and specify the name of the point in the data if you want it to appear on xAxis:

  xAxis: { //categories: ['Green', 'Pink'], type: 'category' }, ... data: [{ name: 'Green', x: 1, y: 2 }, { name: 'Pink', x: 2, y: 5 }] 

See the updated jsFiddle: code here . Please note that I added a tooltip creation function to show that point.x makes no sense in this context, only point.name remains relevant.
In addition, you cannot have two points with different “names” for the same x position.

Answer 4

This answer works for Highcharts 4.1.9.

I had to think for a long time, so I want to pass it on if someone is also looking for this.

Your mileage may vary for other versions.

  plotOptions: { scatter: { dataLabels: { format: "{point.name}", enabled: true }, enableMouseTracking: false } }, series: [{ name: 'Projects', data: [{"name":"Point 1", "x":1,"y":2}, {"name":"Point 2", "x":4,"y":5}] }] 

What are the key points?

• Make sure the scatter.dataLabels checkboxes are enabled and the format {point.name}
• Make sure the data is in the format {"name":"Point 1", "x":1,"y":2}

Answer 5

As mentioned in this comment , what works for me in Highcharts 5.0.6 is:

 { type: 'scatter', tooltip: { headerFormat: '<strong>{point.key}</strong><br>' }, data: [{ x: 0, y: 1, name: 'Whatever' }, ...] } 

Answer 6

I struggled with this problem, and having found a solution in the documentation, I have to say that the behavior created seems a bit unexpected.

In the documents (here: https://api.highcharts.com/highcharts/plotOptions.scatter.tooltip ), the tooltip does not display all the fields that you can add to the data point, but

Defaults to x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>.

To display the name of the data point (and any other fields you want), simply change the HTML displayed using the tooltip. For example, you can display the point name and coordinates in a tooltip by deleting the series name as follows:

 chart: { type: "scatter", } tooltip: { headerFormat: '', pointFormat: 'Name: <b>{point.name}</b><br/>Load time: <b>{point.y}</b><br/>Requests: <b>{point.x}</b>', },