How do I create a stacked horizontal bar chart with Chart.js in React?-CodePudding

I'm really struggling to find a clear answer to this question - especially in React. I'd like to create a stacked horizontal bar chart component for my React application. This is the type of chart I'm trying to create: https://codepen.io/pen. The code pasted below is what I've tried to use so far but it isn't rendering currently.

import React, { Component } from 'react';
import Chart from 'chart.js/auto';

export default class LineChart extends Component {
  chartRef = React.createRef();

  componentDidMount() {
    const ctx = this.chartRef.current.getContext('2d');

    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [
          'Sunday',
          'Monday',
          'Tuesday',
          'Wednesday',
          'Thursday',
          'Friday',
          'Saturday',
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              stacked: true,
            },
          ],
        },
      },

      datasets: [
        {
          data: [86, 114, 106, 106, 107, 111, 133],
          label: 'Total',
          borderColor: '#3e95cd',
          backgroundColor: '#7bb6dd',
          // fill: False,
        },
        {
          data: [70, 90, 44, 60, 83, 90, 100],
          label: 'Accepted',
          borderColor: '#3cba9f',
          backgroundColor: '#71d1bd',
          // fill: False,
        },
        {
          data: [10, 21, 60, 44, 17, 21, 17],
          label: 'Pending',
          borderColor: '#ffa500',
          backgroundColor: '#ffc04d',
          // fill: False,
        },
        {
          data: [6, 3, 2, 2, 7, 0, 16],
          label: 'Rejected',
          borderColor: '#c45850',
          backgroundColor: '#d78f89',
          // fill: False,
        },
      ],
    });
  }
  render() {
    return (
      <div>
        <canvas id="myChart" ref={this.chartRef} />
      </div>
    );
  }
}

CodePudding user response：

You are using V2 syntax of Chart.js while using V3. V3 has major breaking changis inclusing all scales are their own object. For all changes please read the migration guide.

When using objects for scales you get what you want:

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: 'pink'
      }
    ]
  },
  options: {
    scales: {
      y: {
        stacked: true
      },
      x: {
        stacked: true
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>