Quick Demo
Interactive example
| Quarter | Online | Retail |
|---|---|---|
| Q1 | $1,200 | $900 |
| Q2 | $1,500 | $1,100 |
| Q3 | $1,800 | $1,400 |
| Q4 | $2,000 | $1,700 |
Usage
<script type="module" src="./dist/table-bar-chart.js"></script>
<table-bar-chart stacked>
<table>...</table>
</table-bar-chart>Attributes & Properties
- hide-scale: hide the left scale
- scale-steps: number of scale ticks (min 2, default 4)
- stacked: render multi-series bars stacked
CSS Configuration
Customize the appearance of the chart using CSS properties:
-
height: set the chart container height (default:
300px)
table-bar-chart { height: 400px; } -
--bar-background-color: customize the bar color
table-bar-chart { --bar-background-color: #3b82f6; }