# Candlestick Chart

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

**Site index:** [https://muicharts.2plot.dev/llms.txt](https://muicharts.2plot.dev/llms.txt) — every page on this site, as Markdown.  
**Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites.  
**Sibling sites:** 13 more in The 2plot network — listed in the site index above.  
**Sitemap:** https://muicharts.2plot.dev/sitemap.xml  


---



### 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](/live-trading), which is a real-time
streaming chart.

```python
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.



```python
# 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.



```python
# 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).



```python
# 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.



```python
# 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.



```python
# 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`.



```python
# 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.



```python
# 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](/live-trading) — real-time streaming charts
- [BarChart](/barchart-basic) — the BarChart component family


---

*Source: /candlestick*