Color theme
npm i data-chart-web-component

Charts in plain HTML

Lightweight · Framework-agnostic · Declarative

Interactive playground View on GitHub
Interactive

Playground

Switch chart types and see the same dataset rendered in different ways.

Chart type
Reference

Components

Three custom elements compose every chart. Import them once, use anywhere in your HTML.

<data-chart>

The root chart element. Set type to choose the visualization and configure axes, styling, and behavior with attributes. Renders into shadow DOM and exposes ::part() hooks for styling.

Children <data-chart-point> for single-series data, or <data-chart-group> elements for multi-series charts.
Chart types column, bar, line, area (stacked), scatter, pie
Property chart.type — get or set the chart type from JavaScript (e.g. document.querySelector('data-chart').type = 'line').
Shadow parts
chart plot plot-area column bar line area slice point legend value-label
Accessibility Charts include a spoken summary with key findings (highs, lows, trends) and a data table for screen readers. Focus the chart with Tab to hear the summary.

<data-chart-group>

Defines a named series for multi-series column, bar, line, area, scatter, and pie charts. Each group contains its own data points.

Attributes label (or name) — series name shown in the legend. color — series color applied to all points in the group.
Children One or more <data-chart-point> elements.
Pie charts Multiple groups render as a panel of separate pie charts, one per group.

<data-chart-point>

A single data point. Attribute changes trigger an automatic chart re-render via a bubbling chart-update event.

Attributes label — category or segment name. value — numeric value (Y axis for scatter). x — horizontal position for scatter plots. color — override point color. group — series name when not using <data-chart-group>.
Placement Direct child of <data-chart> for single-series charts, or nested inside <data-chart-group> for multi-series.
Reference

Attributes

All configuration on <data-chart> is declarative. Theme attributes map to CSS custom properties on the element.

Chart options

Attribute Description
type Chart type: column, bar, line, area, scatter, or pie. Default: column
value-label Label for the value axis (Y). Alias: y-label. Default varies by chart type
category-label Label for the category axis (X). Alias: x-label. Default varies by chart type
height Plot height. Accepts a number (pixels) or any CSS length (e.g. 20em).
show-values Display numeric values on data points. Set to false to hide. Default: true
show-legend Show the series legend. Set to false to hide. When omitted, legend appears for multi-series charts. Default: auto
colors Comma-separated color palette used when points have no explicit color. Default: built-in palette
scale-padding Multiplier applied above the data maximum when computing axis scale. Default: 1.15
empty-message Message shown when no data points are provided. Default: No data points provided

Theme & styling

These attributes set CSS custom properties on the <data-chart> element. You can also set the variables directly in CSS.

Attribute CSS variable Description
font --chart-font Chart font family.
text-color --chart-text Primary text color.
axis-color --chart-axis-color Axis label color.
grid-color --chart-grid-color Grid line color.
plot-color --chart-plot-bg Plot area background.
line-width --chart-line-width Line and stroke width for line and area charts.
bar-radius --chart-bar-radius Corner radius for bars and columns.
Getting started

Usage

Import the components once, then compose charts with HTML attributes and child elements.

<data-chart type="column"
  value-label="Sales"
  category-label="Month"
  height="320"
  show-values="true">
  <data-chart-group label="Revenue" color="#3b82f6">
    <data-chart-point label="Jan" value="30"></data-chart-point>
  </data-chart-group>
</data-chart>

<!-- Same markup works for type="line" or type="area" (stacked) -->

<!-- Scatter plots use x for the horizontal axis and value for y -->
<data-chart type="scatter" value-label="Y" category-label="X">
  <data-chart-point x="10" value="25"></data-chart-point>
</data-chart>

<style>
  data-chart {
    --chart-plot-bg: #f8fafc;
    --chart-axis-color: #64748b;
    --chart-line-width: 3px;
  }
  data-chart::part(column) { opacity: 0.9; }
</style>