Skip to main content

Documentation

ChartContainer

Base wrapper component for charts with loading, error, and empty states

Tags: chart container wrapper loading error accessibility

View Demo

The ChartContainer component provides a consistent wrapper for all chart components with built-in support for loading, error, and empty states. It handles accessibility attributes and provides a unified API for chart state management.

Import​

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

Basic Usage​

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

<ChartContainer title="Sales Overview" height={400}>
  <!-- Your chart content here -->
</ChartContainer>

Props​

Prop Type Default Description
title string required Chart title for accessibility (aria-label)
description string - Chart description for screen readers
height number | string 400 Chart container height
minHeight number - Minimum height in pixels
maxHeight number - Maximum height in pixels
loading boolean false Show loading skeleton; over an existing chart it dims the chart with an overlay instead, keeping zoom and legend state
error string | null - Error message to display
empty boolean false Show empty state
emptyMessage string 'No data available' Custom empty state message
onRetry () => void - Callback for retry button in error state
class string - Additional CSS classes for chart area
wrapperClass string - Additional CSS classes for outer wrapper
legend Snippet - Custom legend rendered beside the chart, outside the role="img" element
legendPosition 'top' | 'right' | 'bottom' | 'left' 'bottom' Where the custom legend sits
dataTable ChartDataTable - The chart's data as a table, for screen readers, "Show data" and CSV export (Svelte only)
showDataTable boolean | 'sr-only' 'sr-only' 'sr-only' renders the table for screen readers, true adds a visible "Show data" toggle (Svelte only)
format (value: number) => string - Formats values in the data table (Svelte only)
exportable boolean | ChartExportConfig false Show PNG and CSV download buttons (Svelte only)
exportImage () => string | null - Renders the chart to an image data URL, for the PNG download (Svelte only)

Examples​

With Loading State​

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

  let loading = $state(true);
  let data = $state(null);
</script>

<ChartContainer title="Revenue" {loading}>
  {#if data}
    <LineChart {data} title="Revenue" />
  {/if}
</ChartContainer>

With Error State​

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

  let error = $state(null);

  async function fetchData() {
    try {
      // fetch data
    } catch (e) {
      error = e.message;
    }
  }
</script>

<ChartContainer title="Analytics" {error} onRetry={fetchData}>
  <BarChart {data} title="Analytics" />
</ChartContainer>

With Empty State​

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

  let data = $state([]);
</script>

<ChartContainer
  title="User Activity"
  empty={data.length === 0}
  emptyMessage="No activity recorded yet"
>
  <AreaChart {data} title="User Activity" />
</ChartContainer>

Custom Styling​

<ChartContainer title="Dashboard Chart" wrapperClass="shadow-lg" class="p-4">
  <PieChart {data} title="Distribution" />
</ChartContainer>

Accessibility​

  • The title prop is used as aria-label for the container
  • The description prop provides additional context via aria-describedby
  • The container has role="img" for proper screen reader announcement
  • Error state uses role="alert" for immediate announcement
  • When dataTable is set the data is also rendered as a table, visually hidden by default (showDataTable="sr-only")
On this page