@classic-homes/charts-svelte

Svelte ECharts components for the Classic Theme design system. Charts pick up the Classic light and dark themes from @classic-homes/charts-core.

Installation

npm install @classic-homes/charts-svelte echarts svelte

Peer dependencies: echarts@^5.5.0, svelte@^5.20.0.

Quick Start

<script lang="ts">
  import { LineChart } from '@classic-homes/charts-svelte';

  const data = {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [
      { name: '2024', data: [120, 132, 101, 134, 90, 230] },
      { name: '2025', data: [220, 182, 191, 234, 290, 330] },
    ],
  };
</script>

<LineChart title="Monthly Revenue" {data} smooth height={400} />

Exports

• Charts: LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart
• Stat helpers: Sparkline, StatCard, StatGroup
• Base components: ChartContainer, ChartSkeleton, ChartError, ChartEmpty, ChartLegend, ChartDataTable
• Composables: useChart, useChartTheme, useChartResize, useChartLegend, useReducedMotion, registerClassicThemes, registerEchartsModules, exportChartImage
• Data helpers (from @classic-homes/charts-core): fromRecords, toSliceData, binValues, boxplotStats, waterfallLayout, formatValue, computeDelta, tableToCsv, downloadCsv

Chart data and option types are exported from the package root, and also from @classic-homes/charts-core/types.

<script lang="ts">
  import { ChartSkeleton, DonutChart, type PieSliceData } from '@classic-homes/charts-svelte';
</script>

Related Packages

• @classic-homes/charts-core: shared themes, types, and utilities
• @classic-homes/charts-react: React equivalents for the core and extended charts