Bar chart

The bar chart renders vertical grouped bars with rounded corners. It supports multiple series and shared tooltips.

Orders per month

TIP

This component is best used inside a Chart pane.

Props

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

Multiple series

A grouped bar chart comparing two data series side by side.

Preview

Orders comparison

This year

Last year

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="Orders comparison"
        :aspect-ratio="2.5">
        <FluxStatisticsBarChart
            :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']"
            :series="series"/>

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

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

    const series: FluxStatisticsChartBarSeries[] = [
        {
            name: 'This year',
            icon: 'calendar-check',
            data: [320, 410, 380, 510, 470, 620, 540, 680, 590, 730, 690, 810]
        },
        {
            name: 'Last year',
            icon: 'calendar',
            data: [260, 340, 310, 430, 390, 520, 450, 570, 490, 620, 580, 700]
        }
    ];
</script>

Single series

A single series bar chart with a fixed color.

Preview

Weekly checkouts

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="Weekly checkouts"
        :aspect-ratio="2.5">
        <FluxStatisticsBarChart
            :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const series: FluxStatisticsChartBarSeries[] = [{
        name: 'Checkouts',
        color: 'success',
        data: [240, 320, 290, 380, 410, 520, 460]
    }];
</script>

Horizontal

A horizontal bar chart configured through `advancedOptions`.

Preview

Top countries

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="Top countries"
        :aspect-ratio="2">
        <FluxStatisticsBarChart
            :advanced-options="advancedOptions"
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import type { EChartsOption } from 'echarts/core';
    import type { FluxStatisticsChartBarSeries } from '@flux-ui/types';
    import { FluxStatisticsBarChart, FluxStatisticsChartPane } from '@flux-ui/statistics';

    const countries = ['Netherlands', 'Germany', 'Belgium', 'France', 'United Kingdom', 'Spain'];

    const series: FluxStatisticsChartBarSeries[] = [{
        name: 'Orders',
        data: [4200, 3100, 1800, 1500, 1200, 800]
    }];

    const advancedOptions: EChartsOption = {
        xAxis: {
            type: 'value',
            show: true,
            axisLabel: { show: true, color: 'var(--foreground-secondary)' }
        },
        yAxis: {
            type: 'category',
            show: true,
            data: countries,
            axisLabel: { show: true, color: 'var(--foreground-secondary)' }
        }
    };
</script>

With tooltip

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

Preview

Orders per month

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="Orders per month"
        :aspect-ratio="2.5">
        <FluxStatisticsBarChart
            tooltip
            :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']"
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const series: FluxStatisticsChartBarSeries[] = [{
        name: 'Orders',
        data: [320, 410, 380, 510, 470, 620, 540, 680, 590, 730, 690, 810]
    }];
</script>

With axis labels

Show X/Y axis labels and dashed split lines.

Preview

Orders per month

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="Orders per month"
        :aspect-ratio="2.5">
        <FluxStatisticsBarChart
            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 { FluxStatisticsChartBarSeries } from '@flux-ui/types';
    import { FluxStatisticsBarChart, FluxStatisticsChartPane } from '@flux-ui/statistics';

    const series: FluxStatisticsChartBarSeries[] = [{
        name: 'Orders',
        data: [320, 410, 380, 510, 470, 620, 540, 680, 590, 730, 690, 810]
    }];
</script>