Chart WC — Table Source
These charts extract their data from a child <table>.
Without JavaScript, the CSS chart (or plain table) is visible.
With JavaScript, the SVG chart renders and the table becomes screen-reader only.
Line Chart from Table
Monthly Revenue
| Online | In-Store |
|---|
| Jan | 12000 | 8000 |
|---|
| Feb | 15000 | 9000 |
|---|
| Mar | 13000 | 11000 |
|---|
| Apr | 18000 | 10000 |
|---|
| May | 22000 | 12000 |
|---|
| Jun | 19000 | 14000 |
|---|
Column Chart from Table
Quarterly Results
| Revenue | Expenses | Profit |
|---|
| Q1 | 45 | 32 | 13 |
|---|
| Q2 | 52 | 35 | 17 |
|---|
| Q3 | 48 | 30 | 18 |
|---|
| Q4 | 61 | 38 | 23 |
|---|
Bar Chart from Table
Department Headcount
| Employees |
|---|
| Engineering | 42 |
|---|
| Design | 18 |
|---|
| Marketing | 25 |
|---|
| Sales | 31 |
|---|
| Support | 22 |
|---|
Pie Chart from Table
Browser Usage
| Browser | Share |
|---|
| Chrome | 65 |
|---|
| Safari | 18 |
|---|
| Firefox | 8 |
|---|
| Edge | 5 |
|---|
| Other | 4 |
|---|
Column Selection (data-chart-ignore)
The "ID" column is excluded from the chart via data-chart-ignore.
Product Sales
| Product |
ID |
Units Sold |
Revenue |
| Alpha | P001 | 120 | 3600 |
| Beta | P002 | 85 | 4250 |
| Gamma | P003 | 200 | 6000 |