Color Bar
A color bar is used to indicate the ratio between things.
Props
Name | Type | Default | Description |
---|---|---|---|
widthPerColor required | Record<string, number> | An object where the keys are legal CSS color as per https://www.w3schools.com/cssref/css_colors_legal.asp and the values a percentage.
If the total is above 100 we normalize the value.
If the total is under 100 the visible portion of the color bar won't take the full width | |
className | IClassName | Additionnal CSS class to add on the color bar | |
height | string | "5px" | Height in px of the color bar |
tooltipPerColor | Record<string, ITooltipProps> | {} | An object where the keys are the colors of widthPerColor and the value are ITooltipProps |
Examples
Partially filled
Overflow
No guidelines exist for ColorBar yet.