Igloo branding

StackedBar

A stacked bar is a representation of data that uses rectangular bars to show the relative proportions of different categories.

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

PropTypeDescription
classNamestringAdd a class name to the stacked bar
popoverClassNamestringAdd a class name to the popover
popoverTitleReactNodeAdd a title to the popover
dataSetDataSet[]All the data needed to build the stacked bar. If empty, leave blank
dataTeststringAdd a data-test tag for automated tests
formatValue(value: number) => stringA function to format the value in the tooltip (Default: adds %)
noDataMessagestringMessage to display when there is no data
showValuebooleanShow the values on the bar
size"small" | "medium"Adjusts the height of the bar
valueRangeValueRangeThe range that the domain of the value should be based on

StackedBarTooltip

PropTypeDescription
titleReactNodeAdd a title to the tooltip
dataSetDataSet[]All the data needed to build the stacked bar
formatValue(value: number) => stringA function to format the value in the tooltip (Default: adds %)
hasDatabooleanWhether or not the bar has data
noDataMessagestringMessage to display in the tooltip when there is no data