Highcharts

Data and Catagories must match in quoting

by Ben Clayton

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


Data(X) and Catagories must both be quoted
<pre>      "categories": ["8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22"]

      "data": [
        ["8", 505],
        ["9", 483],
        ["10", 700],
        ["11", 926],
        ["12", 1176],
        ["13", 1161],
        ["14", 1074],
        ["15", 1156],
        ["16", 1289],
        ["17", 1196],
        ["18", 1036],
        ["19", 1017],
        ["20", 964],
        ["21", 749],
        ["22", 523]
      ]
      </pre>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  $('#container').highcharts({

 
    "yAxis": {
      "plotLines": [{
        "width": 1,
        "color": "#808080",
        "value": 0
      }],
      "title": {
        "text": "Mobile / Desktop"
      }
    },
    "xAxis": {
      "dateTimeLabelFormats": {
        "month": "%b %Y",
        "week": "%e %b %Y",
        "day": "%e %b %Y"
      },
      "plotBands": null,
      "type": "linear",
      "title": {
        "text": ""
      },
      "categories": ["8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22"]
    },
    "chart": {
      "zoomType": "x",
      "min-width": 250,
      "max-width": 0,
      "type": "column",
      "renderTo": "graph-22365"
    },
    "plotOptions": {
      "column": {
        "stacking": "normal"
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true
    },
    "series": [{
      "fillColor": {
        "stops": [
          [0, Highcharts.getOptions().colors[1 - 1]],
          [1, Highcharts.Color(Highcharts.getOptions().colors[1 - 1]).setOpacity(0).get('rgba')]
        ],
        "linearGradient": {
          "y1": 0,
          "x2": 0,
          "y2": 1,
          "x1": 0
        }
      },
      "name": "Mobile",
      "data": [
        ["8", 505],
        ["9", 483],
        ["10", 700],
        ["11", 926],
        ["12", 1176],
        ["13", 1161],
        ["14", 1074],
        ["15", 1156],
        ["16", 1289],
        ["17", 1196],
        ["18", 1036],
        ["19", 1017],
        ["20", 964],
        ["21", 749],
        ["22", 523]
      ]
    }, {
      "fillColor": {
        "stops": [
          [0, Highcharts.getOptions().colors[2 - 1]],
          [1, Highcharts.Color(Highcharts.getOptions().colors[2 - 1]).setOpacity(0).get('rgba')]
        ],
        "linearGradient": {
          "y1": 0,
          "x2": 0,
          "y2": 1,
          "x1": 0
        }
      },
      "name": "Desktop",
      "data": [
        ["8",...