Stacked Bar Chart

A segmented bar graph to show part-to-whole composition inside each category.

Examples

Dataset

State

Show Legend

State

Show Totals

State

Show Grid

Accessibility Mode

Damage

Warranty

Missing Items

import { StackedBarChart } from 'kalki-design'

const data = [
  {
    "label": "Claims Requested",
    "segments": [
      {
        "label": "Damage",
        "value": 3,
        "color": "var(--chart-1)"
      },
      {
        "label": "Warranty",
        "value": 4,
        "color": "var(--chart-2)"
      },
      {
        "label": "Missing Items",
        "value": 6,
        "color": "var(--chart-3)"
      }
    ]
  },
  {
    "label": "Claims Approved",
    "segments": [
      {
        "label": "Damage",
        "value": 2,
        "color": "var(--chart-1)"
      },
      {
        "label": "Warranty",
        "value": 3,
        "color": "var(--chart-2)"
      },
      {
        "label": "Missing Items",
        "value": 4,
        "color": "var(--chart-3)"
      }
    ]
  },
  {
    "label": "Claims Closed",
    "segments": [
      {
        "label": "Damage",
        "value": 1,
        "color": "var(--chart-1)"
      },
      {
        "label": "Warranty",
        "value": 2,
        "color": "var(--chart-2)"
      },
      {
        "label": "Missing Items",
        "value": 3,
        "color": "var(--chart-3)"
      }
    ]
  }
]

export default function Example() {
  return (
    <StackedBarChart
      data={data}
      showLegend={true}
      showTotals={true}
      showGrid={true}
      accessibilityMode="default"
    />
  )
}

Installation

npx kalki-design add stacked-bar-chart

Usage

import { StackedBarChart } from 'kalki-design'

const data = [
  {
    label: 'Claims Requested',
    segments: [
      { label: 'Damage', value: 3, color: 'var(--chart-1)' },
      { label: 'Warranty', value: 4, color: 'var(--chart-2)' },
      { label: 'Missing Items', value: 6, color: 'var(--chart-3)' },
    ],
  },
]

export default function Example() {
  return (
    <StackedBarChart
      data={data}
      showLegend
      showTotals
      accessibilityMode="colorblind-safe"
    />
  )
}

API Reference

Name	Type	Default	Description
Name`data`	Type`StackedChartDatum[]`	Default`—`	DescriptionArray of bars; each bar has multiple labeled segments.
Name`height`	Type`number`	Default`240`	DescriptionChart height in pixels.
Name`showLegend`	Type`boolean`	Default`true`	DescriptionShows segment legend below chart.
Name`showTotals`	Type`boolean`	Default`false`	DescriptionShows total value above each stacked bar.
Name`showGrid`	Type`boolean`	Default`true`	DescriptionShows horizontal grid lines.
Name`accessibilityMode`	Type`'default' \| 'colorblind-safe'`	Default`'default'`	DescriptionApplies patterns and outlines for color-blind-safe reading.