Support for Different Bar Widths in a Single Bar Chart

[paanSinghCoder]

Description I am trying to create a bar chart with two series using ApexCharts in React, and I need the bars for each series to have different widths. However, it appears that the library does not natively support having different bar widths for individual series within the same chart.

Steps to Reproduce Create a bar chart with two series. Attempt to apply different widths to the bars of each series.

Expected Behaviour The library should allow setting different bar widths for each series within a single bar chart, either through options or custom CSS classes.

Actual Behavior All bars have the same width, and there is no clear way to set different widths for each series.

Example Code

import ReactApexChart from 'react-apexcharts';
const series = [
  {
    name: 'Left bar',
    data: [10, 20, 30],
  },
  {
    name: 'Right Bar',
    data: [15, 25, 35],
  },
];

const options = {
  chart: {
    type: 'bar',
  },
  plotOptions: {
    bar: {
      columnWidth: '50%',
    },
  },
  series,
};

<ReactApexChart options={options} series={series} type="bar" height={350} />

Workarounds Attempted Using CSS transformations (scaleX) to adjust widths post-render. Overlaying two charts with absolute positioning (caused alignment issues). Neither workaround provided a satisfactory solution.

Request Please provide support for setting different bar widths for individual series within a single bar chart. This feature would greatly enhance the flexibility and usability of the library for complex visualizations.

Thank you!

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.