Bars sizes are rounded and don't take the whole chart area
See original GitHub issueBars lines in Bar
chart do not cover all area of a chart (SVG element). Their sizes are rounded. That’s why we can see gaps on the left and right. This screenshot shows this issue comparing Histograms with Timeline
Screenshots
To reproduce this you can use for example width=200
and 92 child items
Expected behavior
Bars should take all space from left to right. The dimensions are integers <g transform="translate(8, 20)">
. But float numbers are expected
Desktop (please complete the following information):
- OS: Windows 10
- Browser Firefox
- Version 0.61.1
Issue Analytics
- State:
- Created 4 years ago
- Comments:10
Top Results From Across the Web
The dangers of rounded bar charts. - Data School
Proportionality. The other main issue of rounding your bars is it misrepresents the proportions of each value. Consider the sales of Jon and...
Read more >How to Create Rounded Bar Charts - YouTube
In this example, I take a standard bar chart and show you how to round off the edges. Download the workbook on my...
Read more >How to Create Rounded Bars in Tableau - InterWorks
I will walk you through both of them. First, we have to build the bar chart. We are going to use the Global...
Read more >Change the shape fill, outline, or effects of chart elements
You can instantly change the look of chart elements (such as the chart area, the plot area, data markers, titles in charts, gridlines,...
Read more >Using bar charts - Amazon QuickSight - AWS Documentation
Bar charts show up to 2,500 data points on the axis for visuals that don't use group or color. For visuals that do...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This was added in #1282. You can use
indexScale={{ type: 'band', round: false }}
. This will be available in the next version.My example https://codesandbox.io/s/nivo-bar-chart-ki9h7