Treemap chart

The treemap chart visualizes proportional data as nested rectangles. Each tile's area is sized according to its value, making it well suited for showing the relative size of categories or hierarchical structures.

Storage usage

TIP

This component is best used inside a Chart pane.

Props

nodes: FluxStatisticsChartTreemapNode[]
The (optionally nested) tiles to render.

tooltip?: boolean
Show a tooltip on hover. Disabled by default.

advanced-options?: EChartsOption
Escape-hatch for raw ECharts options merged on top of the Flux defaults.

Examples

Distributed

A single-series treemap with distributed colors.

Preview

Top countries

Code

<template>
    <FluxStatisticsChartPane
        icon="rectangle-history"
        title="Top countries"
        :aspect-ratio="2.4">
        <FluxStatisticsTreemapChart :nodes="nodes"/>
    </FluxStatisticsChartPane>
</template>

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

    const nodes: FluxStatisticsChartTreemapNode[] = [
        { name: 'NL', value: 4200 },
        { name: 'DE', value: 3100 },
        { name: 'BE', value: 1800 },
        { name: 'FR', value: 1500 },
        { name: 'UK', value: 1200 },
        { name: 'ES', value: 800 }
    ];
</script>

Custom colors

A treemap that uses a specific Flux color palette.

Preview

Browser share

Code

<template>
    <FluxStatisticsChartPane
        icon="rectangle-history"
        title="Browser share"
        :aspect-ratio="2.4">
        <FluxStatisticsTreemapChart :nodes="nodes"/>
    </FluxStatisticsChartPane>
</template>

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

    const nodes: FluxStatisticsChartTreemapNode[] = [
        { name: 'Chrome', value: 62, color: 'primary' },
        { name: 'Safari', value: 19, color: 'info' },
        { name: 'Edge', value: 10, color: 'success' },
        { name: 'Firefox', value: 6, color: 'warning' },
        { name: 'Other', value: 3, color: 'gray' }
    ];
</script>

Many categories

A treemap with a large number of small tiles.

Preview

Tag distribution

Code

<template>
    <FluxStatisticsChartPane
        icon="rectangle-history"
        title="Tag distribution"
        :aspect-ratio="2.4">
        <FluxStatisticsTreemapChart :nodes="nodes"/>
    </FluxStatisticsChartPane>
</template>

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

    const nodes: FluxStatisticsChartTreemapNode[] = [
        { name: 'Tag A', value: 220 },
        { name: 'Tag B', value: 180 },
        { name: 'Tag C', value: 160 },
        { name: 'Tag D', value: 140 },
        { name: 'Tag E', value: 120 },
        { name: 'Tag F', value: 100 },
        { name: 'Tag G', value: 85 },
        { name: 'Tag H', value: 70 },
        { name: 'Tag I', value: 55 },
        { name: 'Tag J', value: 40 },
        { name: 'Tag K', value: 30 },
        { name: 'Tag L', value: 20 }
    ];
</script>

Nested

A two-level treemap showing parent categories and their children.

Preview

Storage hierarchy

Code

<template>
    <FluxStatisticsChartPane
        icon="rectangle-history"
        title="Storage hierarchy"
        :aspect-ratio="2.4">
        <FluxStatisticsTreemapChart :nodes="nodes"/>
    </FluxStatisticsChartPane>
</template>

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

    const nodes: FluxStatisticsChartTreemapNode[] = [
        {
            name: 'Media',
            value: 1800,
            color: 'primary',
            children: [
                { name: 'Photos', value: 1100 },
                { name: 'Videos', value: 600 },
                { name: 'Music', value: 100 }
            ]
        },
        {
            name: 'Documents',
            value: 540,
            color: 'info',
            children: [
                { name: 'PDF', value: 280 },
                { name: 'Text', value: 180 },
                { name: 'Other', value: 80 }
            ]
        },
        {
            name: 'Apps',
            value: 320,
            color: 'success',
            children: [
                { name: 'System', value: 180 },
                { name: 'Installed', value: 140 }
            ]
        }
    ];
</script>

Two categories

A simple two-tile split for a high-level breakdown.

Preview

Revenue split

Code

<template>
    <FluxStatisticsChartPane
        icon="rectangle-history"
        title="Revenue split"
        :aspect-ratio="2.4">
        <FluxStatisticsTreemapChart :nodes="nodes"/>
    </FluxStatisticsChartPane>
</template>

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

    const nodes: FluxStatisticsChartTreemapNode[] = [
        { name: 'Subscriptions', value: 8200, color: 'primary' },
        { name: 'One-off', value: 3100, color: 'gray' }
    ];
</script>

With tooltip

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

Preview

Storage usage

Code

<template>
    <FluxStatisticsChartPane
        icon="rectangle-history"
        title="Storage usage"
        :aspect-ratio="2.4">
        <FluxStatisticsTreemapChart
            tooltip
            :nodes="nodes"/>
    </FluxStatisticsChartPane>
</template>

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

    const nodes: FluxStatisticsChartTreemapNode[] = [
        { name: 'Documents', value: 320 },
        { name: 'Photos', value: 540 },
        { name: 'Videos', value: 780 },
        { name: 'Music', value: 210 },
        { name: 'Apps', value: 150 },
        { name: 'System', value: 90 },
        { name: 'Other', value: 60 }
    ];
</script>