[Chartjs]-Chart.Js how to hide datapoints with "0" value in Stacked Bar Chart

by

0👍

Inside the options.animation.onComplete callback function, you draw the text using ctx.fillText(...). Simply don’t draw the text in case the value is zero.

To do so, you should add an if statement as follows:

if (dataset.data[i] > 0) {
  ctx.fillText(dataset.data[i], model.x, model.y + (dataset.data[i] / max * ((chartHeight / 2) - 50)));
}

In case the values are defined as strings as your question could suggest, the if statement may have to be changed slightly (i.e if (dataset.data[i] != '0') {).

0👍

This solution works for me (using ChartJS version 4.2):

  1. Prerequisites: OP says he cannot use plugins, so step 3 of this solution would need to be modified if that is still the case – however if you can use the newly separated label plugins for version 4.0 and higher of ChartJS, the below will work (but you have to import the below plugin CDN below your ChartJS import). Use of this plugin is now the officially supported means of displaying labels on top of charts for v4 and above of ChartJS.
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
  1. First define a set of formatter functions (I have 4 such functions: one simply returns the value as the label, another returns the value formatted as a percentage; the other two do the same, but return null when the value is equal to 0. We use these for chart types with touching data regions (e.g. stacked bars, pies and donuts).
const absoluteFormatter = (value) => {
    return value;
}
const percentageFormatter = (value) => {
    return Math.round(value) + '%';
}
const absoluteFormatterTouching = (value) => {
    if (value > 0) {
        return value;
    } else {
        return null;
    }
}
const percentageFormatterTouching = (value) => {
    if (value > 0) {
        return Math.round(value) + '%';
    } else {
        return null;
    }
}

Note the above formatters won’t work if you deal with any negative values or string values, so you’d need to adjust them accordingly in that case.

  1. Then when working with plugins, we use a config file like the below for a stacked bar chart:
const absoluteFormatterTouching = (value) => {
  if (value > 0) {
      return value;
  } else {
      return null;
  }
}

const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
const data = {
    labels: labels,
    datasets: [
        {
            label: 'Dataset 1',
            data: [0,4,5,2,10,20,30],
            backgroundColor: 'rgb(255, 99, 132)',
        },
        {
            label: 'Dataset 2',
            data: [12,19,3,0,2,3,10],
            backgroundColor: 'rgb(54, 162, 235)',
        },
        {
            label: 'Dataset 3',
            data: [11,20,30,4,51,60,0],
            backgroundColor: 'rgb(255, 205, 86)',
        },
    ]
};

const config = {
    type: "bar",
    data: data,
    plugins: [ChartDataLabels],
    options: {
        plugins: {
            title: {
                display: true,
                text: "Chart.js Bar Chart - Stacked",
            },
            datalabels: {
                display: true,
                formatter: absoluteFormatterTouching,
            },
        },
        responsive: true,
        scales: {
            x: {
                stacked: true,
            },
            y: {
                stacked: true,
            },
        },
    },
};

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, config);

Note the inclusion of the relevant formatter within the chart config.options.plugins.datalabels.formatter: absoluteFormatterTouching. This is where you place a pointer to the formatter you wish to use. You also have to include the line config.plugins: [ChartDataLabels] to have access to the imported DataLabels plugin from the CDN.

Leave a comment