I am using Chart.js library for creating charts in my project. I want to set the y-axis minimum value to zero, but on doing so the second dataset starts after after the end of first dataset.
What I have tried:
Code 1:
<pre><html>
<head>
<script src="Chart.bundle.js"></script>
</head>
<body>
<div class="dvNWwise" style="width: 350px; height: 300px;">
<canvas id="cvNWwise" style="width: 350px; height: 300px;"></canvas>
</div>
<script type="text/javascript">
var ctx_cvNWwise = document.getElementById('cvNWwise').getContext('2d');
var chrt_cvNWwise = new Chart(ctx_cvNWwise, {
type: 'bar',
data: {
labels: ['NW-1','NW-2'],
datasets: [
{label: 'Total TID', backgroundColor: '#B3E5FC', borderColor: '#03A9F4', borderWidth: 1, data: [12028,8885] },
{label: 'Active TID', backgroundColor: '#CCFF90', borderColor: '#76FF03', borderWidth: 1, data: [8280,6090] }
] },
options: {
responsive: true, legend: { position: 'bottom'},
title: {display: true,text: 'Network wise Active Terminals (Total Terminals: 20913)'}
}
});
</script>
</body>
</html>
Output is proper like this one-
Image 1
Code 2:
<html>
<head>
<script src="Chart.bundle.js"></script>
</head>
<body>
<div class="dvNWwise" style="width: 350px; height: 300px;">
<canvas id="cvNWwise" style="width: 350px; height: 300px;"></canvas>
</div>
<script type="text/javascript">
var ctx_cvNWwise = document.getElementById('cvNWwise').getContext('2d');
var chrt_cvNWwise = new Chart(ctx_cvNWwise, {
type: 'bar',
data: {
labels: ['NW-1','NW-2'],
datasets: [
{label: 'Total TID', backgroundColor: '#B3E5FC', borderColor: '#03A9F4', borderWidth: 1, data: [12028,8885] },
{label: 'Active TID', backgroundColor: '#CCFF90', borderColor: '#76FF03', borderWidth: 1, data: [8280,6090] }
] },
options: {
responsive: true, legend: { position: 'bottom'},
title: {display: true,text: 'Network wise Active Terminals (Total Terminals: 20913)'} ,
scales:{ yAxes: [{display:true, stacked:true, ticks: {min: 0}} ] }
}
});
</script>
</body>
</html>
In the Output second data set distorts, second dataset is starting after first dataset.
Image 2
I need help with the second chart.
Submit an article or tip