chart-wc

SVG chart component powered by SVC. Progressive enhancement: semantic table → CSS chart → SVG chart. Supports bar, column, line, area, pie, scatter, and bubble types.

Overview

An SVG chart web component powered by SVC. 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

<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.

<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.

<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

<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

<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.

<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

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 SVC 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.

Theme Integration

Charts read VB design tokens via CSS custom properties. The theme bridge converts these into SVC 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: