Sparkline

The sparkline is a generic mini-chart designed for inline use, for example next to a KPI value, inside a table cell, or in a tight dashboard slot. It supports line, bar, and area variants and a single explicit color.

Active users

This week

1,284

+8.4%

Props

series: EChartsOption['series']
The data series for the sparkline.

variant?: 'line' | 'bar' | 'area'
The visual style of the sparkline.
Default: 'line'

color?: FluxColor | `#${string}`
A single color used for the sparkline. Accepts a FluxColor or a custom hex color.

options?: EChartsOption
Additional ECharts options to merge with the defaults.

Examples

Line variant

A line sparkline showing a quick trend.

Preview

Code

<template>
    <div style="width: 100%; max-width: 240px">
        <FluxStatisticsSparkline
            variant="line"
            color="primary"
            :series="series"/>
    </div>
</template>

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

    const series = [{
        name: 'Revenue',
        data: [22, 28, 26, 32, 31, 38, 42, 41, 48, 52]
    }];
</script>

Bar variant

A bar sparkline emphasizing discrete values.

Preview

Code

<template>
    <div style="width: 100%; max-width: 240px">
        <FluxStatisticsSparkline
            variant="bar"
            color="info"
            :series="series"/>
    </div>
</template>

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

    const series = [{
        name: 'Sales',
        data: [12, 18, 14, 22, 20, 26, 24, 30, 28, 34]
    }];
</script>

Area variant

An area sparkline with a soft gradient fill.

Preview

Code

<template>
    <div style="width: 100%; max-width: 240px">
        <FluxStatisticsSparkline
            variant="area"
            color="success"
            :series="series"/>
    </div>
</template>

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

    const series = [{
        name: 'Traffic',
        data: [180, 210, 240, 220, 280, 310, 290, 340, 360, 400]
    }];
</script>

Inside a metric

A sparkline displayed alongside a metric value.

Preview

MRR

This month

$24,820

+12.3%

Orders

This month

2,142

-4.1%

Signups

This month

318

+6.7%

Code

<template>
    <FluxStatisticsGrid
        :xs="1"
        :md="3"
        style="min-width: 100%">
        <FluxStatisticsMetric
            icon="arrow-trend-up"
            title="MRR"
            label="This month"
            value="$24,820"
            :change="{ color: 'success', icon: 'arrow-trend-up', value: '+12.3%' }">
            <FluxStatisticsSparkline
                color="success"
                variant="area"
                :series="mrr"/>
        </FluxStatisticsMetric>

        <FluxStatisticsMetric
            icon="cart-shopping"
            title="Orders"
            label="This month"
            value="2,142"
            :change="{ color: 'danger', icon: 'arrow-trend-down', value: '-4.1%' }">
            <FluxStatisticsSparkline
                color="danger"
                variant="line"
                :series="orders"/>
        </FluxStatisticsMetric>

        <FluxStatisticsMetric
            icon="user-plus"
            title="Signups"
            label="This month"
            value="318"
            :change="{ color: 'success', icon: 'arrow-trend-up', value: '+6.7%' }">
            <FluxStatisticsSparkline
                color="primary"
                variant="line"
                :series="signups"/>
        </FluxStatisticsMetric>
    </FluxStatisticsGrid>
</template>

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

    const mrr = [{ name: 'MRR', data: [18, 19, 20, 21, 22, 23, 24, 25] }];
    const orders = [{ name: 'Orders', data: [2400, 2380, 2320, 2280, 2210, 2180, 2160, 2142] }];
    const signups = [{ name: 'Signups', data: [42, 48, 54, 51, 58, 66, 72, 80] }];
</script>