Flux

Appearance

Line chart ​

The line chart renders a smooth line chart in sparkline mode, hiding axes and labels for a compact presentation.

Active users
This year
Last year

TIP

This component is best used inside a Chart pane.

Props

series: FluxStatisticsChartLineSeries[]
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 ​

Single series

A single series line chart tracking one metric over time.

Page views
Page views

<template>
    <FluxStatisticsChartPane
        icon="chart-line"
        title="Page views"
        :aspect-ratio="3">
        <FluxStatisticsLineChart :series="series"/>

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

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

    const series: FluxStatisticsChartLineSeries[] = [{
        name: 'Page views',
        data: [8400, 9200, 7800, 10500, 9100, 11300, 10200, 12600, 11400, 13800, 12900, 15200]
    }];
</script>

With labels

A line chart with month names on the X-axis through the `labels` prop.

Quarterly conversions

<template>
    <FluxStatisticsChartPane
        icon="chart-line"
        title="Quarterly conversions"
        :aspect-ratio="3">
        <FluxStatisticsLineChart
            x-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 { FluxStatisticsChartLineSeries } from '@flux-ui/types';
    import { FluxStatisticsChartPane, FluxStatisticsLineChart } from '@flux-ui/statistics';

    const series: FluxStatisticsChartLineSeries[] = [{
        name: 'Conversions',
        data: [124, 168, 145, 192, 178, 218, 204, 256, 232, 284, 262, 312]
    }];
</script>

With icons

A line chart whose series carry icons that surface in the legend and tooltip.

Channel performance
Email
Search
Social

<template>
    <FluxStatisticsChartPane
        icon="chart-line"
        title="Channel performance"
        :aspect-ratio="3">
        <FluxStatisticsLineChart :series="series"/>

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

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

    const series: FluxStatisticsChartLineSeries[] = [
        {
            name: 'Email',
            color: 'primary',
            icon: 'paper-plane',
            data: [320, 410, 380, 510, 470, 620, 540, 680]
        },
        {
            name: 'Search',
            color: 'success',
            icon: 'magnifying-glass',
            data: [180, 240, 215, 290, 270, 360, 320, 410]
        },
        {
            name: 'Social',
            color: 'warning',
            icon: 'message',
            data: [90, 132, 118, 165, 150, 198, 180, 232]
        }
    ];
</script>

With tooltip

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

Active users
This year
Last year

<template>
    <FluxStatisticsChartPane
        icon="chart-line"
        title="Active users"
        :aspect-ratio="3">
        <FluxStatisticsLineChart
            tooltip
            :series="series"/>

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

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

    const series: FluxStatisticsChartLineSeries[] = [
        {
            name: 'This year',
            color: '#f97316',
            icon: 'arrow-trend-up',
            data: [2100, 2800, 3400, 2900, 4100, 3700, 4600, 5200, 4800, 5900, 5400, 6300]
        },
        {
            name: 'Last year',
            color: '#0ea5e9',
            icon: 'arrow-trend-down',
            data: [1800, 2200, 2600, 2300, 3200, 2900, 3500, 3900, 3600, 4400, 4100, 4800]
        }
    ];
</script>

With axis labels

Show X/Y axis labels and dashed split lines.

Monthly revenue

<template>
    <FluxStatisticsChartPane
        icon="chart-line"
        title="Monthly revenue"
        :aspect-ratio="3">
        <FluxStatisticsLineChart
            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 { FluxStatisticsChartLineSeries } from '@flux-ui/types';
    import { FluxStatisticsChartPane, FluxStatisticsLineChart } from '@flux-ui/statistics';

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