Skip to main content

Documentation

ChartDataTable

Accessible table of a chart's data, used for screen readers and the "Show data" view

Tags: chart table accessibility export

View Demo

The ChartDataTable component renders chart data as a semantic HTML table with a caption, column headers and row headers. Every chart uses it through ChartContainer: visually hidden for screen readers by default (showDataTable="sr-only"), or behind a visible "Show data" toggle with showDataTable. Use it directly to show a chart's numbers next to a custom visual.

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

Import​

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

Basic Usage​

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

  const table = {
    headers: ['Builder', 'Closings', 'Revenue'],
    rows: [
      ['Classic Homes', 42, 17640000],
      ['Summit Builders', 35, 13300000],
    ],
    columns: ['text', 'number', 'value'],
  };
</script>

<ChartDataTable {table} caption="Closings by builder" format={(v) => `$${(v / 1e6).toFixed(1)}M`} />

Props​

Prop Type Default Description
table ChartDataTableData required Table contents: headers, rows and column kinds
caption string required Caption naming the chart the data belongs to
format (value: number) => string - Formats 'value' columns
srOnly boolean false Hide visually, leaving the table to screen readers
class string - Additional CSS classes

Data Structure​

// Exported from @classic-homes/charts-core as ChartDataTable,
// and from @classic-homes/charts-svelte as ChartDataTableData
interface ChartDataTable {
  headers: string[];
  rows: (string | number | null)[][];
  // How each column's numbers are shown: 'value' uses `format`, 'number' plain
  // separators, 'percent' a share already in percent; defaults to 'value'
  columns?: ('value' | 'number' | 'percent' | 'text')[];
}

Examples​

CSV Download​

tableToCsv and downloadCsv export the same table shape.

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

<button onclick={() => downloadCsv(table, chartFilename('Closings by builder'))}>
  Download CSV
</button>

Visible Data View on a Chart​

<BarChart title="Closings by Builder" {data} showDataTable />

Accessibility​

  • Uses <caption>, <th scope="col"> column headers and <th scope="row"> row headers
  • srOnly keeps the table available to screen readers without showing it
  • Missing values render as empty cells
On this page