StackedBar
A stacked bar is a representation of data that uses rectangular bars to show the relative proportions of different categories.
Version 0.5.0
Installation
To install @igloo-ui/stacked-bar
in your project, you will need to run the following command using npm:
npm install @igloo-ui/stacked-bar
If you prefer Yarn, use the following command instead:
yarn add @igloo-ui/stacked-bar
Usage
Then to use the component in your code just import it!
import StackedBar from '@igloo-ui/stacked-bar';
<StackedBar
dataSet={[
{
key: 'stronglyUnfavorable',
label: 'Strongly Unfavorable',
value: 30,
strength: -2,
},
{
key: 'unfavorable',
label: 'Unfavorable',
value: 10,
strength: -1,
},
{
key: 'neutral',
label: 'Neutral',
value: 20,
strength: 0,
},
{
key: 'favorable',
label: 'Favorable',
value: 15,
strength: 1,
},
{
key: 'stronglyFavorable',
label: 'Strongly Favorable',
value: 25,
strength: 2,
},
]}
showValue
/>;
API
StackedBar
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | Add a class name to the stacked bar |
popoverClassName | string | - | Add a class name to the popover |
popoverTitle | ReactNode | - | Add a title to the popover |
dataSet | DataSet[] | - | All the data needed to build the stacked bar. If empty, leave blank |
dataTest | string | - | Add a data-test tag for automated tests |
formatValue | (value: number) => string | A function to format the value in the tooltip (Default: adds %) | |
noDataMessage | string | - | Message to display when there is no data |
showValue | boolean | Show the values on the bar | |
size | "small" | "medium" | Adjusts the height of the bar | |
valueRange | ValueRange | The range that the domain of the value should be based on |
StackedBarTooltip
Prop | Type | Default | Description |
---|---|---|---|
title | ReactNode | - | Add a title to the tooltip |
dataSet | DataSet[] | - | All the data needed to build the stacked bar |
formatValue | (value: number) => string | - | A function to format the value in the tooltip (Default: adds %) |
hasData | boolean | - | Whether or not the bar has data |
noDataMessage | string | - | Message to display in the tooltip when there is no data |