ChartError

The ChartError component displays error states for charts when data fetching or processing fails. It includes an optional retry button for user-initiated recovery.

Import​

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

Basic Usage​

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

<ChartError message="Failed to load chart data" />

Props​

Examples​

With Retry Button​

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

  async function fetchData() {
    // Retry logic
  }
</script>

<ChartError message="Network error occurred" onRetry={fetchData} />

Custom Height​

<ChartError message="Unable to process data" height={300} onRetry={handleRetry} />

Conditional Error Handling​

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

  let error = $state(null);
  let data = $state(null);

  async function loadData() {
    try {
      error = null;
      data = await fetchChartData();
    } catch (e) {
      error = e.message;
    }
  }
</script>

{#if error}
  <ChartError message={error} onRetry={loadData} />
{:else if data}
  <BarChart {data} title="Sales" />
{/if}

With Custom Styling​

<ChartError
  message="Service temporarily unavailable"
  class="rounded-xl"
  onRetry={() => location.reload()}
/>

Accessibility​

• Uses role="alert" for immediate screen reader announcement
• Error icon is decorative and hidden from assistive technology
• Retry button is focusable and keyboard accessible
• Error message is clearly associated with the alert region

Related Charts​

• ChartContainer - Wrapper with state handling
• ChartEmpty - Empty state component
• ChartSkeleton - Loading skeleton