Skip to main content

Documentation

ChartEmpty

Empty state component displayed when chart has no data

Tags: chart empty state placeholder

View Demo

The ChartEmpty component displays a friendly empty state when a chart has no data to show. It provides a consistent visual treatment across all chart types.

Import​

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

Basic Usage​

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

<ChartEmpty />

Props​

Prop Type Default Description
message string 'No data available' Empty state message
height number | string 400 Component height
class string - Additional CSS classes

Examples​

Custom Message​

<ChartEmpty message="No sales data for this period" />

Custom Height​

<ChartEmpty height={300} message="Start adding data to see your chart" />

Conditional Rendering​

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

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

{#if data.length === 0}
  <ChartEmpty message="No activity recorded" />
{:else}
  <LineChart {data} title="Activity" />
{/if}

With Custom Styling​

<ChartEmpty message="No results found" class="rounded-xl bg-muted/30" height={250} />

Accessibility​

  • Uses semantic HTML with appropriate styling
  • Message is readable by screen readers
  • Icon is decorative and hidden from assistive technology
On this page