score:2

Accepted answer

to have the additional labels aligned with the stack group bars, you can define the option categorypercentage: 1 on each dataset.

for further information, consult the chapters dataset configuration and barpercentage vs categorypercentage of the chart.js bar documentation.

further you'll have to define several x-axes as shown in your amended code below.

new chart('c', {
  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",
        categorypercentage: 1
      },
      {
        label: 'repeating visitors england',
        data: [20, 6],
        stack: "repeat-visitors",
        backgroundcolor: "#e75177",
        categorypercentage: 1
      },
      {
        label: 'first time visitor sweden',
        data: [7, 0],
        stack: "first-time-visitors",
        backgroundcolor: "#924565",
        categorypercentage: 1
      },
      {
        label: 'repeating visitors sweden',
        data: [9, 16],
        stack: "repeat-visitors",
        backgroundcolor: "#2979a7",
        categorypercentage: 1
      }
    ]
  },
  options: {
    tooltips: {
      mode: 'x'
    },
    scales: {
      xaxes: [{
          ticks: {
            display: false
          }
        },
        {
          type: 'category',
          offset: true,
          labels: ['first-time-visitors', 'repeat-visitors', 'first-time-visitors', 'repeat-visitors'],
          gridlines: {
            display: false
          }
        },
        {
          offset: true,
          gridlines: {
            display: false
          }
        }
      ],
      yaxes: [{
        ticks: {
          beginatzero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.min.js"></script>
<canvas id="c" width="400" height="200"></canvas>


Related Query

More Query from same tag