Chart Types

data-chart supports 6 chart types, all set via the data-chart attribute.

Bar (Vertical)

The default chart type. Grouped vertical bars for comparing categories.

Multiple series (multiple <th> columns after the first) are automatically grouped side by side.

Bar (Horizontal)

Add data-chart-horizontal for horizontal bars. Best for rankings.

Bar (Stacked)

Add data-chart-stacked to stack series on top of each other.

Line

Connected data points showing trends over time.

Line charts support multiple series. Each series gets its own colored line and dots.

Area

Same as line, with a filled area beneath the line for volume emphasis.

The area fill uses 15% opacity of the series color.

Pie

Proportional slices showing composition. Uses the first data column only.

A legend with percentages is automatically generated below the pie.

Donut

Same as pie, with a hollow center displaying the total value.

Table Parsing Rules

The first <th> column is always treated as category labels (X-axis). Subsequent columns are data series.