Hi.
Am new to all this so hope I’m following all of the rules. Have started looking at Charts v2 and am considering using it for our latest project. The following code adds a line and a bar to a chart.
The left axis has a max of 72 and the right axis a max of 100.
The red line is plotted against the left axis and then green bar against the right.
The problem is that the bar is ‘scaling’ to the left. The bar value is 50 but aligns with the 50 on the left and the 70 on the right.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE10' />
</head>
<body class='AlignCenter' >
<div class='container'><canvas id='c'></canvas></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js' ></script>
<script>
var ctx = document.getElementById('c');
var myChart = new Chart(ctx, {
type: 'bar',
data: {labels: ['A','B','C'],
datasets: [
{
type: 'line', fill: false, lineTension: 0,
label: 'line value',
data: [40,50,60],
yAxisId: 'y-axis-1',
borderColor: 'rgba(255,0,0,255)',
backgroundColor: 'rgba(255,255,0,255)',
borderWidth: 2
}
,
{
type: 'bar',
label: '% bar Value',
data: [50,50,50],
yAxisId: 'y-axis-2',
borderColor: 'rgba(0,0,255,255)',
backgroundColor: 'rgba(0,255,0,255)',
borderWidth: 2
}
]
},
options: {scales:
{
yAxes:
[
{
scaleLabel: { display: true, labelString: 'Max 72' },
position: 'left', id: 'y-axis-1',type: 'linear',
ticks: { min: 0, beginAtZero: true, stepSize: 6, max: 72 }
},
{
scaleLabel: { display: true, labelString: 'Max 100' },
position: 'right', id: 'y-axis-2',type: 'linear',
ticks: { min: 0, beginAtZero: true, max: 100 },
gridLines: { display: false }
}
]
},
legend: { position: 'bottom' }
}
});
</script>
</body>
</html>
Thanks, any help would be greatly appreciated.