Bubble chart
The bubble chart extends a scatter chart with a third numeric dimension encoded in the radius of each marker. It is ideal for visualizing three-variable relationships such as price, volume, and market cap.
Market overview
TIP
This component is best used inside a Chart pane.
Props
series: FluxStatisticsChartBubbleSeries[]
The data series for the chart. Each point's `size` controls the marker radius.
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
Three dimensions
A bubble chart visualizing three variables at once.
Companies
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Companies"
:aspect-ratio="3">
<FluxStatisticsBubbleChart :series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
import { FluxStatisticsBubbleChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const series: FluxStatisticsChartBubbleSeries[] = [{
name: 'Market cap',
data: [
{ x: 12, y: 8, size: 24 },
{ x: 22, y: 14, size: 18 },
{ x: 32, y: 26, size: 12 },
{ x: 42, y: 18, size: 30 },
{ x: 52, y: 32, size: 22 },
{ x: 62, y: 24, size: 16 },
{ x: 72, y: 40, size: 28 }
]
}];
</script>Multiple series
Two grouped bubble series for category comparison.
Segment volume
Retail
Enterprise
<template>
<FluxStatisticsChartPane
icon="cubes"
title="Segment volume"
:aspect-ratio="3">
<FluxStatisticsBubbleChart :series="series"/>
<template #legend>
<FluxStatisticsLegend/>
</template>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
import { FluxStatisticsBubbleChart, FluxStatisticsChartPane, FluxStatisticsLegend } from '@flux-ui/statistics';
const series: FluxStatisticsChartBubbleSeries[] = [
{ name: 'Retail', data: [{ x: 10, y: 12, size: 20 }, { x: 25, y: 30, size: 18 }, { x: 40, y: 22, size: 24 }, { x: 55, y: 40, size: 28 }] },
{ name: 'Enterprise', data: [{ x: 12, y: 35, size: 14 }, { x: 28, y: 18, size: 32 }, { x: 44, y: 50, size: 12 }, { x: 60, y: 28, size: 22 }] }
];
</script>Compact
A more compact bubble chart with smaller markers.
Compact view
<template>
<FluxStatisticsChartPane
icon="circle"
title="Compact view"
:aspect-ratio="3">
<FluxStatisticsBubbleChart :series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
import { FluxStatisticsBubbleChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const series: FluxStatisticsChartBubbleSeries[] = [{
name: 'Items',
data: [
{ x: 10, y: 30, size: 6 }, { x: 20, y: 45, size: 8 }, { x: 30, y: 25, size: 10 },
{ x: 40, y: 50, size: 7 }, { x: 50, y: 35, size: 9 }, { x: 60, y: 55, size: 11 }
]
}];
</script>With icons
A bubble chart whose series carry icons in the legend.
Channel performance
Email
Search
<template>
<FluxStatisticsChartPane
icon="circle"
title="Channel performance"
:aspect-ratio="3">
<FluxStatisticsBubbleChart :series="series"/>
<template #legend>
<FluxStatisticsLegend/>
</template>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
import { FluxStatisticsBubbleChart, FluxStatisticsChartPane, FluxStatisticsLegend } from '@flux-ui/statistics';
const series: FluxStatisticsChartBubbleSeries[] = [
{
name: 'Email',
icon: 'paper-plane',
color: 'primary',
data: [{ x: 12, y: 30, size: 18 }, { x: 28, y: 40, size: 22 }, { x: 44, y: 22, size: 16 }, { x: 60, y: 48, size: 28 }]
},
{
name: 'Search',
icon: 'magnifying-glass',
color: 'success',
data: [{ x: 14, y: 18, size: 14 }, { x: 30, y: 28, size: 20 }, { x: 46, y: 40, size: 24 }, { x: 62, y: 32, size: 18 }]
}
];
</script>Dense
A bubble chart with many randomly distributed points.
Dense distribution
<template>
<FluxStatisticsChartPane
icon="circle"
title="Dense distribution"
:aspect-ratio="3">
<FluxStatisticsBubbleChart :series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBubblePoint, FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
import { FluxStatisticsBubbleChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const data: FluxStatisticsChartBubblePoint[] = Array.from({ length: 20 }, () => ({
x: Math.round(Math.random() * 100),
y: Math.round(Math.random() * 100),
size: 4 + Math.round(Math.random() * 24)
}));
const series: FluxStatisticsChartBubbleSeries[] = [{
name: 'Samples',
data
}];
</script>With tooltip
Enable the hover tooltip by setting the `tooltip` prop.
Market overview
<template>
<FluxStatisticsChartPane
icon="circle"
title="Market overview"
:aspect-ratio="3">
<FluxStatisticsBubbleChart
tooltip
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
import { FluxStatisticsBubbleChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const series: FluxStatisticsChartBubbleSeries[] = [
{
name: 'Group A',
data: [
{ x: 10, y: 30, size: 12 }, { x: 25, y: 45, size: 18 }, { x: 40, y: 28, size: 26 },
{ x: 55, y: 60, size: 22 }, { x: 70, y: 38, size: 30 }
]
},
{
name: 'Group B',
data: [
{ x: 15, y: 22, size: 15 }, { x: 30, y: 38, size: 12 }, { x: 45, y: 50, size: 24 },
{ x: 60, y: 32, size: 18 }, { x: 75, y: 55, size: 28 }
]
}
];
</script>With axis labels
Show X/Y axis labels and dashed split lines.
Market overview
<template>
<FluxStatisticsChartPane
icon="circle"
title="Market overview"
:aspect-ratio="3">
<FluxStatisticsBubbleChart
split-lines
x-axis-labels
y-axis-labels
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
import { FluxStatisticsBubbleChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const series: FluxStatisticsChartBubbleSeries[] = [
{
name: 'Group A',
data: [
{ x: 10, y: 30, size: 12 }, { x: 25, y: 45, size: 18 }, { x: 40, y: 28, size: 26 },
{ x: 55, y: 60, size: 22 }, { x: 70, y: 38, size: 30 }
]
},
{
name: 'Group B',
data: [
{ x: 15, y: 22, size: 15 }, { x: 30, y: 38, size: 12 }, { x: 45, y: 50, size: 24 },
{ x: 60, y: 32, size: 18 }, { x: 75, y: 55, size: 28 }
]
}
];
</script>