title: ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
body: <p>I have a chart.js grouped bar chart (grouped by the stack id), what I want to do, is <strong>add another x-axis</strong>, which will show the <strong>stack id</strong>, the closest I got was doubling the labels, so <code>[&quot;1.1.2021&quot;, &quot;2.1.2021&quot;]</code> was changed to <code>[&quot;1.1.2021&quot;, &quot;1.1.2021&quot;, &quot;2.1.2021&quot;, &quot;2.1.2021&quot;]</code> - this didnt work well, the x-axis didnt align properly and the visuals were off.</p>
  <p>Here is what I currently have:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ctx = $("#c");
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["1.1.2021", "2.1.2021"],
      datasets: [{
        label: 'First Time Visitor England',
        data: [10, 3],
        stack: "first-time-visitors",
        backgroundColor: "#f5a0a7",
      },
      {
        label: 'Repeating Visitors England',
        data: [20, 6],
        stack: "repeat-visitors",
        backgroundColor: "#e75177",
      },
      {
        label: 'First Time Visitor Sweden',
        data: [7, 0],
        stack: "first-time-visitors",
        backgroundColor: "#924565",
      },
      {
        label: 'Repeating Visitors Sweden',
        data: [9, 16],
        stack: "repeat-visitors",
        backgroundColor: "#2979a7",
      }]
    },
    options:{
      scales:{
        xAxes:[
          {
            stacked: true,
            id:'xAxis1',
            type:"category",
            ticks:{
              callback:function(label){
                var month = label.split(";")[0];
                var year = label.split(";")[1];
                return month;
              }
            }
          }],
        yAxes:[{
          ticks:{
            beginAtZero:true
          }
        }]
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;canvas id="c" width="400" height="300"&gt;&lt;/canvas&gt;
  &lt;script src="https://code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>and I want to have another x-axis, above the date axis, which will show the stack id, so two ticks above 1.1.2021 - first is labeled <code>first-time-visitors</code>, and the second <code>repeat-visitors</code> (this will also repeat for the 1.2.2021).</p>
  <p>Is this possible?</p>