Mixed chart
The mixed chart combines multiple chart types in the same plot. Each series declares its own type (line, bar, or area), making it ideal for pairing a primary metric with a derived series such as volume against price, or actual against target.
TIP
Set series[].type on each series to mix chart types in a single plot.
Props
series: FluxStatisticsChartMixedSeries[]
The data series for the chart. Each series declares its own `type` (`line`, `bar`, or `area`) to combine chart types.
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
Line and bar
A bar chart of revenue with an overlaid line for orders.
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Sales overview"
:aspect-ratio="3">
<FluxStatisticsMixedChart
:labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
:series="series"/>
<template #legend>
<FluxStatisticsLegend/>
</template>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartMixedSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsLegend, FluxStatisticsMixedChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartMixedSeries[] = [
{ name: 'Revenue', type: 'bar', data: [3800, 4200, 4700, 5100, 5500, 6200, 6800] },
{ name: 'Orders', type: 'line', data: [110, 132, 142, 156, 164, 188, 205] }
];
</script>Area and line
An area chart of total users layered with a line for active users.
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="User activity"
:aspect-ratio="3">
<FluxStatisticsMixedChart
:labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartMixedSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsMixedChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartMixedSeries[] = [
{
name: 'Total users',
type: 'area',
data: [1200, 1450, 1620, 1880, 2100, 2350, 2600]
},
{
name: 'Active users',
type: 'line',
data: [820, 950, 1080, 1260, 1420, 1580, 1750]
}
];
</script>Three series
A combination of bar, line, and area series in one chart.
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Inventory turnover"
:aspect-ratio="3">
<FluxStatisticsMixedChart
:labels="['Q1-A', 'Q1-B', 'Q2-A', 'Q2-B', 'Q3-A', 'Q3-B']"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartMixedSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsMixedChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartMixedSeries[] = [
{ name: 'Stock in', type: 'bar', data: [420, 450, 380, 510, 460, 530] },
{ name: 'Stock out', type: 'line', data: [310, 380, 350, 420, 390, 470] },
{ name: 'Forecast', type: 'area', data: [340, 360, 360, 430, 410, 480] }
];
</script>With icons
A mixed chart whose series carry icons that surface in the legend and tooltip.
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Marketing mix"
:aspect-ratio="3">
<FluxStatisticsMixedChart
:labels="['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8']"
:series="series"/>
<template #legend>
<FluxStatisticsLegend/>
</template>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartMixedSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsLegend, FluxStatisticsMixedChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartMixedSeries[] = [
{ name: 'Spend', type: 'bar', icon: 'money-bill', color: 'primary', data: [2400, 2800, 3100, 3600, 4100, 4500, 5100, 5800] },
{ name: 'Reach', type: 'line', icon: 'users', color: 'info', data: [820, 1140, 1310, 1640, 1880, 2150, 2480, 2820] }
];
</script>Area with line
An area for open pipeline value layered with a line for closed-won deals.
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Pipeline value"
:aspect-ratio="3">
<FluxStatisticsMixedChart
:labels="['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6']"
:series="series"/>
<template #legend>
<FluxStatisticsLegend/>
</template>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartMixedSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsLegend, FluxStatisticsMixedChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartMixedSeries[] = [
{ name: 'Open pipeline', type: 'area', data: [42, 58, 72, 95, 114, 138] },
{ name: 'Won', type: 'line', color: 'success', data: [18, 26, 35, 48, 62, 78] }
];
</script>With tooltip
Enable the hover tooltip by setting the tooltip prop.
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Revenue and orders"
:aspect-ratio="3">
<FluxStatisticsMixedChart
tooltip
:labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartMixedSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsMixedChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartMixedSeries[] = [
{
name: 'Revenue',
type: 'bar',
data: [4200, 5300, 4900, 6200, 5800, 7100, 6800, 7500]
},
{
name: 'Orders',
type: 'line',
data: [120, 145, 132, 168, 158, 192, 184, 205]
}
];
</script>With axis labels
Show X/Y axis labels and dashed split lines.
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Revenue and orders"
:aspect-ratio="3">
<FluxStatisticsMixedChart
split-lines
x-axis-labels
y-axis-labels
:labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartMixedSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsMixedChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartMixedSeries[] = [
{
name: 'Revenue',
type: 'bar',
data: [4200, 5300, 4900, 6200, 5800, 7100, 6800, 7500]
},
{
name: 'Orders',
type: 'line',
data: [120, 145, 132, 168, 158, 192, 184, 205]
}
];
</script>