Column chart with longer ticks - CanvasJS JavaScript Charts

Column chart with longer ticks - CanvasJS JavaScript Charts

by canvasjs

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 chart = new CanvasJS.Chart("chartContainer", {
   title: {
     text: "Axis Y With long ticks"
   },
   data: [{
     type: "column",
     dataPoints: [
				{ x: 100, y: 71 },
        { x: 200, y: 55},
        { x: 300, y: 50 },
        { x: 400, y: 65 },
        { x: 500, y: 95 },
        { x: 600, y: 68 },
        { x: 700, y: 28 },
        { x: 800, y: 34 },
        { x: 900, y: 14}
     ]
   }]
 });

 chart.render();
 addTicks(chart);

 function addTicks(chart) {
   var dataPoints = [];
   for (var i = 0; i < chart.data[0].dataPoints.length; i++) {
     dataPoints.push({
       x: chart.data[0].dataPoints[i].x,
       y: chart.axisY[0].minimum
     })
   }
   var series = {
     type: "line",
     color: "transparent",
     toolTipContent: null,
     indexLabel: "{x}",
     indexLabelFontSize: 0,
     indexLabelLineThickness: 2,
     indexLabelLineColor: "#BBBBBB",
     dataPoints: dataPoints
   };
   chart.addTo("data", series)
 }