Chart

Composable line, bar, and area charts with an accessible legend, tooltip, and data table.

Introduction

Chart draws line, bar, and area series over a shared set of categories. Bridge owns the legend, tooltip, tokens, dark mode, and accessibility (summary, keyboard navigation, and a data table). The plot engine is ECharts.

Compose Chart with ChartSeries, ChartAxis, ChartLegend, and ChartTooltip. Every series has one value per category.

When to use: Trends and comparisons over an ordered set of categories — months, weeks, steps in a funnel.

Compared to similar components:

• DataTable — Exact values the user reads, sorts, or filters. Prefer DataTable when the numbers matter more than the shape.
• Progress — A single value against a goal. Use Chart when there is more than one category.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Chart } from "@bridge-ui/vue/Components/Chart";
import { ChartAxis } from "@bridge-ui/vue/Components/ChartAxis";
import { ChartLegend } from "@bridge-ui/vue/Components/ChartLegend";
import { ChartSeries } from "@bridge-ui/vue/Components/ChartSeries";
import { ChartTooltip } from "@bridge-ui/vue/Components/ChartTooltip";

import { Chart } from "@bridge-ui/react/Components/Chart";
import { ChartAxis } from "@bridge-ui/react/Components/ChartAxis";
import { ChartLegend } from "@bridge-ui/react/Components/ChartLegend";
import { ChartSeries } from "@bridge-ui/react/Components/ChartSeries";
import { ChartTooltip } from "@bridge-ui/react/Components/ChartTooltip";

Basic usage

Pass the category labels as categories and add a ChartSeries per data set. ChartLegend and ChartTooltip are optional.

Bar and area

type picks the series family: line (default), bar, or area. curve="smooth" rounds lines and areas. height sets the plot height (default 280).

Mixed series and gaps

Bars and lines share the value axis, so you can mix them in one chart. A null value leaves a gap in lines and areas and is skipped in the tooltip.

Axes

Add a ChartAxis for position="x" (categories) or position="y" (values) to set a label, bounds, tick count, or a tick formatter. formatTick receives the category on x and the value on y. Grid lines are on for y and off for x by default.

Colors

Series take palette colors in order, cycling when there are more series than colors. Pass a token key or any CSS color to color on a series to override it.

Token keys (primary, info, success, warning, error, secondary, dark, black) follow light and dark mode automatically.

Legend and tooltip

Legend entries are toggle buttons: click to hide or show a series, hover or focus to emphasize it. Set interactive to false for a static legend. position and align place it above or below the plot.

formatValue formats each tooltip value (default: a locale number format). slots.content replaces the title and rows (Vue: #content) and receives category, index, and the visible items.

Loading and empty

loading covers the plot with a skeleton. A chart with no series or no values shows an empty message. Replace either with slots.loading and slots.empty (Vue: #loading and #empty).

Defaults and theme

Set app-wide defaults through the registry: Chart (animation, height, palette, size), ChartSeries (curve, type), and ChartLegend (align, interactive, position). Chart.tokens.theme sets the grid, axis, and label colors as Tailwind text-color classes. See Default props.

<BridgeUIProvider
  :components="{
    Chart: {
      defaultProps: { height: 320 },
      tokens: { theme: { grid: 'text-dark-100 dark:text-dark-800' } },
    },
    ChartSeries: { defaultProps: { curve: 'smooth' } },
  }"
>
  <App />
</BridgeUIProvider>

<BridgeUIProvider
  components={{
    Chart: {
      defaultProps: { height: 320 },
      tokens: { theme: { grid: "text-dark-100 dark:text-dark-800" } },
    },
    ChartSeries: { defaultProps: { curve: "smooth" } },
  }}
>
  <App />
</BridgeUIProvider>

Keyboard

• Tab focuses the plot.
• ArrowLeft / ArrowRight (or ArrowUp / ArrowDown) move between categories. Home / End jump to the first and last category. Escape clears the active category.
• The tooltip follows the keyboard, and the values are announced through a live region.
• Legend entries are buttons: Enter or Space toggles a series.

Accessibility

• The root is a figure. The plot is a focusable img labelled by summary, or by a generated summary (series names and category range) when it is omitted. Pass summary to describe the takeaway instead.
• A visually hidden data table with every value is always rendered.
• The tooltip is decorative (aria-hidden="true"); the same information is in the table and the announcements.
• Legend buttons expose their state with aria-pressed.
• Engine animation is off under prefers-reduced-motion.

Anatomy

<div> <!-- Chart root, role="figure" -->
  <div> <!-- plot, role="img", tabindex="0" -->
    <div> <!-- ECharts host -->
    <div> <!-- loading overlay -->
    <div> <!-- empty overlay -->
  <ul> <!-- ChartLegend root -->
    <li>
      <button> <!-- item: swatch + label -->
  <div> <!-- ChartTooltip root, aria-hidden -->
  <table> <!-- data table, sr-only -->
  <div> <!-- live region, role="status" -->
</div>

Target parts with classes and customProps. Chart: root, plot, loading, empty, and table. ChartLegend: root, item, swatch, and label. ChartTooltip: root, title, item, swatch, label, and value.

Related components

DataTable, Progress, Skeleton

API

Chart

ChartSeries

ChartAxis

ChartLegend

ChartTooltip