Scatter chart
The scatter chart plots discrete data points on a two-dimensional grid. It is the preferred chart type for visualizing correlations between two numeric variables.
Order distribution
TIP
This component is best used inside a Chart pane.
Props
series: FluxStatisticsChartScatterSeries[]
The data series for the chart.
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
Correlation
A scatter chart highlighting the correlation between two variables.
Price vs. rating
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Price vs. rating"
:aspect-ratio="3">
<FluxStatisticsScatterChart :series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsScatterChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartScatterSeries[] = [{
name: 'Products',
data: [
{ x: 15, y: 3.2 }, { x: 22, y: 3.6 }, { x: 28, y: 3.9 }, { x: 35, y: 4.1 },
{ x: 42, y: 4.3 }, { x: 55, y: 4.5 }, { x: 68, y: 4.6 }, { x: 80, y: 4.7 }, { x: 95, y: 4.8 }
]
}];
</script>Multiple series
Two overlapping scatter series distinguished by color.
Customer segments
New
Returning
VIP
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Customer segments"
:aspect-ratio="3">
<FluxStatisticsScatterChart :series="series"/>
<template #legend>
<FluxStatisticsLegend/>
</template>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsLegend, FluxStatisticsScatterChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartScatterSeries[] = [
{ name: 'New', data: [{ x: 10, y: 14 }, { x: 20, y: 22 }, { x: 30, y: 18 }, { x: 40, y: 26 }, { x: 50, y: 33 }] },
{ name: 'Returning', data: [{ x: 12, y: 30 }, { x: 25, y: 38 }, { x: 38, y: 41 }, { x: 48, y: 47 }, { x: 60, y: 55 }] },
{ name: 'VIP', data: [{ x: 18, y: 65 }, { x: 32, y: 72 }, { x: 44, y: 80 }, { x: 56, y: 85 }, { x: 70, y: 92 }] }
];
</script>With markers
A scatter chart with larger, hollow markers for sparse data.
Sparse sample
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Sparse sample"
:aspect-ratio="3">
<FluxStatisticsScatterChart
:advanced-options="advancedOptions"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { EChartsOption } from 'echarts/core';
import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsScatterChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartScatterSeries[] = [{
name: 'Samples',
data: [
{ x: 20, y: 30 }, { x: 40, y: 60 }, { x: 60, y: 35 }, { x: 80, y: 70 }, { x: 100, y: 50 }
]
}];
const advancedOptions: EChartsOption = {
series: [{ type: 'scatter', symbolSize: 18 }]
};
</script>Clustered
A scatter chart with three visually distinct clusters.
Cluster overview
Cluster A
Cluster B
Cluster C
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Cluster overview"
:aspect-ratio="3">
<FluxStatisticsScatterChart :series="series"/>
<template #legend>
<FluxStatisticsLegend/>
</template>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsLegend, FluxStatisticsScatterChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartScatterSeries[] = [
{
name: 'Cluster A',
color: 'primary',
data: [
{ x: 8, y: 12 }, { x: 10, y: 14 }, { x: 12, y: 11 }, { x: 14, y: 15 }, { x: 11, y: 17 }, { x: 13, y: 13 }
]
},
{
name: 'Cluster B',
color: 'success',
data: [
{ x: 32, y: 30 }, { x: 35, y: 33 }, { x: 38, y: 28 }, { x: 36, y: 35 }, { x: 40, y: 31 }, { x: 34, y: 36 }
]
},
{
name: 'Cluster C',
color: 'warning',
data: [
{ x: 58, y: 56 }, { x: 60, y: 60 }, { x: 62, y: 54 }, { x: 64, y: 58 }, { x: 66, y: 62 }, { x: 59, y: 64 }
]
}
];
</script>With icons
A scatter chart whose series carry icons in the legend.
Channel scatter
Email
Search
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Channel scatter"
:aspect-ratio="3">
<FluxStatisticsScatterChart :series="series"/>
<template #legend>
<FluxStatisticsLegend/>
</template>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsLegend, FluxStatisticsScatterChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartScatterSeries[] = [
{
name: 'Email',
icon: 'paper-plane',
color: 'primary',
data: [{ x: 10, y: 20 }, { x: 20, y: 30 }, { x: 30, y: 25 }, { x: 40, y: 35 }, { x: 50, y: 32 }]
},
{
name: 'Search',
icon: 'magnifying-glass',
color: 'success',
data: [{ x: 12, y: 45 }, { x: 22, y: 50 }, { x: 32, y: 48 }, { x: 42, y: 55 }, { x: 52, y: 60 }]
}
];
</script>With tooltip
Enable the hover tooltip by setting the `tooltip` prop.
Order distribution
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Order distribution"
:aspect-ratio="3">
<FluxStatisticsScatterChart
tooltip
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsScatterChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartScatterSeries[] = [
{
name: 'Group A',
data: [
{ x: 12, y: 32 }, { x: 18, y: 45 }, { x: 25, y: 38 }, { x: 31, y: 52 },
{ x: 38, y: 41 }, { x: 44, y: 60 }, { x: 52, y: 49 }, { x: 60, y: 65 }
]
},
{
name: 'Group B',
data: [
{ x: 10, y: 22 }, { x: 16, y: 30 }, { x: 23, y: 27 }, { x: 29, y: 38 },
{ x: 36, y: 33 }, { x: 42, y: 45 }, { x: 50, y: 39 }, { x: 58, y: 52 }
]
}
];
</script>With axis labels
Show X/Y axis labels and dashed split lines.
Order distribution
<template>
<FluxStatisticsChartPane
icon="chart-line"
title="Order distribution"
:aspect-ratio="3">
<FluxStatisticsScatterChart
split-lines
x-axis-labels
y-axis-labels
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
import { FluxStatisticsChartPane, FluxStatisticsScatterChart } from '@flux-ui/statistics';
const series: FluxStatisticsChartScatterSeries[] = [
{
name: 'Group A',
data: [
{ x: 12, y: 32 }, { x: 18, y: 45 }, { x: 25, y: 38 }, { x: 31, y: 52 },
{ x: 38, y: 41 }, { x: 44, y: 60 }, { x: 52, y: 49 }, { x: 60, y: 65 }
]
},
{
name: 'Group B',
data: [
{ x: 10, y: 22 }, { x: 16, y: 30 }, { x: 23, y: 27 }, { x: 29, y: 38 },
{ x: 36, y: 33 }, { x: 42, y: 45 }, { x: 50, y: 39 }, { x: 58, y: 52 }
]
}
];
</script>