Align Y axis of multiple chart workaround - CanvasJS JavaScript Charts
Align Y axis of multiple chart workaround - CanvasJS JavaScript Charts
HTML
<script src="http://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>
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer",
{
axisY:{
labelMaxWidth: 40,
fontSize: 12,
margin: 0,
labelFormatter: function(e){
e.chart.axisYlabelMaxWidth = Math.max(e.chart.axisYLabelMaxWidth ? e.chart.axisYLabelMaxWidth : 0, e.value.toString().length * e.chart.options.axisY.fontSize * 0.7);
return e.value;
}
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55},
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14}
]
}
]
});
chart.render();
var chart1 = new CanvasJS.Chart("chartContainer1",
{
axisY:{
labelMaxWidth: 40,
fontSize: 12,
margin: 0,
labelFormatter: function(e){
e.chart.axisYlabelMaxWidth = Math.max(e.chart.axisYLabelMaxWidth ? e.chart.axisYLabelMaxWidth : 0, e.value.toString().length * e.chart.options.axisY.fontSize * 0.7);
return e.value;
}
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 110000071 },
{ x: 20, y: 50000005 },
{ x: 30, y: 50978395 },
{ x: 40, y: 65470085 },
{ x: 50, y: 90557455 },
{ x: 60, y: 68545006 },
{ x: 70, y: 256465465 },
{ x: 80, y: 33548644 },
{ x: 90, y: 163594944 }
]
}
]
});
chart1.render();
alignYAxis();
//---------------- Function For Aligning Axis -----------------------
function alignYAxis(){
chart.options.axisY.labelMaxWidth = chart.axisYlabelMaxWidth;
chart1.options.axisY.labelMaxWidth = chart1.axisYlabelMaxWidth;
if(chart.axisYlabelMaxWidth > chart1.axisYlabelMaxWidth)
chart1.options.axisY.margin = (chart.axisYlabelMaxWidth - chart1.axisYlabelMaxWidth);
else
chart.options.axisY.margin =...