Question: BarChart left margin

See original GitHub issue

I’m trying to have my BarChart(s) centered inside a Responsive Container, but they keep leaving a lot of space to the left of the YAxis.

I have tried forcing css margins, to no avail, and I haven’t even been able to locate a single rule that makes this margin larger than it should, or weird paddings on rechart-surface … What can I do about it?

Click for an imgur image of the issue

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:30
  • Comments:12 (1 by maintainers)

github_iconTop GitHub Comments

96reactions
codenameyaucommented, Nov 28, 2017

The default width for YAxis is 60, so I solved it by setting it to 40. You can also dynamically set the width to avoid clipping.

<YAxis width={40} />
18reactions
myyellowshoecommented, Oct 21, 2020

Still getting the extra left padding in v1.8.5. Setting the width on the YAxis mentioned by @codenameyau does the trick. Though would prefer something a little more dynamic.

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - chart js 3.9.1 - barchart - margin left - Stack Overflow
The issue sounds being related to categoryPercentage and barPercentage options that you are set in the axis but this is not the right...
Read more >
Align left-edge of bars in bar chart to x-values rather than ...
How can I align the left side of the bars with the x-value they're "assigned" to? In my bar chart the first bar...
Read more >
Bar Chart (Results) - Qualtrics
Change the order the values appear in the visualization by clicking to the left of a value and dragging it to its desired...
Read more >
A Complete Guide to Bar Charts | Tutorial by Chartio
A bar chart (aka bar graph, column chart) plots numeric values for levels of a ... The rainbow colors on the left don't...
Read more >
hw does one left-justify the text in an Excel horizontal bar chart ...
Microsoft Q&A is the best place to get answers to all your technical questions on Microsoft products and services. Community. Forum.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found