Axis Labels, Tick at Irregular Intervals (Workaround using Stripline) | CanvasJS JavaScript Charts

Axis Labels, Tick at Irregular Intervals (Workaround using Stripline) | 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 axisLabels = [0,4,8,10,12,16,18,20], stripLines = [];

var chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text: "Chart Title"
  },
  axisX: {
    title:"Axis X Title",
    labelFormatter: function(e){
      return "";
    },
    stripLines: stripLines,
    tickThickness: 0
  },
  axisY:{
    title: "Axis Y Title"
  },
  data: [
    {
      type: "line",
      dataPoints: [
        { x: 1, y: 6 },
        { x: 4, y: 2 },
        { x: 8, y: 5  },
        { x: 12, y: 7 },
        { x: 14, y: 1 },
        { x: 18, y: 5 },
        { x: 20, y: 5 },
        { x: 22, y: 2 }					
      ]
    }
  ]
});

for(var i = 0; i < axisLabels.length; i++){
  stripLines.push({
    value: axisLabels[i],
    label: axisLabels[i],
    thickness: 0,
    labelPlacement: "outside",
    labelFontColor: "black",
    color: "black",
    labelBackgroundColor: "trasparent"
  });              
}

chart.render();