Shiv Kumar Ganesh Shiv Kumar Ganesh - 2 months ago 16
jQuery Question

Why Markers points are not aligned with yAxis in Highcharts?

I have made a line chart with two different lines, each line is mapped against time in xAxis but the points in the plot does not coincide with the yAxis. The values in the markers are not at all matching with the tick options. I am not sure what is going wrong. This weird behaviour happens if there are two data points exactly in the same time. I am not aware what to do? The image is as follows:-

enter image description here
The code can be found out in fiddle as well out here http://jsfiddle.net/Cp73s/5394/
The Configuration and data is as mentioned below:-

"options": {
"chart": {
"type": "line",
"zoomType": "yx",
"animation": true,
"spacingBottom": 15,
"spacingTop": 5,
"spacingLeft": 10,
"spacingRight": 10,
"reflow": true
},
"exporting": {
"enabled": false
},
"colors": ["#2C91DE", "#165A8E"],
"plotOptions": {
"line": {
"marker": {
"symbol": "circle"
}
},
"series": {
"stacking": "normal",
"marker": {
"lineWidth": 0,
"lineColor": null,
"enabled": true,
"radius": 5
}
}
},
"tooltip": {
"shared": true,
"crosshairs": true,
"followPointer": true,
"borderColor": null
}
},
"title": {
"text": "Blood Pressure"
},
"loading": false,
"xAxis": {
"startOnTick": true,
"endOnTick": true,
"tickInterval": 86400000,
"type": "datetime",
"title": {
"text": "Date/Time"
},
"labels": {
"rotation": -60,
"format": "{value:%m-%d-%Y}",
"align": "right"
}
},
"series": [{
"name": "Systolic",
"data": [{
"x": 1472980051000,
"y": 43,
"fillColor": "#e74c3c"
}, {
"x": 1472980051000,
"y": 34,
"fillColor": "#e74c3c"
}, {
"x": 1473066451000,
"y": 120,
"fillColor": "#e74c3c"
}, {
"x": 1473697392000,
"y": 119,
"fillColor": "#2ecc71"
}, {
"x": 1473710858000,
"y": 120,
"fillColor": "#2ecc71"
}, {
"x": 1473710858000,
"y": 120,
"fillColor": "#2ecc71"
}, {
"x": 1473711048000,
"y": 114,
"fillColor": "#2ecc71"
}, {
"x": 1473711048000,
"y": 114,
"fillColor": "#2ecc71"
}, {
"x": 1474548167000,
"y": 95,
"fillColor": "#f1c40f"
}, {
"x": 1474647485000,
"y": 106,
"fillColor": "#f1c40f"
}, {
"x": 1474647535000,
"y": 106,
"fillColor": "#f1c40f"
}, {
"x": 1474654052000,
"y": 93,
"fillColor": "#f1c40f"
}]
}, {
"name": "Diastolic",
"data": [{
"x": 1472980051000,
"y": 53,
"fillColor": "#e74c3c"
}, {
"x": 1472980051000,
"y": 120,
"fillColor": "#e74c3c"
}, {
"x": 1473066451000,
"y": 32,
"fillColor": "#e74c3c"
}, {
"x": 1473697392000,
"y": 70,
"fillColor": "#2ecc71"
}, {
"x": 1473710858000,
"y": 80,
"fillColor": "#2ecc71"
}, {
"x": 1473710858000,
"y": 80,
"fillColor": "#2ecc71"
}, {
"x": 1473711048000,
"y": 68,
"fillColor": "#2ecc71"
}, {
"x": 1473711048000,
"y": 68,
"fillColor": "#2ecc71"
}, {
"x": 1474548167000,
"y": 55,
"fillColor": "#f1c40f"
}, {
"x": 1474647485000,
"y": 57,
"fillColor": "#f1c40f"
}, {
"x": 1474647535000,
"y": 59,
"fillColor": "#f1c40f"
}, {
"x": 1474654052000,
"y": 54,
"fillColor": "#f1c40f"
}]
}],
"yAxis": {
"title": {
"text": "mmHg"
}
}
}

Answer

Sorry, I misread your post as referring to the x axis.

In your plotOptions, you are specifying:

"stacking": "normal"

You are telling the chart to stack the series on top of each other.

Remove that, and the values reflect the proper y values:

Comments