Every Semiotic chart handles empty data and loading states out of the box. These states work at two levels: directly on individual chart components, and at theChartContainer level for dashboard cards.
Empty State
When data is an empty array, every chart automatically displays a centered "No data available" message. Customize this with the emptyContent prop, or suppress it entirely withemptyContent={false}.
Custom Content
No sales data
Try adjusting the date range
Suppressed
LineChart
LineChart: No data provided. Pass a non-empty array to the data prop.
JSX
// Default empty state — "No data available" <LineChart data={[]} /> // Custom empty content <BarChart data={[]} categoryAccessor="category" valueAccessor="value" emptyContent={<div>No sales data for this period</div>} /> // Suppress empty state entirely <LineChart data={[]} emptyContent={false} />
Loading State
Set loading={true} on any chart to show a pulsing skeleton placeholder. This works at both the chart level and theChartContainer level.
JSX
// Chart-level loading — skeleton rendered by the chart itself <LineChart data={null} loading={isLoading} /> // Container-level loading — skeleton replaces entire children <ChartContainer title="CPU Load" loading={isLoading}> <LineChart data={data} xAccessor="x" yAccessor="y" /> </ChartContainer> // Choose based on your data-fetching pattern: // • Chart-level: each chart loads independently // • Container-level: single fetch for the whole dashboard card
Custom Loading UI (loadingContent)
The default skeleton is a stack of pulsing bars. For branded loading states, progress text, or a spinner, pass aloadingContent ReactNode — it renders in place of the skeleton, wrapped in the same sized container so the chart slot stays reserved. Pass loadingContent={false}to suppress the loading UI entirely (an outer wrapper's loading state takes over).
JSX
// Branded loading text <LineChart data={null} loading={isLoading} loadingContent={<div>Fetching analytics…</div>} /> // Spinner instead of the skeleton <BarChart data={null} loading={isLoading} loadingContent={<MySpinner />} /> // Let the parent component handle loading entirely <LineChart loading={isLoading} loadingContent={false} />
Error State
ChartContainer provides error display and error boundary support. Set error to show a message, or errorBoundary to catch render crashes.
Failed to fetch data from API.
JSX
// Error message <ChartContainer title="CPU Load" error="Failed to fetch data from API."> <LineChart data={data} xAccessor="x" yAccessor="y" /> </ChartContainer> // Error boundary — catches render crashes <ChartContainer title="CPU Load" errorBoundary> <LineChart data={data} xAccessor="x" yAccessor="y" /> </ChartContainer>
- Chart Container — production shell with title, toolbar, export, and status
- Chart Modes — primary, context, and sparkline rendering modes