title: Completely remove bars with 0 values
body: <p>I'm using charts.js 2.9.4</p>
  <p>I can render the chart just fine as you can see in this <a href="https://jsfiddle.net/mq647k3f/7/" rel="nofollow noreferrer">jsfiddle</a></p>
  <pre class="lang-js prettyprint-override"><code>Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,&quot;Helvetica Neue&quot;,Arial,sans-serif';
  Chart.defaults.global.defaultFontColor = '#292b2c';
  
  var ctx = document.getElementById(&quot;data&quot;);
  var myLineChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [&quot;2014&quot;, &quot;2015&quot;, &quot;2016&quot;, &quot;2017&quot;, &quot;2018&quot;, &quot;2019&quot;, &quot;2020&quot;],
      datasets: [{
          label: &quot;Data 1&quot;,
          backgroundColor: &quot;#198754&quot;,
          borderWidth: &quot;0&quot;,
          data: [1000, 0, 0, 0, 0, 0, 0],
        },
        {
          label: &quot;Data 2&quot;,
          backgroundColor: &quot;#ff0000&quot;,
          borderWidth: &quot;0&quot;,
          data: [0, 0, 0, 0, 0, 0, 1000],
        },
        {
          label: &quot;Data 3&quot;,
          backgroundColor: &quot;#6f42c1&quot;,
          borderWidth: &quot;0&quot;,
          data: [650, 650, 650, 650, 650, 650, 650],
        },
        {
          label: &quot;Data 4&quot;,
          backgroundColor: &quot;#ffc107&quot;,
          data: [350, 350, 350, 350, 350, 350, 350],
        },
      ],
    },
    options: {
      plugins: {
        datalabels: {
          display: function(context) {
            return context.dataset.data[context.dataIndex] &gt; 1;
          }
        }
      },
      responsive: true,
      title: {
        display: true,
        text: 'Points',
        fontSize: '20',
      },
      scales: {
        xAxes: [{
          time: {
            unit: 'Gal'
          },
          gridLines: {
            display: true
          },
          ticks: {
            maxTicksLimit: 10,
            beginAtZero: true,
            min: 0,
            suggestedMin: 0,
          },
        }],
        yAxes: [{
          ticks: {
            min: 0,
            max: 1000,
            maxTicksLimit: 10,
            beginAtZero: true,
            suggestedMin: 0
          },
          gridLines: {
            display: true
          }
        }],
      },
      legend: {
        display: false
      },
    }
  });
  </code></pre>
  <p>As you can see the 0 values already doesn't show anything, but there are gaps.</p>
  <p>What I wanted to do is completely remove those gaps. I've search and tried different options mentioned <a href="https://stackoverflow.com/questions/54186169/remove-0s-zeros-from-x-axis-of-bar-chart-in-chart-js">here</a> and also tried <a href="https://v1_0_0--chartjs-plugin-datalabels.netlify.app/samples/charts/bar.html" rel="nofollow noreferrer">this</a> but nothing seem to work.</p>
  <p>Is it even doable?</p>
  <p>Any help?</p>