Chartjs-How to hide null columns in chart js if they are in a group of data

by

0👍

After searching for days and days on internet, and don’t find an answer, I had to change a bit the way I was doing the chart. I made the dataset to have data for 31 days, and on months that have less days, I put a null value for that days. Still I can’t get rid of the blank spaces generated by them, but now they are way less than before.

Maybe due to size of the space where run the snipper it can’t be seen, but if you see it on full size it will be clear. There is something that I couldn’t show on the snipper, maybe I missed some library, but on the picture it shows two numbers on the bars. The number over the bar is the day, and the one on the middle of the bar are the sales on that day.

Hope that if someone is facing this same problem with months, can find the code/example useful.

var grafica1 = document.getElementById("graficaGananciasProductos_0");

var chart1 = new Chart(grafica1, {
  type: "bar",
  data: {
    "datasets": [{
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 734, 577],
        "borderWidth": "1",
        "label": "01"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 854, 686],
        "borderWidth": "1",
        "label": "02"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 557, 567],
        "borderWidth": "1",
        "label": "03"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 46, 256],
        "borderWidth": "1",
        "label": "04"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 345, 644],
        "borderWidth": "1",
        "label": "05"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 3445, 456],
        "borderWidth": "1",
        "label": "06"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 866, 136],
        "borderWidth": "1",
        "label": "07"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 455, 467],
        "borderWidth": "1",
        "label": "08"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 356, 577],
        "borderWidth": "1",
        "label": "09"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 456, 167],
        "borderWidth": "1",
        "label": "10"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 45, 467],
        "borderWidth": "1",
        "label": "11"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 3556, 45],
        "borderWidth": "1",
        "label": "12"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 356, 257],
        "borderWidth": "1",
        "label": "13"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 34, 126],
        "borderWidth": "1",
        "label": "14"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 866, 567],
        "borderWidth": "1",
        "label": "15"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 554, 456],
        "borderWidth": "1",
        "label": "16"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 3445, 755],
        "borderWidth": "1",
        "label": "17"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 865, 467],
        "borderWidth": "1",
        "label": "18"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 477, 567],
        "borderWidth": "1",
        "label": "19"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 64, 755],
        "borderWidth": "1",
        "label": "20"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 345, 567],
        "borderWidth": "1",
        "label": "21"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 123, 554],
        "borderWidth": "1",
        "label": "22"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [784, 456, 567],
        "borderWidth": "1",
        "label": "23"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [467, 34, 567],
        "borderWidth": "1",
        "label": "24"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [874, 824, 456],
        "borderWidth": "1",
        "label": "25"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [678, 245, 5467],
        "borderWidth": "1",
        "label": "26"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 67, 354],
        "borderWidth": "1",
        "label": "27"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [578, 456, 654],
        "borderWidth": "1",
        "label": "28"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, null, 564],
        "borderWidth": "1",
        "label": "29",
        "skipNull": true
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, null, 741],
        "borderWidth": "1",
        "label": "30",
        "skipNull": true
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [1234, null, 852],
        "borderWidth": "1",
        "label": "31",
        "skipNull": true
      }
    ],
    "labels": ["Enero de 2023", "Febrero de 2023", "Marzo de 2023"]
  },
  stacked: false,
  options: {
    skipnull: true,
    barPercentage: 1,
    categoryPercentage: 1,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        stacked: false,
        barPercentage: 0.7,
        categoryPercentage: 1
      }],
      yAxes: [{
        stacked: false
      }]
    },
    animation: {
      "onComplete": function() {
        var chartInstance = this.chart,
          ctx = chartInstance.ctx;

        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) {
            var data = dataset.label;
            ctx.fillText(data, bar._model.x, bar._model.y - 5);
          });
        });
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
  <div class="panel panel-default">
    <div class="form-group">
      <div class="form-horizontal form-bordered">
        <div class="ibox-content">
          <div class="row">
            <div class="col-xs-12">
              <canvas id="graficaGananciasProductos_0"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

As I can’t upload images, here it is how it should look with the code I use on the snipper.
https://imgur.com/b27WScN

Thanks

Leave a comment