Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for Different Bar Widths in a Single Bar Chart #606

Open
paanSinghCoder opened this issue May 28, 2024 · 0 comments
Open

Support for Different Bar Widths in a Single Bar Chart #606

paanSinghCoder opened this issue May 28, 2024 · 0 comments

Comments

@paanSinghCoder
Copy link

paanSinghCoder commented May 28, 2024

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant