Flux

Appearance

Chart pane ​

The chart pane wraps a chart in a structured widget with a title, optional icon, and slots for a legend and toolbar. It controls the dimensions of the chart area through aspect ratio and min/max height constraints.

Sales by category
Electronics32%
Clothing24%
Books16%
Home & Garden12%
Sports10%
Other6%

Props

title?: string
The title shown in the header of the pane.

icon?: FluxIconName
An icon shown in the header of the pane.

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

max-height?: number
The maximum height of the chart area in pixels.

min-height?: number
The minimum height of the chart area in pixels.

Slots

default
The chart component to display.

legend
An optional legend shown below the chart.

toolbar
An optional toolbar shown at the bottom of the pane.

Examples ​

Basic

A chart pane with an area chart, legend, and icon.

Monthly revenue
Revenue

<template>
    <FluxStatisticsChartPane
        icon="chart-line"
        title="Monthly revenue"
        :aspect-ratio="2.5">
        <FluxStatisticsAreaChart :series="series"/>

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

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

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

With toolbar

A chart pane with an action button in the toolbar slot.

Monthly revenue
Revenue

<template>
    <FluxStatisticsChartPane
        icon="chart-line"
        title="Monthly revenue"
        :aspect-ratio="2.5">
        <FluxStatisticsAreaChart :series="series"/>

        <template #legend>
            <FluxStatisticsLegend>
                <FluxStatisticsLegendItem
                    color="primary"
                    label="Revenue"/>
            </FluxStatisticsLegend>
        </template>

        <template #toolbar>
            <FluxToolbarGroup>
                <FluxAction icon="arrow-down-to-line"/>
            </FluxToolbarGroup>
        </template>
    </FluxStatisticsChartPane>
</template>

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

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

Used components ​