Tengo un gráfico de barras en chartjs que muestra cuatro valores diferentes. También quiero que estas barras tengan una altura mínima, para que los valores pequeños se vean mejor. Para esto usé la opción minBarLength. El problema es que no quiero que las barras que tienen el valor cero se vean afectadas por esta opción.
¿Hay alguna manera de tener una longitud de barra mínima pero excluir valores cero o ciertos valores en general?
Estoy usando chartjs versión 3.7.1 con el complemento de etiqueta de datos 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>¿Hay alguna manera de tener una longitud de barra mínima pero excluir valores cero o ciertos valores en general?
ChartJS ve 0 como un valor.
Para que ChartJS sepa que esas columnas no deben representarse, debe usar NULL para las columnas vacías.
"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>