Documentation

Bar Chart

A categorical bar graph for comparing values across labels.

Examples

403020100MonTueWedThuFriSatSun
import { BarChart } from 'kalki-design'

const data = [
  {
    "label": "Mon",
    "value": 24
  },
  {
    "label": "Tue",
    "value": 18
  },
  {
    "label": "Wed",
    "value": 32
  },
  {
    "label": "Thu",
    "value": 28
  },
  {
    "label": "Fri",
    "value": 40
  },
  {
    "label": "Sat",
    "value": 22
  },
  {
    "label": "Sun",
    "value": 16
  }
]

export default function Example() {
  return (
    <BarChart
      data={data}
      color="var(--chart-2)"
      accessibilityMode="default"
      showGrid={true}
      showYAxisLabels={true}
      showValueLabels={false}
    />
  )
}

Installation

npx kalki-design add bar-chart

Usage

import { BarChart } from 'kalki-design'

const data = [
  { label: 'Mon', value: 24 },
  { label: 'Tue', value: 18 },
  { label: 'Wed', value: 32 },
  { label: 'Thu', value: 28 },
  { label: 'Fri', value: 40 },
]

export default function Example() {
  return <BarChart data={data} color="var(--chart-2)" showValueLabels />
}

API Reference

NameTypeDefaultDescription
NamedataTypeChartDatum[]Default—DescriptionData points containing label and numeric value.
NameheightTypenumberDefault220DescriptionChart height in pixels.
NamecolorTypestringDefault'var(--chart-2)'DescriptionBar fill color.
NameaccessibilityModeType'default' | 'colorblind-safe'Default'default'DescriptionApplies pattern overlays and outlines for color-blind-safe readability.
NameshowGridTypebooleanDefaulttrueDescriptionShows horizontal grid lines.
NameshowYAxisLabelsTypebooleanDefaulttrueDescriptionShows Y-axis value labels.
NameshowValueLabelsTypebooleanDefaultfalseDescriptionShows values above bars.