title: ChartJs how can I move bar into new group?
body: <p>this one has been annoying me for too long now, ha.</p>
  <p>So I just want to manually control the group bars, the blue one below should be under Checkout 2.</p>
  <p>Any help much appreciated.</p>
  <pre><code>var data = [
          {
              label: &quot;Android&quot;,
              type: &quot;bar&quot;,
              stack: &quot;One&quot;,
              backgroundColor: &quot;#F6AC74&quot;,
              data: [4]
          },
          {
              label: &quot;iOS&quot;,
              type: &quot;bar&quot;,
              stack: &quot;One&quot;,
              backgroundColor: &quot;#9FA0EF&quot;,
              data: [6]
          },
          {
              label: &quot;Web&quot;,
              type: &quot;bar&quot;,
              stack: &quot;One&quot;,
              backgroundColor: &quot;#F495C6&quot;,
              data: [14]
          },
          {
              label: &quot;Apple Pay&quot;,
              type: &quot;bar&quot;,
              stack: &quot;Two&quot;,
              backgroundColor: &quot;#AEE9DD&quot;,
              data: [6]
          },
          {
              label: &quot;Google Pay&quot;,
              type: &quot;bar&quot;,
              stack: &quot;Two&quot;,
              backgroundColor: &quot;#D3F284&quot;,
              data: [14]
          }
          ,
          {
              label: &quot;Cash&quot;,
              type: &quot;bar&quot;,
              stack: &quot;Three&quot;,
              backgroundColor: &quot;#65C2F8&quot;,
              data: [4]
          }
      ];
  
      $scope.AdvancedMethodStackedBarChart = new Chart(document.getElementById(&quot;advPaymentMethodChart&quot;), {
          type: 'bar',
          data: {
              labels: [&quot;Checkout 1&quot;, &quot;Checkout 2&quot;],
              datasets: data
          },
          options: {
              legend: { display: false },
              scales: {
                  xAxes: [{
                    stacked: true,
                    ticks: {
                      beginAtZero: true,
                      maxRotation: 0,
                      minRotation: 0
                    }
                  }],
                  yAxes: [{
                    stacked: true,
                  }]
                },
              title: {
                  display: false,
              }
          }
      });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/EbHio.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EbHio.png" alt="Move bar into next group?" /></a></p>
  <p>It's saying my comment is mostly code but theres not exactly much more I need to say, I mean I've drawn a picture, how much more detail does this thing want?</p>