I have a bar chart in chartjs which displays four different values. I also want these bars to have a minimum height, so that small values are better visible. For this i used the minBarLength option. The problem is that i don't want the bars which have the value zero to be affected by this option.
Is there a way to have a minimum bar length but exclude zero values or certain values in general?
Im using chartjs version 3.7.1 with the datalabel plugin 2.0.0.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id=chart1 height="75"></canvas>
<script>
let chart = document.getElementById('chart1').getContext('2d');
var dataset = {
"labels": ["OK", "Critical", "Warning", "Unknown"],
"datasets": [{
"label": "Example",
"minBarLength": "40",
"backgroundColor": ["rgba(58, 255, 0, 0.4)", 'rgba(255, 45, 0, 0.4)', 'rgba(255, 185, 0, 0.4)', 'rgba(161, 161, 161, 0.4)'],
"borderColor": ["rgb(58, 255, 0)", 'rgb(255, 45, 0)', 'rgb(255, 185, 0)', 'rgb(161, 161, 161)'],
"borderWidth": 2,
"fill": true,
"data": [34, 0, 1, 0],
}]
};
var myChart = new Chart(chart, {
plugins: [ChartDataLabels],
type: 'bar',
data: dataset,
options: {
indexAxis: 'x',
scales: {
y: {
gridLines: {
display: false
},
ticks: {
display: false
}
}
},
plugins: {
datalabels: {
display: function(context) {
return context.dataset.data[context.dataIndex] !== 0;
},
font: {
size: 20,
}
},
legend: {
labels: {
boxWidth: 0
}
}
}
}
});
</script>Is there a way to have a minimum bar length but exclude zero values or certain values in general?
ChartJS sees 0 as an value.
To let ChartJS know that that columns shouldn't be rendered, you should use NULL for the empty cols.
"data": [34, NULL, 1, NULL],
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id=chart1 height="75"></canvas>
<script>
let chart = document.getElementById('chart1').getContext('2d');
var dataset = {
"labels": ["OK", "Critical", "Warning", "Unknown"],
"datasets": [{
"label": "Example",
"minBarLength": "40",
"backgroundColor": ["rgba(58, 255, 0, 0.4)", 'rgba(255, 45, 0, 0.4)', 'rgba(255, 185, 0, 0.4)', 'rgba(161, 161, 161, 0.4)'],
"borderColor": ["rgb(58, 255, 0)", 'rgb(255, 45, 0)', 'rgb(255, 185, 0)', 'rgb(161, 161, 161)'],
"borderWidth": 2,
"fill": true,
"data": [34, null, 1, null],
}]
};
var myChart = new Chart(chart, {
plugins: [ChartDataLabels],
type: 'bar',
data: dataset,
options: {
indexAxis: 'x',
scales: {
y: {
gridLines: {
display: false
},
ticks: {
display: false
}
}
},
plugins: {
datalabels: {
display: function(context) {
return context.dataset.data[context.dataIndex] !== 0;
},
font: {
size: 20,
}
},
legend: {
labels: {
boxWidth: 0
}
}
}
}
});
</script>