I have a chart that I can barely see the «Activities» column and I was wondering if I could define the default Y axis to a certain dataset?
I’d like to improve the visibility / UI of the chart. Any suggestions on how can I do it?
The following example also can be seen in JSFiddle.
const ctx = document.getElementById('my-chart').getContext('2d');
new Chart(ctx,
{
type: 'bar',
data:
{
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets:
[
{
label: 'Activities',
backgroundColor: '#000',
data: [5, 33, 24, 6, 14, 5, 8, 10, 5, 4, 0, 0],
},
{
label: 'Grand total',
backgroundColor: '#eb4034',
data: [0, 300.96, 482.98, 153.75, 463.71, 70.36, 3025.80, 1142.00, 2266.89, 1660.50, 0, 0],
},
]
},
options:
{
responsive: true,
maintainAspectRatio: false,
elements:
{
line:
{
tension: 0.4,
borderJoinStyle: 'round',
}
},
tooltips:
{
mode: 'index',
intersect: false,
},
hover:
{
mode: 'nearest',
intersect: true
},
scales:
{
xAxes:
[
{
gridLines:
{
display: false
},
}
],
yAxes:
[
{
gridLines:
{
display: true,
color: '#d9dffa',
drawBorder: false,
offsetGridLines: false,
drawTicks: false,
borderDash: [3,5],
zeroLineWidth: 1,
zeroLineColor: '#d9dffa',
zeroLineBorderDash: [3,4]
}
}
]
},
legend:
{
display: false,
}
},
});<body>
<canvas id="my-chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>>Solution :
You can put an id per axis y, called yAxisID, to disambiguate the scale at will. Try this code:
const ctx = document.getElementById('my-chart').getContext('2d');
new Chart(ctx,
{
type: 'bar',
data:
{
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets:
[
{
label: 'Activities',
backgroundColor: '#000',
data: [5, 33, 24, 6, 14, 5, 8, 10, 5, 4, 0, 0],
yAxisID: "yActvity"
},
{
label: 'Grand total',
backgroundColor: '#eb4034',
data: [0, 300.96, 482.98, 153.75, 463.71, 70.36, 3025.80, 1142.00, 2266.89, 1660.50, 0, 0]
},
]
},
scales: {
yActvity: {
min: 0,
max: 40,
}
},
options:
{
responsive: true,
maintainAspectRatio: false,
elements:
{
line:
{
tension: 0.4,
borderJoinStyle: 'round',
}
},
tooltips:
{
mode: 'index',
intersect: false,
},
hover:
{
mode: 'nearest',
intersect: true
},
scales:
{
xAxes:
[
{
gridLines:
{
display: false
},
}
],
yAxes:
[
{
gridLines:
{
display: true,
color: '#d9dffa',
drawBorder: false,
offsetGridLines: false,
drawTicks: false,
borderDash: [3,5],
zeroLineWidth: 1,
zeroLineColor: '#d9dffa',
zeroLineBorderDash: [3,4]
}
}
]
},
legend:
{
display: false,
}
},
});<body>
<canvas id="my-chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>