Bar chart with min height and zero values - ChartJs

Question

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>

Answer 1

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>