0

Needed output:enter image description here I need to configure a grouped bar chart in which the type of each bar is shown in the axis itself. I am using chartjs 2.9. How can I add the text "Availability","Co-funded","CPC" in the axis itself. I can't find any configuration which support this implementation in Chart js . Is there any other JS library where this is possible

 this.barChart = new .Chart(ctx, {
            type: "bar",
            data: {
              labels: this.barChartData["chart-data"].map((obj) => obj.y),
              datasets:
                this.barChartData["chart-mapping"].map((obj) => {
                  return {
                    label: obj.label,
                    data: this.barChartData["chart-data"],
                    backgroundColor: obj.color,
                    parsing: {
                      xAxisKey: obj.key,
                    },
                  };
                }),
            },
            options: {
              datasets: {
                barThickness: 20,
              },
              indexAxis: "y",
              plugins: {
                legend: { position: "right", align: "start", title: "Type" },
            },
            },
          });
barChartData = {
      "chart-mapping": [
        {
          key: "avi",
          label: "Availability..",
          color: "rgba(50, 144, 237, 1)",
        },
        {
          key: "cfd",
          label: "Co-funded..",
          color: "rgba(119, 181, 242, 1)",
        },
        {
          key: "CPC",
          label: "CPC",
          color: "rgba(157, 83, 242, 1)",
        },
        {
          key: "od",
          label: "Order Drop..",
          color: "rgba(195, 152, 245, 1)",
        },
      ],
      "chart-data": [
        {
          y: "Name1",
          avi: 32,
          cfd: 32,
          CPC: 57,
          od: 12,
        },
        {
          y: "AK",
          avi: 15,
          cfd: 23,
          CPC: 42,
          od: 45,
        },
        {
          y: "Name3",
          avi: 67,
          cfd: 34,
          CPC: 21,
          od: 43,
        },
      ],
    };

Current implementation:

enter image description here

Anandu S
  • 159
  • 8

0 Answers0