BarChart

BarChart compares one numeric value across named categories. It supports one series and uses vertical bars.

Requests by route

import { BarChart } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const requestsByRoute = [
  { label: "Search", value: 84 },
  { label: "Projects", value: 63 },
  { label: "Settings", value: 41 },
  { label: "Billing", value: 28 },
];

export default function BarChartExample() {
  return (
    <ExampleStack style={{ minHeight: "18rem", width: "100%" }}>
      <BarChart
        aria-label="Requests by route"
        color="chart-3"
        data={requestsByRoute}
        height={288}
        style={{ flex: 1 }}
        title="Requests by route"
      />
    </ExampleStack>
  );
}

Props

Prop	Values	Default
`data`	`{ label: string, value: number }[]`	None
`aria-label`	string	None
`spark`	`true`, `false`	`false`
`color`	`chart-1` through `chart-6`, `positive`, `negative`, `neutral`	`chart-1`
`emphasis`	`primary`, `secondary`, `outline`, `ghost`	`secondary`
`size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`sm`
`title`	string	None
`height`	number	Responsive default

data and aria-label are required. Category labels remain available in the tooltip when spark mode hides the axes. size controls the title and axis-label size, while emphasis controls their color.

Color

Chart 1

Chart 2

Chart 3

Chart 4

Chart 5

Chart 6

Positive

Negative

Neutral

import { BarChart } from "density-base-ui";

const data = [
  { label: "Mon", value: 2 },
  { label: "Tue", value: 5 },
  { label: "Wed", value: 3 },
];

export default function BarChartColorExample() {
  return (
    <div style={styles.grid}>
      <BarChart
        aria-label="Chart 1"
        color="chart-1"
        data={data}
        height={100}
        title="Chart 1"
      />
      <BarChart
        aria-label="Chart 2"
        color="chart-2"
        data={data}
        height={100}
        title="Chart 2"
      />
      <BarChart
        aria-label="Chart 3"
        color="chart-3"
        data={data}
        height={100}
        title="Chart 3"
      />
      <BarChart
        aria-label="Chart 4"
        color="chart-4"
        data={data}
        height={100}
        title="Chart 4"
      />
      <BarChart
        aria-label="Chart 5"
        color="chart-5"
        data={data}
        height={100}
        title="Chart 5"
      />
      <BarChart
        aria-label="Chart 6"
        color="chart-6"
        data={data}
        height={100}
        title="Chart 6"
      />
      <BarChart
        aria-label="Positive"
        color="positive"
        data={data}
        height={100}
        title="Positive"
      />
      <BarChart
        aria-label="Negative"
        color="negative"
        data={data}
        height={100}
        title="Negative"
      />
      <BarChart
        aria-label="Neutral"
        color="neutral"
        data={data}
        height={100}
        title="Neutral"
      />
    </div>
  );
}

const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Emphasis

Primary

Secondary

Outline

Ghost

import { BarChart } from "density-base-ui";

const data = [
  { label: "Mon", value: 2 },
  { label: "Tue", value: 5 },
  { label: "Wed", value: 3 },
];

export default function BarChartEmphasisExample() {
  return (
    <div style={styles.grid}>
      <BarChart
        aria-label="Primary"
        data={data}
        emphasis="primary"
        height={120}
        title="Primary"
      />
      <BarChart
        aria-label="Secondary"
        data={data}
        emphasis="secondary"
        height={120}
        title="Secondary"
      />
      <BarChart
        aria-label="Outline"
        data={data}
        emphasis="outline"
        height={120}
        title="Outline"
      />
      <BarChart
        aria-label="Ghost"
        data={data}
        emphasis="ghost"
        height={120}
        title="Ghost"
      />
    </div>
  );
}

const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Size

2xs

2xl

3xl

import { BarChart } from "density-base-ui";

const data = [
  { label: "Mon", value: 2 },
  { label: "Tue", value: 5 },
  { label: "Wed", value: 3 },
];

export default function BarChartSizeExample() {
  return (
    <div style={styles.grid}>
      <BarChart
        aria-label="2xs"
        data={data}
        height={100}
        size="2xs"
        title="2xs"
      />
      <BarChart
        aria-label="xs"
        data={data}
        height={100}
        size="xs"
        title="xs"
      />
      <BarChart
        aria-label="sm"
        data={data}
        height={100}
        size="sm"
        title="sm"
      />
      <BarChart
        aria-label="md"
        data={data}
        height={100}
        size="md"
        title="md"
      />
      <BarChart
        aria-label="lg"
        data={data}
        height={100}
        size="lg"
        title="lg"
      />
      <BarChart
        aria-label="xl"
        data={data}
        height={100}
        size="xl"
        title="xl"
      />
      <BarChart
        aria-label="2xl"
        data={data}
        height={100}
        size="2xl"
        title="2xl"
      />
      <BarChart
        aria-label="3xl"
        data={data}
        height={100}
        size="3xl"
        title="3xl"
      />
    </div>
  );
}

const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Title

Weekly visitors

import { BarChart } from "density-base-ui";

const data = [
  { label: "Mon", value: 2 },
  { label: "Tue", value: 5 },
  { label: "Wed", value: 3 },
];

export default function BarChartTitleExample() {
  return (
    <BarChart
      aria-label="Weekly visitors"
      data={data}
      title="Weekly visitors"
    />
  );
}

Height

120 pixels

240 pixels

import { BarChart } from "density-base-ui";

const data = [
  { label: "Mon", value: 2 },
  { label: "Tue", value: 5 },
  { label: "Wed", value: 3 },
];

export default function BarChartHeightExample() {
  return (
    <div style={styles.grid}>
      <BarChart
        aria-label="120 pixel chart"
        data={data}
        height={120}
        title="120 pixels"
      />
      <BarChart
        aria-label="240 pixel chart"
        data={data}
        height={240}
        title="240 pixels"
      />
    </div>
  );
}

const styles = {
  grid: {
    display: "grid",
    gap: "1rem",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    width: "100%",
  },
} as const;

Spark

Set spark for a compact 32px chart without axes, gridlines, or visible labels. Spark charts still expose their data through keyboard-accessible tooltips.

import { BarChart } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const requestsByPriority = [
  { label: "P0", value: 8 },
  { label: "P1", value: 19 },
  { label: "P2", value: 31 },
  { label: "P3", value: 24 },
  { label: "P4", value: 13 },
];

export default function BarChartSparkExample() {
  return (
    <ExampleStack style={{ width: "100%" }}>
      <BarChart
        aria-label="Requests by priority"
        color="chart-3"
        data={requestsByPriority}
        spark
        style={{ width: "160px" }}
      />
    </ExampleStack>
  );
}