title: How can i remove the spaces or padding between the bars as well as the blank spaces in divs in chart js
body: <p>I am facing an issue in adjusting the width of each container in chartjs.
  Please have a look into this and provide your input to fix this issue.
  I am using a single &lt;div&gt; in a loop to print 3 types of data in different divs.</p>
  <p>Here in the screenshot, first chart is proper. But in the 2nd and 3rd one there are spaces between the BARs. So please help me to remove those spaces.</p>
  <p>Please have a look into this attached picture for better clarity.
  <img src="https://i.stack.imgur.com/aOJ6C.png" alt="enter image description here" /></p>
  <p>Source code :</p>
  <pre><code>&lt;body&gt;
      &lt;div&gt;
          &lt;div id=&quot;barChartContainer&quot; class=&quot;chartAreaWrapper&quot; style=&quot;display: inline-block&quot;&gt;
              &lt;canvas id=&quot;barChart&quot;&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;CHART PROBLEM&lt;/title&gt;
      &lt;style&gt;
          .chartAreaWrapper {
              height: 300px;
              margin:0!important;
              padding:0!important;
              /*     overflow-x: scroll; */
          }
      &lt;/style&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css&quot; integrity=&quot;sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M&quot; crossorigin=&quot;anonymous&quot;&gt;
      &lt;link href=&quot;//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js&quot;&gt;&lt;/script&gt;
      &lt;!-- &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt; --&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.min.js&quot; integrity=&quot;sha512-+UYTD5L/bU1sgAfWA0ELK5RlQ811q8wZIocqI7+K0Lhh8yVdIoAMEs96wJAIbgFvzynPm36ZCXtkydxu1cs27w==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
      
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div&gt;
          &lt;div id=&quot;barChartContainer&quot; class=&quot;chartAreaWrapper&quot; style=&quot;display: inline-block&quot;&gt;
              &lt;canvas id=&quot;barChart&quot;&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
      let myChart = undefined;
      function random_rgba() {
          let r = Math.round, g = Math.random, b = 255;
          return 'rgba(' + r(g() * b) + ',' + r(g() * b) + ',' + r(g() * b) + ', 0.7)';
      }
  
      let jsonData = { &quot;xAsix&quot;: [&quot;Skipped&quot;, &quot;Passed&quot;, &quot;Failed&quot;], &quot;dataSet&quot;: [{&quot;data&quot;: [0, 28, 12], &quot;label&quot;: &quot;test&quot; }, { &quot;data&quot;: [3, 0, 0], &quot;label&quot;: &quot;dit2&quot; }, { &quot;data&quot;: [6, 0, 0], &quot;label&quot;: &quot;Xerces_JavaDriversHP&quot; }, { &quot;data&quot;: [12, 0, 0], &quot;label&quot;: &quot;Sun_Xerces&quot; }, { &quot;data&quot;: [1, 0, 0], &quot;label&quot;: &quot;Sun_Dad&quot; }, { &quot;data&quot;: [1, 0, 0], &quot;label&quot;: &quot;JavaConn-LnxDIT&quot; }, { &quot;data&quot;: [0, 31, 1], &quot;label&quot;: &quot;HP_Xerces&quot; }, { &quot;data&quot;: [6, 0, 0], &quot;label&quot;: &quot;HP_JavaDrivers&quot; }, { &quot;data&quot;: [0, 30, 2], &quot;label&quot;: &quot;HP&quot; }, { &quot;data&quot;: [2, 0, 0], &quot;label&quot;: &quot;DIT-JavaConn&quot; }, { &quot;data&quot;: [4, 0, 0], &quot;label&quot;: &quot;DIT&quot; }, { &quot;data&quot;: [1, 0, 0], &quot;label&quot;: &quot;DAD_Sun&quot; }, { &quot;data&quot;: [0, 1, 0], &quot;label&quot;: &quot;DADDrivers_HP&quot; }, { &quot;data&quot;: [6, 0, 0], &quot;label&quot;: &quot;Auto&quot; }] }
  
      console.log(&quot;jsonData---&gt;&quot;, jsonData);
  
      const label = jsonData.xAsix;
      console.log(label);
      const dataset = jsonData.dataSet;
      console.log(&quot;dataset len::&quot; + dataset.length);
      if (dataset.length &gt; 0) {
          let maxEle = 0;
          dataset.forEach((e, i) =&gt; {
              let positiveValue = 0;
              e.data = e.data.map(value =&gt; {
                  positiveValue += !value &amp;&amp; 1;
                  return value || undefined
              });
              maxEle = maxEle &lt; positiveValue ? positiveValue : maxEle;
              e.skipNull = true;
              e.backgroundColor = [random_rgba(i)];
              e.borderColor = [&quot;rgba(255,159,64,0.2)&quot;];
              e.barPercentage = 0.9;
              //e.barThickness = 50;
              //e.barThickness = 'flex';
              e.categoryThickness = 'flex';
              e.maxBarThickness= 50;
              e.minBarLength= 30;
              e.categoryPercentage = 1;
  
          });
          const Containerwidth = dataset.length * dataset[0].data.length * 50 + 250;
          document.getElementById('barChartContainer').style.width = Containerwidth + 100 + 'px'
          console.log(dataset);
          if (myChart) {
              myChart.destroy();
              console.log(myChart);
          }
          var element = $('#barChart');
          document.getElementById(&quot;barChart&quot;).style.display = &quot;block&quot;;
  
          myChart = new Chart(element, {
  
              type: 'bar',
              exportEnabled: true,
              //animationEnabled: true,
              categoryThickness: 'flex',
              maintainAspectRatio: false,
              responsive: true,
              data: {
                  labels: label,
                  datasets: dataset,
  
              },
              plugins: [ChartDataLabels],
  
              options: {
                  skipNull: true,
                  maintainAspectRatio: false,
                  animation: {
                      onComplete: function () {
                          var sourceCanvas = myChart.canvas;
                          var copyWidth = myChart.scales['y'].width - 10;
                          var copyHeight = myChart.scales['y'].height + myChart.scales['y'].top + 10;
                          //var targetCtx = document.getElementById(&quot;axis-FuelSpend&quot;).getContext(&quot;2d&quot;);
                          //targetCtx.canvas.width = copyWidth;
                          //targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
                      }
                  },
  
                  scales: {
  
                      x: {
                          /*ticks:{
                                autoSkip:false,
                                maxRotation: 90,
                              minRotation: 90
                          },
                          gridLines: {
                             offsetGridLines: false
                         },       
                        stacked: true,*/
                      },
                      y: {
                          beginAtZero: true,
                          grid: {
                              display: false
                          }
                      },
  
                  },
                  plugins: {
                      datalabels: {
                          display: function (context) {
                              return context.dataset.data[context.dataIndex] &gt; 0;
                          },
                          color: 'black',
                          anchor: 'end',
                          align: 'top',
                          font: {
                              size: 10,
                          }
                      },
                      legend: {
                          display: true,
                          position: &quot;right&quot;,
                          fontSize: '8px',
                          boxWidth: 60,
                      },
                      layout: {
                          padding: {
                              right: 10
                          }
                      }
  
                  }
              }
          });
  
          myChart.render();
  
      }
  
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>