Candlestick chart

The candlestick chart renders OHLC (open, high, low, close) data points using a green-on-success / red-on-danger color scheme. It is purpose-built for financial price data, but works equally well for any range-over-time series.

FLUX / USD

TIP

This component is best used inside a Chart pane.

Props

series: FluxStatisticsChartCandlestickSeries[]
The OHLC data series. Each point holds named `open`, `close`, `low`, and `high` values.

labels?: string[]
X-axis category labels (typically dates). If omitted, the `label` field on each point is used.

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

OHLC

A typical candlestick chart with daily OHLC values.

PreviewCode

Monthly close

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="Monthly close"
        :aspect-ratio="3">
        <FluxStatisticsCandlestickChart :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    const data: FluxStatisticsChartCandlestickPoint[] = months.map((label, i) => {
        const open = 100 + i * 6 + Math.round(Math.random() * 8);
        const close = open + Math.round((Math.random() - 0.5) * 14);
        const high = Math.max(open, close) + Math.round(Math.random() * 6);
        const low = Math.min(open, close) - Math.round(Math.random() * 6);

        return { label, open, close, low, high };
    });

    const series: FluxStatisticsChartCandlestickSeries[] = [{
        name: 'OHLC',
        data
    }];
</script>

Short range

A short-range candlestick chart for intraday data.

PreviewCode

Intraday

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="Intraday"
        :aspect-ratio="3">
        <FluxStatisticsCandlestickChart :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const data: FluxStatisticsChartCandlestickPoint[] = Array.from({ length: 8 }, (_, i) => {
        const base = 200 + i * 3;
        const open = base + Math.round(Math.random() * 4);
        const close = open + Math.round((Math.random() - 0.5) * 6);
        const high = Math.max(open, close) + Math.round(Math.random() * 3);
        const low = Math.min(open, close) - Math.round(Math.random() * 3);

        return { label: `${9 + i}:00`, open, close, low, high };
    });

    const series: FluxStatisticsChartCandlestickSeries[] = [{
        name: 'Intraday',
        data
    }];
</script>

Volatile

A candlestick chart showing a more volatile price series.

PreviewCode

Volatile series

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="Volatile series"
        :aspect-ratio="3">
        <FluxStatisticsCandlestickChart :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const data: FluxStatisticsChartCandlestickPoint[] = Array.from({ length: 16 }, (_, i) => {
        const open = 80 + Math.round(Math.random() * 30);
        const close = open + Math.round((Math.random() - 0.5) * 36);
        const high = Math.max(open, close) + Math.round(Math.random() * 12);
        const low = Math.min(open, close) - Math.round(Math.random() * 12);

        return { label: `Day ${i + 1}`, open, close, low, high };
    });

    const series: FluxStatisticsChartCandlestickSeries[] = [{
        name: 'Volatile',
        data
    }];
</script>

Bull run

A predominantly green candlestick series trending upward.

PreviewCode

Bull run

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="Bull run"
        :aspect-ratio="3">
        <FluxStatisticsCandlestickChart :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    let base = 100;
    const data: FluxStatisticsChartCandlestickPoint[] = Array.from({ length: 12 }, (_, i) => {
        const open = base + Math.round(Math.random() * 4);
        const close = open + 4 + Math.round(Math.random() * 8);
        const high = close + Math.round(Math.random() * 6);
        const low = open - Math.round(Math.random() * 3);
        base = close;

        return { label: `D${i + 1}`, open, close, low, high };
    });

    const series: FluxStatisticsChartCandlestickSeries[] = [{
        name: 'Trend',
        data
    }];
</script>

Custom colors

A candlestick chart with branded up and down colors.

PreviewCode

Branded series

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="Branded series"
        :aspect-ratio="3">
        <FluxStatisticsCandlestickChart :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const series: FluxStatisticsChartCandlestickSeries[] = [{
        name: 'Price',
        positiveColor: '#3b82f6',
        negativeColor: '#f97316',
        data: [
            { label: 'W1', open: 200, close: 215, low: 195, high: 220 },
            { label: 'W2', open: 215, close: 208, low: 204, high: 222 },
            { label: 'W3', open: 208, close: 230, low: 205, high: 234 },
            { label: 'W4', open: 230, close: 225, low: 218, high: 238 },
            { label: 'W5', open: 225, close: 246, low: 222, high: 250 },
            { label: 'W6', open: 246, close: 240, low: 234, high: 252 }
        ]
    }];
</script>

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

PreviewCode

FLUX / USD

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="FLUX / USD"
        :aspect-ratio="3">
        <FluxStatisticsCandlestickChart
            tooltip
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const series: FluxStatisticsChartCandlestickSeries[] = [{
        name: 'Price',
        data: [
            { label: '2026-01-01', open: 102, close: 105, low: 100, high: 108 },
            { label: '2026-01-02', open: 105, close: 109, low: 103, high: 110 },
            { label: '2026-01-03', open: 109, close: 107, low: 106, high: 112 },
            { label: '2026-01-04', open: 107, close: 112, low: 105, high: 114 },
            { label: '2026-01-05', open: 112, close: 115, low: 110, high: 116 },
            { label: '2026-01-06', open: 115, close: 113, low: 112, high: 118 },
            { label: '2026-01-07', open: 113, close: 118, low: 111, high: 119 },
            { label: '2026-01-08', open: 118, close: 120, low: 116, high: 122 }
        ]
    }];
</script>

With axis labels

Show X/Y axis labels and dashed split lines.

PreviewCode

FLUX / USD

<template>
    <FluxStatisticsChartPane
        icon="chart-bar"
        title="FLUX / USD"
        :aspect-ratio="3">
        <FluxStatisticsCandlestickChart
            split-lines
            x-axis-labels
            y-axis-labels
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const series: FluxStatisticsChartCandlestickSeries[] = [{
        name: 'Price',
        data: [
            { label: '2026-01-01', open: 102, close: 105, low: 100, high: 108 },
            { label: '2026-01-02', open: 105, close: 109, low: 103, high: 110 },
            { label: '2026-01-03', open: 109, close: 107, low: 106, high: 112 },
            { label: '2026-01-04', open: 107, close: 112, low: 105, high: 114 },
            { label: '2026-01-05', open: 112, close: 115, low: 110, high: 116 },
            { label: '2026-01-06', open: 115, close: 113, low: 112, high: 118 },
            { label: '2026-01-07', open: 113, close: 118, low: 111, high: 119 },
            { label: '2026-01-08', open: 118, close: 120, low: 116, high: 122 }
        ]
    }];
</script>

Charts

Details table

Legend

Candlestick chart

Props

Examples

OHLC

Short range

Volatile

Bull run

Custom colors

With tooltip

With axis labels

Candlestick chart ​

Props

Examples ​

OHLC

Short range

Volatile

Bull run

Custom colors

With tooltip

With axis labels

Candlestick chart

Examples