Custom labelFormatter for axisY- CanvasJS JavaScript Charts
Custom labelFormatter for axisY-
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 labels = {
10: "rest", 20: "walk", 30: "jog", 40:"run"
};
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Custom labelFormatter for axisY"
},
axisY:{
labelFormatter: function(e){
return customLabel(e.value);
}
},
data: [
{
type: "stackedColumn",
dataPoints: [
{ x:new Date(2015, 02, 1), y: 10 },
{ x:new Date(2015, 02, 5), y: 20 },
{ x:new Date(2015, 02, 10), y: 40 },
{ x:new Date(2015, 02, 15), y: 30 },
]
},
{
type: "stackedColumn",
dataPoints: [
{ x:new Date(2015, 02, 1), y: 40 },
{ x:new Date(2015, 02, 5), y: 70 },
{ x:new Date(2015, 02, 10), y: 10 },
{ x:new Date(2015, 02, 15), y: 20 },
]
}
]
});
chart.render();
function customLabel(value){
if (value && labels[value])
return labels[value];
else
return value;
}