How to hide / not draw bars with 0 / null / undefined values?

Question

How to hide values that are false ? ( 0, null or undefined)

I have tried to do something like

new Chart(this.barCanvas.nativeElement, {

    ...

     data: {
            datasets: [{
                     data: [
                             value < 1 ? null : value,
                             value2 < 1 ? null : value2,
                             valueX < 1 ? null : valueX,
                     ],
            }],
    },
    options: {
            skipNull: true,
    }

    ...

}

But it doesn't work.

I've found some similar post on SOF with no answers or working solution

Inspired on LeeLenalee answer and zhulien comment I have created a variable chartData that I filter before passing it.

But passing the variable chartData make a type error on data (to copy past the object of chartData and passing it directly does not make a type error, but the view of the graph does not load)

indexToRemove is an array of index based on data that are to 0

var chartData = {
      labels: ['Batterie faible', 'Maintenance', 'HS', 'Place libre', 'Place occupée'].filter((v, i) => indexToRemove.includes(i)),
      datasets: [{
        label: '',
        data: data.filter((v, i) => indexToRemove.includes(i)),
        backgroundColor: [
          '#F6741A',
          '#dc2625',
          '#B91C1B',
          '#22c55e',
          '#FACC14'
        ].filter((v, i) => indexToRemove.includes(i)),
        borderRadius: 4,
        borderSkipped: false,
      }]
    }

    new Chart(this.barCanvas.nativeElement, {
      type: 'bar',
      data: chartData, // <- Type error (But replacing by the object correct the type error but still does not work as said above)
    ...
    }

A more general solution. Does it work for you to filter the items before passing them to the chart altogether? — zhulien, Jan 03 '22 at 16:03
zhulien Do you mean to filter my array and my labels before setting it ? I'd rather have a more chartjs solution, but what I did should work so I don't really get it :/ — crg, Jan 03 '22 at 16:12
0stone0 Add `null` to the dataset and `skipNull: true` in the options. chartjs.org/docs/3.2.0/charts/bar.html. — crg, Jan 03 '22 at 16:49

LeeLenalee · Accepted Answer · 2022-01-18T16:21:20.383

2

You can filter your data beforeHand and use object notation togehter with it:

let initialData = [{
    "x": "label1",
    "y": 9
  },
  {
    "x": "label2",
    "y": 0
  },
  {
    "x": "label3",
    "y": 5
  },
  {
    "x": "label4",
    "y": 10
  },
  {
    "x": "label6",
    "y": null
  },
  {
    "x": "label7",
    "y": 3
  },
  {
    "x": "label8",
    "y": undefined
  }
];
let data = initialData.filter(e => e.y);

const options = {
  type: 'bar',
  data: {
    datasets: [{
      label: '# of Votes',
      data: data,
      backgroundColor: 'pink',
    }]
  },
  options: {}
}

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

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

edited Jan 18 '22 at 16:21

answered Jan 03 '22 at 16:23

LeeLenalee

27,463
6
45
69

1

Because you change the I dexAxis you also need to change the X and Y in each object, so the Y is the string with label and X is the value – LeeLenalee Jan 04 '22 at 10:57
Yes I changed the values right after, but if you try to add the option `indexAxis: 'y'` and to swap `x` and `y` in `initialData` you will see that it does not work. Null values stay displayed. – crg Jan 04 '22 at 12:53
1

That's because the filter works on the value and that was Y so you need to change that to X too – LeeLenalee Jan 04 '22 at 12:55
Damn you're right. I must rest I guess ! Thx – crg Jan 04 '22 at 12:57

How to hide / not draw bars with 0 / null / undefined values?

1 Answers1