ChartJS bar graph to show different width for different graph

Question

I have created a Marimekko chart using chartjs and react , but i have a problem in assigning different width for each stack bar . I tried barPercentage,categoryPercentage but nothing works . below is my chart , as seen every bar has same width , i want to change it to have 40% width for the first stackbar which is <7.5Oz. , 20% for the second which is 7.5 - 12.5 Oz., 10% for the third 12.5 - 17.5 Oz. , 30% for the fourth which is 17.5 + Oz.. Chart

but whatever i try it is just showing the same width for all the bars

MariMekko

above is currently my graph , and below is my code .

Marimekko/index.js

import React from "react";
import { Bar } from "react-chartjs-2";
import "chartjs-plugin-datalabels";

function MerimekkoChart() {
  const data = {
    labels: ["<7.5 Oz.", "7.5-12.5 Oz.", "12.5-17.5 Oz.", "17.5+ Oz."],
    datasets: [
      {
        label: "<$3.5",
        data: [35, 49, 17, 0],
        backgroundColor: "rgba(54, 162, 235, 0.7)",
        stack: "stack1",
        barPercentage: 1.09,
        categoryPercentage: 0.9,
      },
      {
        label: "$3.5-$4.5",
        data: [34, 47, 69, 66],
        backgroundColor: "rgba(75, 192, 192, 0.7)",
        stack: "stack1",
        barPercentage: 1.09,
        categoryPercentage: 0.9,
      },
      {
        label: "$4.5+",
        data: [31, 4, 14, 34],
        backgroundColor: "rgba(255, 99, 132, 0.7)",
        stack: "stack1",
        barPercentage: 1.09,
        categoryPercentage: 0.9,
      },
    ],
  };

  const options = {
    plugins: {
      datalabels: {
        anchor: "center",
        align: "center",
        font: {
          weight: "bold",
        },
        formatter: (value) => (value !== 0 ? value : ""),
        color: "#000", // Set the color for the data labels
      },
    },
    legend: {
      display: true,
    },
    tooltips: {
      enabled: true,
    },
    scales: {
      xAxes: [
        {
          stacked: true,
          categoryPercentage: 1,
          barPercentage: 0.7,
        },
      ],
      yAxes: [
        {
          display: false,
          stacked: true,
        },
      ],
    },
  };

  return <Bar data={data} options={options} />;
}

export default MerimekkoChart;`

and below is code for component index.js

// @mui material components
import Grid from "@mui/material/Grid";
import MDBox from "components/MDBox";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import Merimekko from "examples/Cards/Mermekko";
import stack2BarChartData from "layouts/StackedChart2Menu/data/Stack2BarChartData";
import OrdersOverview from "layouts/dashboard/components/OrdersOverview";
import MDTypography from "../../components/MDTypography";

function StackedChart2Menu() {
  return (
    <DashboardLayout>
      <DashboardNavbar />
      <MDBox py={5}>
        <MDBox>
          <MDBox
            mx={2}
            mt={-3}
            py={3}
            px={2}
            variant="gradient"
            bgColor="info"
            borderRadius="lg"
            coloredShadow="info"
          >
            <MDTypography variant="h6" color="white">
              Distribution
            </MDTypography>
          </MDBox>
          <Grid container spacing={3}>
            <Grid
              item
              xs={12}
              md={6}
              lg={8}
              style={{
                backgroundColor: "white",
                borderRadius: "20px",
                marginTop: "15px",
                WebkitBoxShadow:
                  "0rem 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0rem 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06)",
                marginLeft: "36px",
                marginRight: "20px",
              }}
            >
              <Merimekko color="info" />
            </Grid>
            <Grid
              item
              xs={1}
              md={1}
              lg={3.6}
              style={{ width: "20px", marginLeft: "-30px", marginTop: "-10px" }}
            >
              <OrdersOverview />
            </Grid>
          </Grid>
        </MDBox>
      </MDBox>
    </DashboardLayout>
  );
}

export default StackedChart2Menu;`

Above is my code that i used to get , the expectation here is to get different width for different stack bars , and to make it look like below Expected graph

it should have value% inside the stack, some value should be written on top of each stack and different width needs to be assigned to each of stack bars

ChartJS bar graph to show different width for different graph

0 Answers0