Flux

Appearance

Area chart ​

The area chart renders a smooth area chart with a gradient fill. It uses sparkline mode by default, hiding axes and labels to present a clean, compact visualization.

Monthly revenue

TIP

This component is best used inside a Chart pane.

Props

series: FluxStatisticsChartAreaSeries[]
The data series for the chart.

labels?: string[]
X-axis category labels.

tooltip?: boolean
Show a tooltip on hover. Disabled by default.

x-axis-labels?: boolean
Show labels on the X-axis. Disabled by default.

y-axis-labels?: boolean
Show labels on the Y-axis. Disabled by default.

split-lines?: boolean
Show dashed split lines along value axes. Disabled by default.

advanced-options?: EChartsOption
Escape-hatch for raw ECharts options merged on top of the Flux defaults.

Examples ​

Multiple series

Comparing two data series in a single area chart.

Revenue comparison
This year
Last year

<template>
    <FluxStatisticsChartPane
        icon="chart-area"
        title="Revenue comparison"
        :aspect-ratio="2.5">
        <FluxStatisticsAreaChart :series="series"/>

        <template #legend>
            <FluxStatisticsLegend/>
        </template>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import type { FluxStatisticsChartAreaSeries } from '@flux-ui/types';
    import { FluxStatisticsAreaChart, FluxStatisticsChartPane, FluxStatisticsLegend } from '@flux-ui/statistics';

    const series: FluxStatisticsChartAreaSeries[] = [
        {
            name: 'This year',
            data: [4200, 5800, 4900, 7100, 6300, 8900, 7400, 9200, 8100, 10400, 9600, 11200]
        },
        {
            name: 'Last year',
            data: [3100, 4200, 3800, 5300, 4700, 6600, 5500, 7100, 6300, 8200, 7600, 9100]
        }
    ];
</script>

Single series

A single area series for tracking cumulative growth.

Cumulative signups

<template>
    <FluxStatisticsChartPane
        icon="chart-area"
        title="Cumulative signups"
        :aspect-ratio="3">
        <FluxStatisticsAreaChart :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const series: FluxStatisticsChartAreaSeries[] = [{
        name: 'Signups',
        data: [1200, 1850, 2640, 3320, 4180, 5240, 6480, 7920, 9150, 10580, 12120, 13860]
    }];
</script>

With icons

An area chart whose series carry icons that surface in the legend and tooltip.

Storage usage
Documents
Media

<template>
    <FluxStatisticsChartPane
        icon="chart-area"
        title="Storage usage"
        :aspect-ratio="3">
        <FluxStatisticsAreaChart :series="series"/>

        <template #legend>
            <FluxStatisticsLegend/>
        </template>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import type { FluxStatisticsChartAreaSeries } from '@flux-ui/types';
    import { FluxStatisticsAreaChart, FluxStatisticsChartPane, FluxStatisticsLegend } from '@flux-ui/statistics';

    const series: FluxStatisticsChartAreaSeries[] = [
        {
            name: 'Documents',
            icon: 'file-lines',
            color: 'primary',
            data: [120, 180, 230, 290, 360, 420, 510, 590]
        },
        {
            name: 'Media',
            icon: 'image',
            color: 'info',
            data: [200, 280, 380, 470, 580, 690, 820, 940]
        }
    ];
</script>

With tooltip

Enable the hover tooltip by setting the `tooltip` prop.

Monthly revenue

<template>
    <FluxStatisticsChartPane
        icon="chart-area"
        title="Monthly revenue"
        :aspect-ratio="3">
        <FluxStatisticsAreaChart
            tooltip
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const series: FluxStatisticsChartAreaSeries[] = [{
        name: 'Revenue',
        color: '#10b981',
        data: [4200, 5800, 4900, 7100, 6300, 8900, 7400, 9200, 8100, 10400, 9600, 11200]
    }];
</script>

With axis labels

Show X/Y axis labels and dashed split lines.

Monthly revenue

<template>
    <FluxStatisticsChartPane
        icon="chart-area"
        title="Monthly revenue"
        :aspect-ratio="3">
        <FluxStatisticsAreaChart
            split-lines
            x-axis-labels
            y-axis-labels
            :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']"
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const series: FluxStatisticsChartAreaSeries[] = [{
        name: 'Revenue',
        color: '#10b981',
        data: [4200, 5800, 4900, 7100, 6300, 8900, 7400, 9200, 8100, 10400, 9600, 11200]
    }];
</script>