Progressive Enhancement Charts

A CSS-only charting system built on semantic HTML tables. Data remains accessible and readable without CSS, transforms into beautiful visualizations with CSS.

Bar Chart

Horizontal bars for comparing values. The --value property (0-1) controls bar width.

Monthly Revenue
January	$6,500
February	$8,000
March	$9,200
April	$7,500
May	$10,000

View HTML

<table class="vb-chart" data-type="bar" data-tooltip>
  <caption>Monthly Revenue</caption>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td style="--value: 0.65" data-tooltip="January: $6,500">$6,500</td>
    </tr>
    <!-- more rows... -->
  </tbody>
</table>

Column Chart

Vertical columns for time-series data. Labels appear below each column.

Quarterly Sales
Q1	$60k
Q2	$85k
Q3	$70k
Q4	$100k

Multi-Series with Legend

Use data-series attribute for different colors. Add a legend for clarity.

Product Comparison
Product A	85%
Product B	65%
Product C	92%
Product D	45%

Product A Product B Product C Product D

Line Chart

Uses --start and --end to draw connecting lines between data points using clip-path polygon.

Weekly Active Users
Mon	450
Tue	620
Wed	780
Thu	550
Fri	900
Sat	1000
Sun	700

<table class="vb-chart" data-type="line" data-grid> <caption>Weekly Active Users</caption> <tbody> <tr> <th scope="row">Mon</th> <td style="--start: 0.45; --end: 0.45">450</td> </tr> <tr> <th scope="row">Tue</th> <td style="--start: 0.45; --end: 0.62">620</td> </tr>  </tbody> </table>

Area Chart

Filled region under connecting lines using --start and --end with clip-path polygon.

Page Views
Jan	3k
Feb	4.5k
Mar	6.5k
Apr	8k
May	7k
Jun	10k

<table class="vb-chart" data-type="area" data-grid> <caption>Page Views</caption> <tbody> <tr> <th scope="row">Jan</th> <td style="--start: 0.30; --end: 0.30">3k</td> </tr> <tr> <th scope="row">Feb</th> <td style="--start: 0.30; --end: 0.45">4.5k</td> </tr>  </tbody> </table>

Pie Chart

Uses conic-gradient for circular segments. Set segment values on tbody style.

Market Share
Company A	45%
Company B	25%
Company C	20%
Others	10%

Company A Company B Company C Others

Donut Chart

Add data-donut for hollow center. Great for displaying a key metric in the center.

Budget Allocation
Development	35%
Marketing	30%
Operations	20%
Other	15%

Development Marketing Operations Other

JavaScript API

Create charts from data using the JavaScript helper. Automatically normalizes values and builds HTML.

View JavaScript

import { charts } from '/src/lib/charts.js';

charts.create({
  container: '#js-chart-container',
  type: 'bar',
  caption: 'Team Performance',
  data: [
    { label: 'Alice', value: 92, displayValue: '92 pts' },
    { label: 'Bob', value: 78, displayValue: '78 pts' },
    { label: 'Carol', value: 85, displayValue: '85 pts' },
    { label: 'David', value: 65, displayValue: '65 pts' },
  ],
  modifiers: { tooltip: true, gap: 'm' }
});

Dynamic Pie Chart

The JavaScript API handles conic-gradient calculation automatically.

Interactive Controls

Toggle chart modifiers to see different presentations.

Show Labels Enable Tooltips Gap Size:

Controllable Chart
Item A	75%
Item B	50%
Item C	90%
Item D	35%

Progressive Enhancement

Without CSS, the chart degrades to a readable data table. This ensures accessibility and print friendliness.

With CSS (Visual Chart)

Sample Data
Alpha	80
Beta	60
Gamma	90

Without CSS (Data Table)

Sample Data
Label	Value
Alpha	80
Beta	60
Gamma	90

Size Variants

Use data-size="s" or data-size="l" for different chart scales.

Small

Small Chart
A	70
B	50
C	90
D	60

Default

Default Chart
A	70
B	50
C	90
D	60

Large

Large Chart
A	70
B	50
C	90
D	60

Accessibility

Semantic <table> structure with proper headers
<caption> provides chart title to assistive technology
<th scope="row"> associates labels with data
Actual values in <td> cells readable by screen readers
Keyboard accessible - tooltips shown on :focus-visible
High contrast mode supported via design tokens
Print styles revert to table format
Reduced motion respected for animations