Compact charts

A sparkline, bullet chart, gauge and progress ring use the active theme tokens and include data table fallbacks.

charts-compact · charts/CompactChartsDemo

charts compact

Props

max
target
value
values

Live example loads in an isolated same-origin preview frame.

Source (charts-compact/entry.ts)

import { defineExample } from '../registry.ts';

export const chartsCompactExample = defineExample({
  id: 'charts-compact',
  title: 'Compact charts',
  description:
    'A sparkline, bullet chart, gauge and progress ring use the active theme tokens and include data table fallbacks.',
  tags: ['charts', 'compact', 'accessibility'],
  component: 'charts/CompactChartsDemo',
  props: ['values', 'value', 'target', 'max'],
  load: () => import('./CompactChartsDemo.svelte'),
});