Chart Styles

Live, responsive SVG charts rendered from data by the Xevor chart component.

Bar chart

Grouped bars for comparing multiple series across categories. Resize the window to test responsiveness.

Data: quarterly throughput by cluster.

Line chart

Line charts show trends. Multiple series are stacked or overlaid with distinct colors and circular point markers.

Data: revenue vs. cost over six months.

Donut chart

Donut charts show part-to-whole relationships. Use them only when the total is meaningful and segments are few.

Data: portfolio allocation by cluster.

Usage Rules

• Every chart has a data table or screen-reader labels.
• Bar and line charts always start value axes at zero unless a truncated scale is explicitly justified.
• Do not use donut charts for more than six segments.
• Animate chart entrances with prefers-reduced-motion in mind.
• Test all charts against color-blindness simulations on the Color page.

Markup

<div class='xevor-chart' data-xevor-chart='{"type":"bar","labels":["Q1","Q2","Q3","Q4"],"series":[{"name":"Quantum","values":[120,145,190,230]}]}'></div>
<script src='../charts.js'></script>