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
const Demo = () => (
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
);
12
export default Demo;

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


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

No guidelines exist for ColorBar yet.

Create guidelines