how to manage gap for same categoryType in react-chart js 2

Question

import React from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
} from "chart.js";
import { Bar } from "react-chartjs-2";
import faker from "faker";

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  indexAxis: "y" as const,
  elements: {
    bar: {
      borderWidth: 2,
      categoryPercentage: 0.7,
      barPercentage: 0.3
    }
  },
  responsive: true,
  plugins: {
    legend: {
      position: "right" as const
    },
    title: {
      display: true,
      text: "Chart.js Horizontal Bar Chart"
    }
  }
};

const labels = ["January", "February", "March", "April", "May"];

export const data = {
  labels,
  datasets: [
    {
      label: "Selected Year Data 1",
      fill: false,
      lineTension: 0,
      backgroundColor: "#461e7d",
      categoryPercentage: 0.5,
      borderColor: "#461e7d",
      barPercentage: 0.5,
      barThickness: 18,
      // barPercentage: 0.3,

      maxBarThickness: 20,
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0,
      borderJoinStyle: "miter",
      pointBorderColor: "#461e7d",
      pointBackgroundColor: "#461e7d",
      pointBorderWidth: 1,
      pointHoverRadius: 4,
      pointHoverBackgroundColor: "#461e7d",
      pointHoverBorderColor: "#461e7d",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [32687022.53, 7929305.97, 2734602530.89, 4614988.73, null]
    },
    {
      label: "Selected Year Data 2",
      fill: false,
      lineTension: 0,
      backgroundColor: "#2cdac5",
      borderColor: "#2cdac5",
      barPercentage: 0.5,
      categoryPercentage: 0.5,
      barThickness: 18,
      maxBarThickness: 20,
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0,
      borderJoinStyle: "miter",
      pointBorderColor: "#2cdac5",
      pointBackgroundColor: "#2cdac5",
      pointBorderWidth: 1,
      pointHoverRadius: 4,
      pointHoverBackgroundColor: "#2cdac5",
      pointHoverBorderColor: "#2cdac5",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [null, null, null, 22442487.1, null]
    },
    {
      label: "Selected Year Data 3",
      fill: false,
      lineTension: 0,
      backgroundColor: "#9014fe",
      borderColor: "#9014fe",
      barPercentage: 0.5,
      categoryPercentage: 0.5,
      barThickness: 18,
      maxBarThickness: 20,
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0,
      borderJoinStyle: "miter",
      pointBorderColor: "#9014fe",
      pointBackgroundColor: "#9014fe",
      pointBorderWidth: 1,
      pointHoverRadius: 4,
      pointHoverBackgroundColor: "#9014fe",
      pointHoverBorderColor: "#9014fe",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [7200000, 7200000, 7200000, 7200000, 7200000]
    },
    {
      label: "Previous Year data 1",
      fill: false,
      lineTension: 0,
      backgroundColor: "#9078b1",
      borderColor: "#9078b1",
      barPercentage: 0.5,
      barThickness: 18,
      maxBarThickness: 20,
      borderCapStyle: "butt",
      borderDash: [],
      categoryPercentage: 0.5,
      borderDashOffset: 0,
      borderJoinStyle: "miter",
      pointBorderColor: "#9078b1",
      pointBackgroundColor: "#9078b1",
      pointBorderWidth: 1,
      pointHoverRadius: 4,
      pointHoverBackgroundColor: "#9078b1",
      pointHoverBorderColor: "#9078b1",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [39545719.69, 10591735.09, 3344486758.51, 11893704.95, 962249186.47]
    },
    {
      label: "Previous Year data 2",
      fill: false,
      lineTension: 0,
      backgroundColor: "#80e9dc",
      borderColor: "#80e9dc",
      barPercentage: 0.5,
      barThickness: 18,
      maxBarThickness: 20,
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0,
      categoryPercentage: 0.5,
      borderJoinStyle: "miter",
      pointBorderColor: "#80e9dc",
      pointBackgroundColor: "#80e9dc",
      pointBorderWidth: 1,
      pointHoverRadius: 4,
      pointHoverBackgroundColor: "#80e9dc",
      pointHoverBorderColor: "#80e9dc",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [null, null, null, 14991264.45, null]
    },
    {
      label: "Previous Year data 3",
      fill: false,
      lineTension: 0,
      backgroundColor: "#eeb0ff",
      borderColor: "#eeb0ff",
      barPercentage: 0.5,
      barThickness: 18,
      maxBarThickness: 20,
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0,
      borderJoinStyle: "miter",
      pointBorderColor: "#eeb0ff",
      pointBackgroundColor: "#eeb0ff",
      pointBorderWidth: 1,
      categoryPercentage: 0.5,
      pointHoverRadius: 4,
      pointHoverBackgroundColor: "#eeb0ff",
      pointHoverBorderColor: "#eeb0ff",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [2400000, 2400000, 2400000, 2400000, 2400000]
    }
  ]
};

export function App() {
  return <Bar options={options} data={data} />;
}

that my code block enter image description here

enter image description here it should be like this, here we have gap ... I have added two images plz checkout that, so that to get what I expext. I want gap for same category in axis, for different category the space is enough but for same cotegory they come next to each other. plz help

Answer 1

Found Answer finally barThickness property in dataSet can be used to produce gapping between same Category bars..... ofcourse this one for latest version ....old version barThikness was in sacles [x/y]Axes