Highcharts line chart all points disappear when have more than one points with same X Axis

Question

I'm using angular-highcharts with angular 7. When I use type:"category" for xAxis like below:

xAxis: {
  title: {
    text: 'myCustomDates'
  },
  type: 'category',
  categories: ["1398/03/01", "1398/03/02", ...],
}


and data in the series looks like this:
data: [
    { name: "1398/03/02", color: "yellow", y: 2.3 },
    { name: "1398/03/03", color: "red", y: 2.9 },
    { name: "1398/03/04", color: "green", y: 5 },
    { name: "1398/03/04", color: "green", y: 7 },
    { name: "1398/03/15", color: "red", y: 3.5 },
    { name: "1398/03/15", color: "yellow", y: 2.5 },
     ...
   ],

It works fine like as you see in the below image:

but when there are more than one point with same xAxis(a persian date in my case), it works but hides all points, and still shows a point when I hover on it, but only one point from the points with same xAxis.

I want to have any number of points with same X axis and all points be showing like in first image. Why it hides them and how can I fix it?

"With the same X axis". Do you have an example of this as part of your data (or a jsfiddle or similar)? — Halvor Holsten Strand, Jul 07 '19 at 15:42

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

In Highcharts API we can read:

enabledThreshold: number

The threshold for how dense the point markers should be before they are hidden, given that enabled is not defined. The number indicates the horizontal distance between the two closest points in the series, as multiples of the marker.radius. (...)

Defaults to 2.

So, you can decrease enabledThreshold value or set enabled property to true:

plotOptions: {
  series: {
    findNearestPointBy: 'xy' // To make a tooltip works correctly.
  },
},
series: [{
    marker: {
        enabledThreshold: 0,
        // enabled: true
    },
    data: [...]
}]

Live demo: http://jsfiddle.net/BlackLabel/2xguwtfn/

API Reference: https://api.highcharts.com/highcharts/series.line.marker.enabledThreshold

score 1 · Answer 2 · answered Jul 07 '19 at 21:55

1

You have to add the following to your series:

findNearestPointBy: 'xy'

If the data has duplicate x-values, you have to set this to 'xy' to allow hovering over all points.

More info: Documentation findNearestPointBy

answered Jul 07 '19 at 21:55

Vasi G.

161
8

thanks @ToK, it solved one issue and now shows both points with the same x when I hover on each of them, but still does not show all the points at a time like first image. – Jalaleddin Hosseini Jul 08 '19 at 03:51

Highcharts line chart all points disappear when have more than one points with same X Axis

2 Answers2