Highcharts scatter chart with a name per point

Question

I'm trying to tweak a Highcharts scatter plot with this date series

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

so that i can put a name on each point, I want to show the name in the tooltip. The API doc says an object of named values can be defined like this

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

but it seems the x and y values are not picked up. See my jsfiddle example.

Answer 1

I struggled with this issue and after finding the solution in the documentation I must say the behavior as designed feels a bit unexpected.

Per the docs (here: https://api.highcharts.com/highcharts/plotOptions.scatter.tooltip), the tooltip does not show all fields you can add to a data point, but rather

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

To show the data point name (and any other fields you want to), simply change the HTML rendered by the tooltip. For example, you can display the point name and coordinates in the tooltip while removing 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>',
},

Answer 2

This answer works for Highcharts 4.1.9.

Took me a long time to figure out hence I want to pass it on in case someone is looking for this as well.

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?

1. Ensure that the scatter.dataLabels is enabled and the format is {point.name}
2. Ensure that the data is in the format of {"name":"Point 1", "x":1,"y":2}

Answer 3

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 4

As stated in the documentation, the name field is the name of the point as shown in the legend, tooltip, dataLabel, and so on. I updated your fiddle to include the highcharts library, and I am seeing this behaviour (i.e. if I hover over a point, its label is displayed).

If you want the x-axis labels set correctly, you need to ensure that the xAxis section of your chart configuration does not have a categories key.