How to change the width of the bar in bar chart?

[ParthS007]

Hello @tannerlinsley

Thanks for the amazing library.

I am implementing the bar chart and I am stuck with the following thing:

Sometimes, the width of the bar is too much, it looks like the graph is broken as it overlaps with the axes. What approach should I follow to keep the bar width in control according to data?

Here is the data sample and how the graph looks like. I have added the code sandbox also.

I am using useMemo as mentioned in the docs, the below one is just sample data.

const dataOne = [
    {
      label: Translate.string('Events'),
      data: [[2018, 3], [2019, 2], [2020, 1]],
    },
  ];

Let me know if I have to provide any other information.

[bvelasquez]

@ParthS007 Did you find a solution for this?

[bvelasquez]

81

[ParthS007]

Hi @bvelasquez

After diving deep in the library, I think that there is a bug in calculating CSS transforms for rect elements for the bar. I was not able to found a full-proof way of solving this but I came up with a workaround (adding null values in the start and end of the data) which is working well for my use case and may help someone else to solve their problem so thought of adding the workaround as a StackOverflow answer.

Here's the answer: https://stackoverflow.com/a/61218420/7994074

I have also made a codesandbox as a working preview:

I hope it helps. :)

[kirill-konshin]

@ParthS007 good job with the sandbox! Independently I came up with exact same solution, glad to see I'm not alone here.

[RahmanMonjur]

Did you try to use the X-axis type as ordinal?

[tannerlinsley]

Due to a massive overhaul and rewrite of React Charts to TypeScript and a massively upgraded public API, this issue is being bulk closed for triage. The latest version can be tested via the react-charts@beta tag. Documentation is in the process of being upgraded, but thankfully, everything is fully typed now, so you can explore the API that way for now.

If, after testing or playing with the v3 beta, you believe your issue is still not addressed or relevant, feel free to open a new issue.