[Chartjs]-Stacked bar chart with chartjs with included values

by

3👍

✅

You could define two datasets, the first one would contain the values of new visitors, the second one the values of all visitors.

Then you would define the x-axis as being stacked:

options: {
  scales: {
    xAxes: [{
      stacked: true
    }],

Please take a look at below runnable code snippet to see how it works:

const baseData = [[20,15], [25,10], [30, 15]];

new Chart('chart', {
  type: 'bar',
  data: {
    labels: ['25.10.2020', '26.10.2020', '27.10.2020'],
    datasets: [{
      label: 'Number of new visitors',
      data: baseData.map(v => v[1]),
      backgroundColor: 'green'
    },
    {
      label: 'Number of visitors',
      data: baseData.map(v => v[0]), 
      backgroundColor: 'blue'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="100"></canvas>

Leave a comment