Empty

The empty widget provides a placeholder to display inside a Chart pane or Base when there is no data to visualize. It supports an icon, title, description, and a default slot for action elements.

Revenue

No data yet

Once you record your first sale, a revenue chart will appear here.

TIP

Use this component to replace a chart whenever the data source returns an empty result, instead of rendering an empty chart.

Props

title?: string
The title of the empty state.

description?: string
A short description explaining why the chart is empty.

icon?: FluxIconName
An icon shown above the title.

Slots

default
Slot for action buttons or links.

Examples

With action

An empty state that includes a primary action button.

Preview

Pipeline

No deals in your pipeline

Add a deal to start tracking conversion rate and value.

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-line"
        title="Pipeline"
        :aspect-ratio="2">
        <FluxStatisticsEmpty
            icon="circle-plus"
            title="No deals in your pipeline"
            description="Add a deal to start tracking conversion rate and value.">
            <FluxPrimaryButton
                label="Create deal"
                icon-before="plus"/>
        </FluxStatisticsEmpty>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPrimaryButton } from '@flux-ui/components';
    import { FluxStatisticsChartPane, FluxStatisticsEmpty } from '@flux-ui/statistics';
</script>

Custom icon

An empty state with a topic-specific icon.

Preview

Notifications

All caught up

You have no new notifications. Anything new will show up here.

Code

<template>
    <FluxStatisticsChartPane
        icon="bell"
        title="Notifications"
        :aspect-ratio="2.4">
        <FluxStatisticsEmpty
            icon="bell"
            title="All caught up"
            description="You have no new notifications. Anything new will show up here."/>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import { FluxStatisticsChartPane, FluxStatisticsEmpty } from '@flux-ui/statistics';
</script>

Inside a chart pane

An empty state placed inside a chart pane to replace a missing chart.

Preview

Order distribution

Not enough data

Distribution becomes available after at least 25 orders.

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Order distribution"
        :aspect-ratio="2.4">
        <FluxStatisticsEmpty
            icon="chart-pie"
            title="Not enough data"
            description="Distribution becomes available after at least 25 orders."/>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import { FluxStatisticsChartPane, FluxStatisticsEmpty } from '@flux-ui/statistics';
</script>