score:1

Accepted answer

the x and y axis are no arrays anymore in v3, all scales are an object and you define the place with the position argument, also you dont specify the id in the object but the object key is the id

example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.2.0/chart.js"></script>
<canvas id="mychart" width="400" height="400"></canvas>

<script>
  var ctx = document.getelementbyid("mychart").getcontext("2d");
  var mychart = new chart(ctx, {

    data: {
      labels: ["person 1", "person 2", "person 3", "person 4", "person 5", "person 6", ],
      datasets: [{
          type: "line",
          label: "earnings",
          xaxisid: "a1",
          data: [10000, 20000, 30000, 5000]
        },

        {
          label: "cat 1",
          xaxisid: "b1",
          type: "bar",
          backgroundcolor: ["rgba(255,59,59, 0.2)"],
          bordercolor: ["rgba(255,59,59, 1)"],
          borderwidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "cat 2",
          xaxisid: "b1",
          type: "bar",
          backgroundcolor: ["rgba(241,85,54, 0.2)"],
          bordercolor: ["rgba(241,85,54, 1)"],
          borderwidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "cat 3",
          xaxisid: "b1",
          type: "bar",
          backgroundcolor: ["rgba(235,106,55, 0.2)"],
          bordercolor: ["rgba(235,106,55, 1)"],
          borderwidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "cat 4",
          xaxisid: "b1",
          type: "bar",
          backgroundcolor: ["rgba(227,131,53, 0.2)"],
          bordercolor: ["rgba(227,131,53, 1)"],
          borderwidth: 1,
          data: [0, 0, 32.012777777778, 0, 0, 29.378611111111, ]
        },

        {
          label: "cat 5",
          xaxisid: "b1",
          type: "bar",
          backgroundcolor: ["rgba(221,171,54, 0.2)"],
          bordercolor: ["rgba(221,171,54, 1)"],
          borderwidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "cat 6",
          xaxisid: "b1",
          type: "bar",
          backgroundcolor: ["rgba(218,199,52, 0.2)"],
          bordercolor: ["rgba(218,199,52, 1)"],
          borderwidth: 1,
          data: [0, 44.195555555556, 0, 0, 38.79, 0, ]
        },

        {
          label: "cat 7",
          xaxisid: "b1",
          type: "bar",
          backgroundcolor: ["rgba(192,224,66, 0.2)"],
          bordercolor: ["rgba(192,224,66, 1)"],
          borderwidth: 1,
          data: [0, 0, 0, 14.921666666667, 0, 0, ]
        },

        {
          label: "cat 8",
          xaxisid: "b1",
          type: "bar",
          backgroundcolor: ["rgba(124,236,93, 0.2)"],
          bordercolor: ["rgba(124,236,93, 1)"],
          borderwidth: 1,
          data: [40.216666666667, 0, 0, 0, 0, 0, ]
        },



      ]
    },
    options: {
      responsive: true,
      maintainaspectratio: false,
      indexaxis: "y",
      scales: {
        a1:

        {
          display: true,
          position: "top",
          type: "linear",
          title: {
            text: "cost",
            display: true,
          },
          beginatzero: true,
          id: "a1",


        },
        b1: {
          id: "b1",
          position: "bottom",
          title: {
            text: "hours",
            display: false,
          },
          beginatzero: true

        },

        y: {
          display: true,
          stacked: true,
        }
      }
    }
  });
</script>

fiddle: https://jsfiddle.net/leelenaleee/7agx5hkr/1/


Related Query

More Query from same tag