Feedback

Color Bar

A color bar is used to indicate the ratio between things.
View source
1
import {ColorBar} from '@coveord/plasma-react';
2


3
export default () => (
4
    <ColorBar
5
        widthPerColor={{'#1372ec': 30, '#ffe300': 15, '#f05245': 10, '#1cebcf': 25, '#7d458f': 20}}
6
        tooltipPerColor={{
7
            '#1372ec': {title: 'blue', placement: 'top'},
8
            '#ffe300': {title: 'yellow', placement: 'top'},
9
        }}
10
    />
11
);

Props

NameTypeDefaultDescription
widthPerColorrequiredRecord<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
classNameIClassName
Additionnal CSS class to add on the color bar
heightstring"5px"
Height in px of the color bar
tooltipPerColorRecord<string, ITooltipProps>{}
An object where the keys are the colors of widthPerColor and the value are ITooltipProps

Examples

Partially filled
1
import {ColorBar} from '@coveord/plasma-react';
2


3
export default () => (
4
    <ColorBar widthPerColor={{'#1372ec': 20, '#ffe300': 5, '#f05245': 10, '#1cebcf': 5, '#7d458f': 20}} />
5
);
Overflow
1
import {ColorBar} from '@coveord/plasma-react';
2


3
export default () => (
4
    <ColorBar widthPerColor={{'#1372ec': 200, '#ffe300': 50, '#f05245': 300, '#1cebcf': 25, '#7d458f': 1000}} />
5
);

No guidelines exist for ColorBar yet.

Create guidelines