CODEWITHSUNDEEP
highchartsangular7angular2-highcharts
Jalaleddin Hosseini
Jalaleddin Hosseini

Reputation: 2272

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

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: enter image description here

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.

enter image description here

enter image description here

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?

Upvotes: 2

Views: 1639

Answers (2)

ppotaczek
ppotaczek

Reputation: 39099

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

Upvotes: 3

Vasi G.
Vasi G.

Reputation: 171

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

Upvotes: 1

Related Questions