Do you want to request a feature or report a bug?
This is a rendering bug
What is the current behaviour?
When rendering a lot of really small slices weird artefacts are drawn
What is the expected behaviour?
No artefacts, maybe provide an option to ignore/hide super small slice (below a ceiling % value)
Steps to Reproduce the Problem
<ReactPieChart data={ [{"value":2421,"title":"a","color":"rgb(33, 150, 243)"},{"value":2413,"title":"a","color":"rgb(34, 150, 243)"},{"value":2403,"title":"a","color":"rgb(34, 151, 243)"},{"value":2399,"title":"a","color":"rgb(34, 151, 243)"},{"value":2395,"title":"a","color":"rgb(35, 151, 243)"},{"value":2387,"title":"a","color":"rgb(35, 151, 243)"},{"value":2383,"title":"a","color":"rgb(35, 151, 243)"},{"value":2380,"title":"a","color":"rgb(36, 151, 243)"},{"value":2373,"title":"a","color":"rgb(36, 151, 243)"},{"value":2373,"title":"a","color":"rgb(36, 151, 243)"},{"value":2360,"title":"a","color":"rgb(37, 152, 243)"},{"value":2359,"title":"a","color":"rgb(37, 152, 243)"},{"value":2354,"title":"a","color":"rgb(37, 152, 243)"},{"value":2349,"title":"a","color":"rgb(38, 152, 243)"},{"value":2345,"title":"a","color":"rgb(38, 152, 243)"},{"value":2312,"title":"a","color":"rgb(40, 153, 243)"},{"value":136,"title":"a","color":"rgb(178, 218, 251)"},{"value":136,"title":"a","color":"rgb(178, 218, 251)"},{"value":103,"title":"a","color":"rgb(181, 219, 251)"},{"value":101,"title":"a","color":"rgb(181, 219, 251)"},{"value":101,"title":"a","color":"rgb(181, 219, 251)"},{"value":101,"title":"a","color":"rgb(181, 219, 251)"},{"value":34,"title":"a","color":"rgb(185, 221, 251)"},{"value":34,"title":"a","color":"rgb(185, 221, 251)"},{"value":34,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":32,"title":"a","color":"rgb(185, 221, 251)"},{"value":32,"title":"a","color":"rgb(185, 221, 251)"},{"value":8,"title":"a","color":"rgb(187, 222, 251)"},{"value":7,"title":"a","color":"rgb(187, 222, 251)"},{"value":7,"title":"a","color":"rgb(187, 222, 251)"},{"value":5,"title":"a","color":"rgb(187, 222, 251)"},{"value":4,"title":"a","color":"rgb(187, 222, 251)"},{"value":2,"title":"a","color":"rgb(187, 222, 251)"},{"value":2,"title":"a","color":"rgb(187, 222, 251)"},{"value":2,"title":"a","color":"rgb(187, 222, 251)"},{"value":2,"title":"a","color":"rgb(187, 222, 251)"},{"value":2,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"}] } />
Suggested fix
Rounding the percent seems to be fixing the issue.
Line 266
const valueInPercentage = total === 0 ? 0 : ( dataEntry.value / total * 100 ).toFixed();
Specifications
- Version: 6.0.1 (latest available
- Platform: OSX Mojave, Chrome (80.0.3987.132)