Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
chart-wc
SVG chart component with progressive enhancement: semantic table → CSS chart → SVG chart. Supports bar, column, line, area, pie, scatter, and bubble types.
Overview
An SVG chart web component with built-in charting engine. Supports seven chart types with five data source options. Progressive enhancement means a semantic <table> is visible without JavaScript — with JS, the SVG chart renders and the table becomes screen-reader only.
Chart Types
Set data-type to one of: bar, column, line, area, pie, scatter, or bubble.
Line Chart
Line chart with JSON data
<chart-wc data-type="line" data-title="Weekly Users" data-label-x="Day of Week" data-label-y="Users" data-legend data-tooltip data-values='[ {"name": "Desktop", "values": {"Mon": 120, "Tue": 180, "Wed": 150, "Thu": 210, "Fri": 190, "Sat": 80, "Sun": 60}}, {"name": "Mobile", "values": {"Mon": 80, "Tue": 120, "Wed": 160, "Thu": 140, "Fri": 200, "Sat": 220, "Sun": 180}} ]'></chart-wc>Pie Chart
Pie charts accept a flat object (label → value) as data.
Pie chart
<chart-wc data-type="pie" data-title="Market Share" data-legend data-values='{"Chrome": 65, "Safari": 18, "Firefox": 8, "Edge": 5, "Other": 4}'></chart-wc>Data Sources
The component resolves data using this priority chain:
| Priority | Source | Description |
|---|---|---|
| 1 | JS property (.data) | Set data programmatically |
| 2 | data-values | Inline JSON attribute |
| 3 | <script type="application/json"> | JSON script block child |
| 4 | <template data-chart-data> | Template child with JSON |
| 5 | <table> | Child table (progressive enhancement) |
Table Source (Progressive Enhancement)
Wrap a semantic <table> inside <chart-wc>. The chart extracts data from the table and renders SVG. Without JavaScript, the table remains visible.
Column chart from table
<chart-wc> <table class="vb-chart" data-type="column" data-chart="replace" data-tooltip> <caption>Quarterly Results</caption> <thead> <tr><th></th><th>Revenue</th><th>Expenses</th><th>Profit</th></tr> </thead> <tbody> <tr><th>Q1</th><td>45</td><td>32</td><td>13</td></tr> <tr><th>Q2</th><td>52</td><td>35</td><td>17</td></tr> <tr><th>Q3</th><td>48</td><td>30</td><td>18</td></tr> <tr><th>Q4</th><td>61</td><td>38</td><td>23</td></tr> </tbody> </table></chart-wc>Script Block
Area chart from JSON script
<chart-wc data-type="area" data-title="Traffic Sources" data-legend data-tooltip> <script type="application/json"> [ {"name": "Organic", "values": {"Jan": 3200, "Feb": 4100, "Mar": 3800, "Apr": 5200}}, {"name": "Referral", "values": {"Jan": 1200, "Feb": 1400, "Mar": 1100, "Apr": 1800}} ] </script></chart-wc>Template
Bar chart from template
<chart-wc data-type="bar" data-title="Team Velocity" data-tooltip> <template data-chart-data> [{"name": "Story Points", "values": {"Sprint 1": 21, "Sprint 2": 34, "Sprint 3": 29, "Sprint 4": 42}}] </template></chart-wc>Table Column Control
Use data-chart-label, data-chart-series, and data-chart-ignore on <th> elements to control how table columns are extracted.
Column selection with data-chart-ignore
<chart-wc> <table class="vb-chart" data-type="column" data-chart="replace" data-tooltip> <caption>Product Sales</caption> <thead> <tr> <th data-chart-label>Product</th> <th data-chart-ignore>ID</th> <th>Units Sold</th> <th>Revenue</th> </tr> </thead> <tbody> <tr><td>Alpha</td><td>P001</td><td>120</td><td>3600</td></tr> <tr><td>Beta</td><td>P002</td><td>85</td><td>4250</td></tr> <tr><td>Gamma</td><td>P003</td><td>200</td><td>6000</td></tr> </tbody> </table></chart-wc>Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
data-type | "bar", "column", "line", "area", "pie", "scatter", "bubble" | — | Chart type to render |
data-values | string | — | Chart data as JSON string |
data-config | string | — | SVC config overrides as JSON string |
data-title | string | — | Chart title text |
data-legend | boolean | — | Show legend (presence enables) |
data-tooltip | boolean | — | Enable tooltips (presence enables) |
data-palette | string | — | Custom color palette as JSON array |
data-chart | "replace", "enhance" | — | How to handle source table: replace hides table, enhance keeps both |
Structure
| Element | Required | Description |
|---|---|---|
<table> | yes | Optional source table — data is extracted and table becomes screen-reader accessible |
<script type='application/json'> | yes | Optional inline JSON data source |
<template data-chart-data> | yes | Optional template-based JSON data source |
Events
| Event | Detail | Description |
|---|---|---|
chart-wc:render | { type, seriesCount } | Fired after SVG chart renders successfully |
chart-wc:error | { message } | Fired when chart rendering fails |
Event listeners
const chart = document.querySelector('chart-wc'); chart.addEventListener('chart-wc:render', (e) => { console.log('Rendered:', e.detail.type, e.detail.seriesCount, 'series');}); chart.addEventListener('chart-wc:error', (e) => { console.error('Chart error:', e.detail.message);});JavaScript API
| Property / Method | Type | Description |
|---|---|---|
.data | Array|Object | Get/set chart data. Triggers re-render on set. |
.config | Object | Get/set chart config overrides. Triggers re-render on set. |
.refresh() | void | Re-extract table data and re-render the chart. |
.toSVG() | string|null | Get the current SVG markup for export. |
Programmatic API
const chart = document.querySelector('chart-wc'); // Set data via JS propertychart.data = [ {name: '2024', values: {Q1: 120, Q2: 180, Q3: 150, Q4: 210}}, {name: '2025', values: {Q1: 140, Q2: 200, Q3: 170, Q4: 240}},]; // Update configchart.config = { legend: { enabled: true } }; // Re-extract from table and re-renderchart.refresh(); // Get SVG markup for exportconst svg = chart.toSVG();Theme Integration
Charts read VB design tokens via CSS custom properties. The theme bridge converts these into palette and axis configuration automatically.
| Custom Property | Purpose |
|---|---|
--chart-series-1 … --chart-series-6 | Chart color palette per series |
--chart-label-color | Axis tick label color |
--chart-axis-color | Axis line color |
--chart-grid-color | Grid line color |
Progressive Enhancement
| Layer | Environment | Experience |
|---|---|---|
| 1 | No CSS, no JS | Plain semantic table |
| 2 | CSS only | CSS chart via .vb-chart class |
| 3 | CSS + JS | Full SVG chart with interactivity |
Loading
<chart-wc> is part of the optional charts bundle (main-charts.js), not the core bundle. Include it separately:
Include charts bundle
<script type="module" src="/cdn/vanilla-breeze-charts.js"></script>