0
339
ViewsChartJS Horizontal bars barely visible with 50 records on the Y axis
Is there a way to set the vertical thickness of the horizontal bars in ChartJS(3.7.0). Or change the zoom level or something?
I have a recordset with 50 rows which should show 50 horizontal bars. However when the chart is rendered. The lines representing the horizontal bars are barely visible.
I am using this config:
const config = {
type: 'bar',
data: chart_data,
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
barThickness: 20, // number (pixels) or 'flex'
maxBarThickness: 22 // number (pixels)
}]
},
indexAxis: 'y',
plugins: {
legend: {
position: 'right',
},
}
}
};
I am also setting the bar and max thickness in each dataset as well. Also set the height of the parent <div> which houses the <canvas> tag to a large value 3200px.
Thanks
1 answers
Answer question0
Without seeing more of your code, it's almost impossible to find out, why the thickness of the bars in your chart is not what you expect.
The following points however are worth knowing when working with Chart.js v3:
scales.[x/y]Axes.barThicknesswas moved to dataset optionbarThicknessscales.[x/y]Axes.maxBarThicknesswas moved to dataset optionmaxBarThickness
More details can be found in the 3.x Migration Guide or in the Chart.js v3 documentation here.
Please take a look at below runnable script and see how it could be done in your case.
const data = [...Array(50)].map(e => ~~(Math.random() * 20 + 1));
const colors = ['255, 99, 132', '54, 162, 235', '255, 206, 86', '231, 233, 237', '75, 192, 192', '151, 187, 205', '220, 220, 220', '247, 70, 74', '70, 191, 189', '253, 180, 92', '148, 159, 177', '77, 83, 96'];
new Chart('chart', {
type: 'bar',
plugins: [{
beforeLayout: chart => chart.options.scales.y1.labels = chart.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)
}],
data: {
datasets: data.map((v, i) => ({
label: i + 1,
data: [{ x: v, y: i }],
backgroundColor: 'rgba(' + colors[i % colors.length] + ', 0.4)',
borderColor: 'rgb(' + colors[i % colors.length] + ')',
borderWidth: 1,
categoryPercentage: 1
}))
},
options: {
indexAxis: 'y',
plugins: {
legend: {
position: 'right',
},
tooltip: {
callbacks: {
title: () => undefined
}
}
},
scales: {
y: {
},
y1: {
offset: true,
gridLines: {
display: false
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="chart" height="600"></canvas>