DotPlotChart

The DotPlotChart draws one row per category and one dot per series, on a value axis fitted to the data instead of starting at zero. It is the clearest way to compare a measure such as average cycle time across many builders, communities or plans. Set connect to join each row's dots into a dumbbell for before/after comparisons, and sizes to scale dots by a sample size.

Svelte only (@classic-homes/charts-svelte); React support is pending.

Import​

<script>
  import { DotPlotChart } from '@classic-homes/charts-svelte';
</script>

Basic Usage​

<script>
  import { DotPlotChart } from '@classic-homes/charts-svelte';

  const data = {
    categories: ['Hilltop Builders', 'Riverbend Homes', 'Oak & Main', 'Summit Custom'],
    series: [{ name: 'Avg cycle time', data: [104, 118, 127, 142] }],
  };
</script>

<DotPlotChart title="Cycle Time by Builder" {data} valueFormat="days" />

Props​

Chart-Specific Props​

Inherited Base Props​

Data Structure​

interface DotPlotChartData {
  categories: string[]; // One row per category, first at the top
  series: Array<{
    name: string; // Series name for legend
    data: (number | null)[]; // Values by category; null leaves the row empty
    sizes?: (number | null)[]; // Per-point weight (e.g. sample size) scaling the dot area
    color?: string; // Optional custom color
    labels?: (string | null | undefined)[]; // Per-point label text
  }>;
}

Examples​

Dumbbell: This Year vs Last Year​

<DotPlotChart
  title="Cycle Time, 2025 vs 2026"
  data={{
    categories: ['Hilltop Builders', 'Riverbend Homes', 'Oak & Main', 'Summit Custom'],
    series: [
      { name: '2025', data: [121, 130, 125, 158] },
      { name: '2026', data: [104, 118, 127, 142] },
    ],
  }}
  connect
  valueFormat="days"
/>

Dots Sized by Sample Size​

The tooltip shows the weight as n = ....

<DotPlotChart
  title="Warranty Response Time by Community"
  data={{
    categories: ['Cedar Ridge', 'Lakeside', 'Willow Creek'],
    series: [{ name: 'Avg response', data: [2.4, 3.1, 1.8], sizes: [140, 36, 88] }],
  }}
  dotSize={[8, 24]}
  valueFormat={{ maximumFractionDigits: 1 }}
  referenceLines={[{ value: 3, label: 'SLA' }]}
/>

From Records​

<script>
  import { DotPlotChart, fromRecords } from '@classic-homes/charts-svelte';

  let { closings } = $props(); // [{ builder: 'Hilltop Builders', cycleDays: 98 }, ...]

  const data = $derived(
    fromRecords(closings, {
      category: 'builder',
      value: 'cycleDays',
      aggregate: 'avg',
      seriesName: 'Avg cycle time',
      sort: 'total-asc',
    })
  );
</script>

<DotPlotChart title="Cycle Time by Builder" {data} valueFormat="days" />

Accessibility​

• The title prop is used as aria-label; a description naming the highest and lowest values is generated when description is omitted
• The chart data is rendered as a screen-reader table (showDataTable)
• Animations respect prefers-reduced-motion
• Height follows the row count by default, so long lists stay readable

Related Charts​

• BarChart - Categorical comparison from zero
• BulletChart - Actual vs target per row
• BoxPlotChart - Spread per category