Line chart

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

Active users

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

Single series

A single series line chart tracking one metric over time.

Preview

Page views

Page views

Code

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

        <template #legend>
            <FluxStatisticsLegend>
                <FluxStatisticsLegendItem
                    color="primary"
                    label="Page views"/>
            </FluxStatisticsLegend>
        </template>
    </FluxStatisticsChartPane>
</template>

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

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