Distribution
This component can be used to visualize the distribution of a given value. It is often used inside the Box
component, but can be used elsewhere too.
Usage
Demonstration
Props
colors
TYPE | DEFAULT VALUE |
---|---|
| Set of colors from the theme |
The different colors used to represent the items. If there are more items than colors, it will rotate.
showLegend
TYPE | DEFAULT VALUE |
---|---|
|
|
Set to false
to display the bar only.
heading
TYPE | DEFAULT VALUE |
---|---|
| None |
An optional heading.
itemTitle({ item, percentage, index })
TYPE | DEFAULT VALUE |
---|---|
| None |
This function gets called to generate the title attribute for each item.
renderLegendItem({ color, index, item, percentage })
TYPE | DEFAULT VALUE |
---|---|
| None |
This function gets called to render individual items in the legend. You can also pass a React component.
renderFullLegendItem({ bullet, color, index, item, percentage })
TYPE | DEFAULT VALUE |
---|---|
| None |
This function gets called to render the full line of individual items in the legend. You can also pass a React component.
items
TYPE | DEFAULT VALUE |
---|---|
| None (required) |
The items represented in the distribution. Every item in the array must be an object composed of two entries: item
, which can be any type of value, and percentage
, which has to be a Number
.
Note: the total of the percentages for all the items doesn’t have to be 100
. The bar will get displayed properly with any total, which can be useful in certain cases.
Last updated