score:3
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.
score:3
You could also show names in the legend section. Updated the selected answer above here
series: [{
name: 'Point 1',
data: [[3, 3]]
}, {
name: 'Point 2',
data: [[4, 8]]
}, {
name: 'Point 3',
data: [[9, 15]]
}]
score:3
This is a new feature in HighCharts 3.0. You have to define the xAxis type to 'Category' and give the name of the point in the data if you want it to appear on the xAxis:
xAxis: {
//categories: ['Green', 'Pink'],
type: 'category'
},
...
data: [{
name: 'Green',
x: 1,
y: 2
}, {
name: 'Pink',
x: 2,
y: 5
}]
See your jsFiddle code updated :here.
Note that I have added the tooltip formating feature to show that point.x has no more meaning in this context, only point.name remains relevant.
Also, you cannot have two points with different 'name' at the same x position.
score:3
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>',
},
score:4
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' }, ...]
}
score:5
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?
- Ensure that the scatter.dataLabels is enabled and the format is
{point.name}
- Ensure that the data is in the format of
{"name":"Point 1", "x":1,"y":2}
Source: stackoverflow.com
Related Query
- Highcharts scatter chart with a name per point
- Highcharts - Scatter chart with a line connecting the dots in the series
- Highcharts connecting scatter chart and pie chart with single legend
- Highcharts - how to set custom content in point tooltip (popup) on 3D scatter chart or how to customize point tooltip information?
- Highcharts : How do I keep the marker formatting and make the click event fire with a 5K+ point scatter plot?
- Tooltip in chart with line- and scatter plot in highcharts 3.0.7
- Highcharts Scatter Chart Data Point Hover
- Highcharts add point to line chart with json
- Highcharts area chart hide graphs with one data point
- Highcharts column chart color by single color but with different brightness level as per respective column value
- highcharts Scatter Chart not loading with LOTS of data
- Highcharts single horizontal stacked bar chart with data names (labels) and %-ages always shown and data numbers and series name shown on mousehover
- How to display only last point on highcharts and that point should travel with chart line?
- Highcharts combine pie chart with a scatter chart
- Why does highcharts sankey chart sometimes combine multiple nodes with same node name but different Id into one and hide the lines?
- Server-side c# and client side javascript with json loading Highcharts gantt chart Task Progress Indicator, need to change Tooltip and Label name
- Highcharts AreaRange Chart issues with xAxis and last data point label
- Highcharts cloud issue with data source when duplicating chart
- Highcharts - Add Point to chart with different color based on some condition dynamically
- Import CSV to highcharts scatterplot with tooltip populated by point name and x,y values
- How to draw scatter chart with highcharts using timeseries data
- How to render a bar chart with different series with only one entry per category in HighCharts
- highcharts datalabel per point with different format
- Highcharts - combining column chart with scatter chart
- highcharts scatter 1 second update with user defined lables on x-axis for each point
- Reload chart data via JSON with Highcharts
- Highcharts - how to have a chart with dynamic height?
- dealing with highcharts bar chart with really long category names
- Highcharts => Getting the id of a point when clicking on a line chart
- Highcharts / jQuery - destroy and rebuild chart with original options
More Query from same tag
- highcharts JSON google earth
- I change the min and max of the xaxis, but how to i change the 'navigator'?
- How to hide legends in highcharts in mobile view alone
- Highchart chinese colon display incorrect when exporting
- Should show all the series name on hover to the point which is crossing to that point in line chart (Highcharts)
- Bullet Chart in Series not displaying after y value
- Is it possible to define custom technical indicators, that takes 2 series as input?
- Highstock candlestick chart wrong color
- Reading From HTML5 localstorage json, not recognizing in highcharts-ng
- Highchart is not showing inside bootstrap div
- How to draw points with highcharts-react?
- Make a boxplot in highchart with a date object in the x axis
- Create highcharts vue component
- Highcharts 24 hour clock
- Is it possible to plot points on a line graph using two separate arrays? (highcharts)
- How do I remove the pale line between events in a Highcharts columnrange chart?
- highcharts-ng addpoint each second
- Highcharts showing December instead of November in x-axis
- How to use highcharts(highstock) to display year-week format data?
- Highchart show legend items on drilldown chart
- Highcharts Chart Bar - How can I display in the chart, only one column from my HTML table?
- Highchart range selector right align
- Highcharts: Creating gantt chart having stacked rows
- if statement in Highcharts
- Y axis does not disappear after setting extremes
- How do I change an individual bubble's color and opacity in HighCharts?
- Django Chart using Highcharts
- Custom Cursor in Highmaps when no data is available for hovered country
- How can I hide series from a HighCharts legend?
- Having trouble JSON encoded data from MySQL through Highcharts