Density

BarChart

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

Requests by route
import { BarChart, View } from "density-base-ui";

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

export default function BarChartExample() {
  return (
    <View align="start" gap="md" padding={false} style={{ minHeight: "18rem" }}>
      <BarChart
        aria-label="Requests by route"
        color="chart-3"
        data={requestsByRoute}
        height={288}
        style={{ flex: 1 }}
        title="Requests by route"
      />
    </View>
  );
}

data and aria-label are required. Category labels remain available in the tooltip when spark mode hides the axes. size controls the title size; axis labels render one Density size step smaller. emphasis controls their color.

Animate

Set animate to reveal the bars upward from their baseline when the chart mounts. It defaults to false and respects reduced-motion preferences.

import { BarChart, Button, View } from "density-base-ui";
import { RefreshCw } from "lucide-react";
import { useState } from "react";

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

export default function BarChartAnimateExample() {
  const [animationKey, setAnimationKey] = useState(0);

  return (
    <View>
      <BarChart
        key={animationKey}
        animate
        aria-label="Animated requests by route"
        data={requestsByRoute}
      />
      <Button onClick={() => setAnimationKey((key) => key + 1)}>
        <RefreshCw aria-hidden="true" size={14} />
        Replay animation
      </Button>
    </View>
  );
}

Color

Chart 1
Chart 2
Chart 3
Chart 4
Chart 5
Chart 6
Positive
Negative
Neutral
import { BarChart, View } from "density-base-ui";
import { requestsByPriority as data } from "../charts/chartExampleData";

export default function BarChartColorExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <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"
      />
    </View>
  );
}

Emphasis

Primary
Secondary
Outline
Ghost
import { BarChart, View } from "density-base-ui";
import { requestsByPriority as data } from "../charts/chartExampleData";

export default function BarChartEmphasisExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <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-primary"
        height={120}
        title="Ghost"
      />
    </View>
  );
}

Size

2xs
xs
sm
md
lg
xl
2xl
3xl
import { BarChart, View } from "density-base-ui";
import { requestsByPriority as data } from "../charts/chartExampleData";

export default function BarChartSizeExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <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"
      />
    </View>
  );
}

Title

Weekly visitors
Compared with the previous seven days
import { BarChart } from "density-base-ui";
import { requestsByPriority as data } from "../charts/chartExampleData";

export default function BarChartTitleExample() {
  return (
    <BarChart
      aria-label="Weekly visitors"
      data={data}
      title="Weekly visitors"
      subtitle="Compared with the previous seven days"
    />
  );
}

Height

120 pixels
240 pixels
import { BarChart, View } from "density-base-ui";
import { requestsByPriority as data } from "../charts/chartExampleData";

export default function BarChartHeightExample() {
  return (
    <View
      gap="xl"
      layout="grid"
      padding={false}
      style={{
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <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"
      />
    </View>
  );
}

Padding

Set padding to add outer spacing around the frame without changing the plotted bars’ geometry.

import { BarChart } from "density-base-ui";
import { requestsByPriority } from "../charts/chartExampleData";

export default function BarChartPaddingExample() {
  return (
    <BarChart
      aria-label="Requests by priority with padding"
      data={requestsByPriority}
      padding
    />
  );
}

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, View } from "density-base-ui";
import { requestsByPriority } from "../charts/chartExampleData";

export default function BarChartSparkExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <BarChart
        aria-label="Requests by priority"
        color="chart-3"
        data={requestsByPriority}
        spark
        style={{ width: "160px" }}
      />
    </View>
  );
}