Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var labels = [
 'A', 'B', 'C', 'D','E', 'F', 'G', 'H', 'I', 'J', 'K'
]

var chart = new CanvasJS.Chart("chartContainer",
{
    "data": [{
        "type": "line",
        "lineThickness": 1,
        "lineDashType": "solid",
        "markerType": "circle",
        "color": "#F28834",
        "showInLegend": false,
        "dataPoints": [{
            "y": 51610,
            "x": 0
        }, {
            "y": 18556,
            "x": 1
        }, {
            "y": 12916,
            "x": 2
        }, {
            "y": 8100,
            "x": 3
        }, {
            "y": 6073,
            "x": 4
        }, {
            "y": 4326,
            "x": 5
        }, {
            "y": 4183,
            "x": 6
        }, {
            "y": 3263,
            "x": 7
        }, {
            "y": 3089,
            "x": 8
        }, {
            "y": 2362,
            "x": 9
        }]
    }],
    "axisX": [{
        "labelAngle": -45,
        "titleFontSize": 10,
        "titleFontFamily": "Roboto, Arial, Helvetica, sans-serif",
        "titleFontColor": "rgb(51, 51, 51)",
        "titleFontWeight": "bold",
        "labelFontColor": "#9badbf",
        "gridColor": "rgb(221, 228, 233)",
        "gridThickness": 0,
        "lineColor": "#dde4e9",
        "tickColor": "rgb(221, 228, 233)",
        "labelMaxWidth": 120,
        "labelFontSize": 10,
        "labelWrap": true,
        labelFormatter: function(e){
          console.log(e.value);
          return labels[e.value] || '' ;
        }
    }],
    "axisY": [{
        "gridColor": "#dde4e9",
        "labelFontColor": "#9badbf",
        "gridThickness": 1,
        "lineThickness": 0,
        "labelFontSize": 12,
        "title": "_count",
        "titleFontSize": 10,
        "titleFontFamily": "Roboto, Arial, Helvetica, sans-serif",
        "titleFontColor": "rgb(51, 51, 51)",
        "titleFontWeight": "bold",
        "tickColor": "#dde4e9",
    }],
    "legend": {
        "enabled": false
    }
}


);

chart.render();