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 |