CODEWITHSUNDEEP
javascriptjqueryhtmlchartshighcharts
Shiv Kumar Ganesh
Shiv Kumar Ganesh

Reputation: 3825

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"
      }
    }
  }

Upvotes: 1

Views: 1184

Answers (1)

jlbriggs
jlbriggs

Reputation: 17791

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:

Upvotes: 2

Related Questions