All examples

Flow charts

Sankey, funnel and network graphs use token palettes, accessible descriptions and expandable data tables in light and dark modes.

Flow charts

charts-flow · charts/flow

charts flow
Props
  • links
  • nodes
  • steps

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

Source (charts-flow/entries.ts) 
import { defineExample } from '../registry.ts';

export const chartsFlowExample = defineExample({
  id: 'charts-flow',
  title: 'Flow charts',
  description:
    'Sankey, funnel and network graphs use token palettes, accessible descriptions and expandable data tables in light and dark modes.',
  tags: ['charts', 'flow', 'sankey', 'funnel', 'network', 'accessibility'],
  component: 'charts/flow',
  props: ['nodes', 'links', 'steps'],
  load: () => import('./FlowChartsDemo.svelte'),
});