[Chartjs]-ChartJS 3.8.0 Stacked Bar Combined Labels

by

4👍

✅

You need to add mode: 'index' to the tooltip configuration to achieve that behaviour:

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  datasets: [{
      label: 'Retained',
      data: [62, 68, 74, 80, 66, 84],
      backgroundColor: 'rgb(0, 178, 169)',
      order: 3,
      stack: 'stack1'
    },
    {
      label: 'Expired',
      data: [5, 3, 7, 9, 2, 4],
      backgroundColor: 'rgb(207, 16, 45)',
      order: 3,
      stack: 'stack1'
    }
  ]
}

const config = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      tooltip: {
        mode: 'index'
      }
    },
    scales: {
      x: {
        stacked: true
      },
      y: {
        stacked: true
      }
    }
  },
};

const reportOutput = new Chart(
  document.getElementById('chart_display'),
  config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>
<html>

<head></head>

<body>
  <h1>
    Stacked Bar Chart (chart.js)
  </h1>
  <canvas id="chart_display"></canvas>
</body>

</html>

Leave a comment