Trouble getting Axis Labels to show up in Chart.js

Question

Having trouble getting Axis labels to show up in Chart.js. I've followed the docs but can't seem to get the labels to actually show.

Chart code look like this:

<script src="http://www.chartjs.org/dist/2.7.2/Chart.bundle.js"></script>

<canvas id="m-chart-562-1"></canvas>    

<script type="text/javascript">
new Chart(
  document.getElementById('m-chart-562-1').getContext('2d'),
  {
        "type": "bar",
        "options": {
            "title": {
                "display": true,
                "text": "Test"
            },
            "legend": {
                "display": true,
                "position": "bottom"
            },
            "scales": {
                "xAxes": {
                    "scaleLabel": {
                        "display": true,
                        "labelString": "Horizontal Axis"
                    }
                },
                "yAxes": {
                    "scaleLabel": {
                        "display": true,
                        "labelString": "Vertical Axis"
                    }
                }
            }
        },
        "data": {
            "datasets": [{
                "label": "Number",
                "data": [10, 2, 7],
                "backgroundColor": "#7cb5ec"
            }, {
                "label": "Fatalities",
                "data": [5, 0, 1],
                "backgroundColor": "#434348"
            }],
            "labels": ["Cars", "Planes", "Boats"]
        }
    }
);
</script>

The chart renders fine otherwise but neither the x/y axis shows the axis label I've set in the settings.

Here's a JS Fiddle showing the same issue: http://jsfiddle.net/methnen/skfs1fjp/1/

Been banging my head against it for a little while now so appreciate any help anyone can send my way.

Answer 1

Just add "[]" brackets to Axes values as below code:

"scales": {
                "xAxes": [{
                    "scaleLabel": {
                        "display": true,
                        "labelString": "Horizontal Axis"
                    }
                }],
                "yAxes": [{
                    "scaleLabel": {
                        "display": true,
                        "labelString": "Vertical Axis"
                    }
                }]
            }

Check link: http://jsfiddle.net/skfs1fjp/7/