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: ApexOptions['series']
The data series for the chart, compatible with the ApexCharts series format.

aspect-ratio?: number
The aspect ratio of the chart.

options?: ApexOptions
Additional ApexCharts options to merge with the defaults.

Examples

Multiple series

Comparing two data series in a single area chart.

Preview

Revenue comparison

This year

Last year

Code

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

        <template #legend>
            <FluxStatisticsLegend>
                <FluxStatisticsLegendItem
                    color="primary"
                    label="This year"/>
                <FluxStatisticsLegendItem
                    color="#10b981"
                    label="Last year"/>
            </FluxStatisticsLegend>
        </template>
    </FluxStatisticsChartPane>
</template>

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

    const series = [
        {
            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>