Axis Labels, Tick at Irregular Intervals (Workaround using Stripline) | CanvasJS JavaScript Charts
Axis Labels, Tick at Irregular Intervals (Workaround using Stripline) | 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 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: 2 } low-value, single data points (like this) work
// NOTE: Uncomment ONLY this first point to display bug
// Large x values (for example, the current time in microseconds) cause problems
//{ x: 1580920815460000, y: 2 } // This hangs on render() and pegs the CPU
//,{ x: 1580920815470000, y: 3 } // Uncommenting this second data point fixes the problem
]
}
]
});
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();