Candlestick Chart

CandlestickChart OHLC demos: array and dataset formats, volume overlay, candle styling, support/resistance reference lines and click events.

Overview

Static OHLC candlestick charts for financial data in Plotly Dash. Built on the MUI X Charts Pro composition API (ChartDataProviderPro plus a custom SVG CandlePlot for candle bodies and wicks), so it does not need @mui/x-charts-premium. Basic charts work without a license; zoom, slider and toolbar are Pro features that require a MUI X Pro licenseKey.

Not the same as LiveTradingChart, which is a real-time streaming chart.

from dash_mui_charts import CandlestickChart

CandlestickChart(
    id='my-candles',
    series=[{
        'data': [
            [100, 110, 95, 105],   # [open, high, low, close]
            [105, 115, 100, 112],
        ],
        'upColor': '#4caf50',      # close >= open
        'downColor': '#f44336',    # close < open
    }],
    xAxis=[{'data': ['Mon', 'Tue']}],
)

Key props: showVolume + volumeHeightRatio (volume bars from volumeKey or a volume array), bodyWidthRatio (0–1, default 0.6), wickWidth (px), referenceLines, and a built-in OHLC hover tooltip with vertical crosshair. The y-axis domain is computed automatically.

Basic candlestick (array format)

OHLC data as [open, high, low, close] tuples.

# File: docs/candlestick/basic_example.py

from dash_mui_charts import CandlestickChart
from docs.candlestick._data import dates, ohlc_tuples

component = CandlestickChart(
    id='candle-basic',
    series=[{
        'data': ohlc_tuples,
        'upColor': '#4caf50',
        'downColor': '#f44336',
    }],
    xAxis=[{'data': dates, 'label': 'Date'}],
    yAxis=[{'label': 'Price ($)'}],
    grid={'horizontal': True},
    height=400,
)

:defaultExpanded: false :withExpandedButton: true

Dataset mode

Data as row objects with a datasetKeys mapping.

# File: docs/candlestick/dataset_example.py

from dash_mui_charts import CandlestickChart
from docs.candlestick._data import ohlc_dataset

component = CandlestickChart(
    id='candle-dataset',
    dataset=ohlc_dataset,
    series=[{
        'datasetKeys': {'open': 'open', 'high': 'high', 'low': 'low',
                        'close': 'close'},
        'upColor': '#26a69a',
        'downColor': '#ef5350',
    }],
    xAxis=[{'dataKey': 'date', 'label': 'Date'}],
    yAxis=[{'label': 'Price ($)'}],
    grid={'horizontal': True},
    height=400,
)

:defaultExpanded: false :withExpandedButton: true

Candlestick + volume

Volume bars overlaid below the candles (30% of chart height).

# File: docs/candlestick/volume_example.py

from dash_mui_charts import CandlestickChart
from docs.candlestick._data import ohlc_dataset

component = CandlestickChart(
    id='candle-volume',
    dataset=ohlc_dataset,
    series=[{
        'datasetKeys': {'open': 'open', 'high': 'high', 'low': 'low',
                        'close': 'close'},
        'volumeKey': 'volume',
        'upColor': '#4caf50',
        'downColor': '#f44336',
    }],
    xAxis=[{'dataKey': 'date'}],
    yAxis=[{'label': 'Price ($)'}],
    showVolume=True,
    volumeHeightRatio=0.3,
    grid={'horizontal': True},
    height=450,
)

:defaultExpanded: false :withExpandedButton: true

Custom styling

Wider candle bodies and thicker wicks with custom colors.

# File: docs/candlestick/styled_example.py

from dash_mui_charts import CandlestickChart
from docs.candlestick._data import dates, ohlc_tuples

component = CandlestickChart(
    id='candle-styled',
    series=[{
        'data': ohlc_tuples[:15],
        'upColor': '#00bcd4',
        'downColor': '#ff5722',
    }],
    xAxis=[{'data': dates[:15]}],
    yAxis=[{'label': 'Price'}],
    bodyWidthRatio=0.8,
    wickWidth=3,
    grid={'horizontal': True, 'vertical': True},
    height=380,
)

:defaultExpanded: false :withExpandedButton: true

Support & resistance lines

Reference lines marking key price levels.

# File: docs/candlestick/refs_example.py

from dash_mui_charts import CandlestickChart
from docs.candlestick._data import dates, ohlc_tuples

component = CandlestickChart(
    id='candle-refs',
    series=[{
        'data': ohlc_tuples,
        'upColor': '#4caf50',
        'downColor': '#f44336',
    }],
    xAxis=[{'data': dates}],
    yAxis=[{'label': 'Price ($)'}],
    referenceLines=[
        {
            'y': max(d[1] for d in ohlc_tuples),
            'label': 'Resistance',
            'labelAlign': 'end',
            'lineStyle': {'stroke': '#f44336', 'strokeWidth': 1.5,
                          'strokeDasharray': '6 4'},
            'labelStyle': {'fill': '#f44336', 'fontSize': 11},
        },
        {
            'y': min(d[2] for d in ohlc_tuples),
            'label': 'Support',
            'labelAlign': 'end',
            'lineStyle': {'stroke': '#4caf50', 'strokeWidth': 1.5,
                          'strokeDasharray': '6 4'},
            'labelStyle': {'fill': '#4caf50', 'fontSize': 11},
        },
        {
            'y': sum(d[3] for d in ohlc_tuples) / len(ohlc_tuples),
            'label': 'Avg Close',
            'labelAlign': 'start',
            'lineStyle': {'stroke': '#ff9800', 'strokeWidth': 1},
            'labelStyle': {'fill': '#ff9800', 'fontSize': 11},
        },
    ],
    grid={'horizontal': True},
    height=420,
)

:defaultExpanded: false :withExpandedButton: true

Click events

Click a candle to see its OHLC data — clickData carries dataIndex, label, open, high, low, close.

# File: docs/candlestick/click_example.py

import json

from dash import Input, Output, callback, html

from dash_mui_charts import CandlestickChart
from docs.candlestick._data import PRE_STYLE, dates, ohlc_tuples

component = html.Div(
    [
        CandlestickChart(
            id='candle-click',
            series=[{
                'data': ohlc_tuples[:15],
                'upColor': '#1976d2',
                'downColor': '#c62828',
            }],
            xAxis=[{'data': dates[:15]}],
            yAxis=[{'label': 'Price ($)'}],
            grid={'horizontal': True},
            height=380,
        ),
        html.P("clickData:", style={'fontSize': '12px',
                                    'color': 'var(--mantine-color-dimmed)',
                                    'marginTop': '12px',
                                    'marginBottom': '4px'}),
        html.Pre(id='candle-click-out', children='Click a candle...',
                 style=PRE_STYLE),
    ]
)


@callback(
    Output('candle-click-out', 'children'),
    Input('candle-click', 'clickData'),
    prevent_initial_call=True,
)
def show_candle_click(data):
    if not data:
        return 'Click a candle...'
    return json.dumps(data, indent=2)

:defaultExpanded: false :withExpandedButton: true

Tooltip disabled

Set the tooltip trigger to 'none' to hide the OHLC tooltip.

# File: docs/candlestick/no_tooltip_example.py

from dash_mui_charts import CandlestickChart
from docs.candlestick._data import dates, ohlc_tuples

component = CandlestickChart(
    id='candle-no-tooltip',
    series=[{
        'data': ohlc_tuples[:10],
        'upColor': '#7b1fa2',
        'downColor': '#e65100',
    }],
    xAxis=[{'data': dates[:10]}],
    tooltip={'trigger': 'none'},
    grid={'horizontal': True},
    height=300,
)

:defaultExpanded: false :withExpandedButton: true

Related pages

• LiveTradingChart — real-time streaming charts
• BarChart — the BarChart component family

Source: /candlestick