API Reference
Every prop of all 13 dash-mui-charts components — generated from the components' own metadata, so it always matches the installed version.
Overview
The tables below are generated from each component's own metadata (the docstrings dash-generate-components builds from the React prop types), so they always match the installed version. Interaction props (clickData, highlightedItem, hoverIndex, zoomData, …) are Dash callback outputs; controlled props (highlightedItem, expandedItems, value, …) also work as inputs.
Pro-tier features (zoom, sliders, toolbars, Heatmap, TreeViewPro extras) require a MUI X Pro license key passed via each component's licenseKey prop.
LineChart
Line/area charts with biaxial axes, reference lines, and Pro zoom/pan, slider, brush and toolbar. Demos →
| Name | Type | Description | ||
|---|---|---|---|---|
| id | string; optional | The ID used to identify this component in Dash callbacks. | ||
| axisHighlight | dict; optional | Axis highlight configuration. Controls how axes are highlighted on hover. - x (string): 'none', 'line', or 'band' - y (string): 'none' or 'line'. | ||
| brushConfig | dict; optional | Brush configuration for range selection. Object with: - enabled (boolean): Whether brush interaction is enabled (default: False) - preventTooltip (boolean): Prevent tooltip during brush (default: True) - preventHighlight (boolean): Prevent highlight during brush (default: True). | ||
| brushData | dict; optional | Current brush selection data. Read-only output property. Contains pixel coordinates of the brush selection. | ||
| brushOverlay | a value equal to: 'none', 'default', 'values'; optional | Type of brush overlay to display: - 'none': No overlay (default) - 'default': Standard MUI selection rectangle - 'values': Custom overlay showing start/end values with difference and percentage. | ||
| brushSeriesId | string; optional | Series ID for the custom 'values' brush overlay to read data from. If not specified, uses the first series. | ||
| clickData | dict; optional | Data from the most recent click event. Read-only output property. Contains type ('axis', 'mark', 'line', 'area'), relevant IDs/values, and timestamp. | ||
| colors | list of strings; optional | Array of colors for the series palette. | ||
| grid | dict; optional | Grid configuration. Object with vertical and horizontal boolean keys. | ||
| height | number; optional | Chart height in pixels. Default is 400. | ||
| hideLegend | boolean; optional | If True, the legend is hidden. | ||
| highlightedAxis | list of dicts; optional | Controlled axis highlight state. Array of objects specifying which axis values are highlighted. Each object has: - axisId (string\ | number): The axis identifier - dataIndex (number): The data index to highlight Set to empty array [] to clear highlights. | |
| highlightedItem | dict; optional | Controlled item highlight state. Specifies which data point is highlighted. Object with: - seriesId (string): The series identifier - dataIndex (number): The data index within the series (optional) Set to None to clear highlight. | ||
| initialZoom | list of dicts; optional | Initial zoom state for uncontrolled mode. Array of objects with: - axisId (string): The axis identifier - start (number): Start position (0-100) - end (number): End position (0-100). | ||
| licenseKey | string; optional | MUI X Pro license key. Required to enable Pro features like zoom/pan without watermarks. Get your license key from https://mui.com/x/introduction/licensing/. | ||
| loading | boolean; optional | If True, a loading overlay is displayed. | ||
| margin | dict; optional | Chart margins in pixels. Object with top, right, bottom, left keys. | ||
| n_clicks | number; optional | Number of times the chart has been clicked. Increments on each click event. | ||
| referenceLines | list of dicts; optional | Array of reference line configurations. Each reference line can be vertical (x) or horizontal (y). - x (string\ | number): X-axis value for a vertical reference line - y (number): Y-axis value for a horizontal reference line - axisId (string): The axis ID to use for the reference value - label (string): Label text displayed along the reference line - labelAlign (string): 'start', 'middle', or 'end' alignment - lineStyle (object): CSS style object for the line (e.g. {stroke: 'red', strokeDasharray: '4 4'}) - labelStyle (object): CSS style object for the label - spacing (number\ | object): Space around label in px, or {x, y} object. |
| series | list of dicts; optional | Array of series configurations. Each series represents a line in the chart. Each series object can have: - id (string): Unique identifier for the series - data (array of numbers): Y-axis values, supports None for gaps - label (string): Label shown in legend and tooltip - color (string): Custom color for this series - area (boolean): Fill area under the line - stack (string): Stack identifier for stacked area charts - curve (string): Interpolation method - 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepBefore', 'stepAfter', 'catmullRom', 'bumpX', 'bumpY' - showMark (boolean): Whether to show data point markers - connectNulls (boolean): Whether to bridge gaps across None values - yAxisId (string): ID of the y-axis to use for this series (for biaxial charts) - xAxisId (string): ID of the x-axis to use for this series - highlightScope (object): Per-series highlight behavior with: - highlight: 'none', 'item', or 'series' - fade: 'none', 'series', or 'global'. | ||
| showSlider | boolean; optional | If True, shows a zoom slider below the chart for easy zoom control. The slider allows users to select a range and pan through the data. | ||
| showToolbar | boolean; optional | Show chart toolbar with zoom/export controls. This is a Pro feature that requires a valid licenseKey. | ||
| skipAnimation | boolean; optional | If True, animations are skipped. | ||
| tooltip | dict; optional | Tooltip configuration. Object with trigger key. - trigger (string): 'item', 'axis', or 'none'. | ||
| tooltipItem | dict; optional | Controlled tooltip item state. Used to synchronize tooltips across multiple charts. Object with: - type (string): Chart type ('line', 'bar', 'pie', etc.) - seriesId (string): The series identifier - dataIndex (number): The data index within the series Set to None to hide tooltip. | ||
| width | number; optional | Chart width in pixels. If not specified, the chart expands to fill the available space. | ||
| xAxis | list of dicts; optional | X-axis configuration. Array of axis config objects. Each axis object can have: - data (array): X-axis values (timestamps in ms for 'time' scaleType) - dataKey (string): Key to use from dataset for axis values - label (string): Axis label - scaleType (string): 'band', 'point', 'linear', 'log', 'time', 'utc', 'symlog', 'sqrt' - position (string): 'top', 'bottom', or 'none' (hidden but still computed) - id (string): Axis identifier for referencing in series and zoom - min (number): Minimum domain value - max (number): Maximum domain value - reverse (boolean): Reverse axis direction - tickNumber (number): Approximate number of ticks - tickMinStep (number): Minimum step between ticks (ms for time axes) - tickMaxStep (number): Maximum step between ticks - tickSize (number): Tick mark length in pixels (default: 6) - tickSpacing (number): Minimum spacing in px between ticks (ordinal axes only) - tickInterval (array): Fixed tick positions as array of values - tickLabelStyle (object): CSS style for tick labels (e.g. {angle: 45, fontSize: 12}) - tickLabelPlacement (string): 'middle' or 'tick' (band scale only) - tickPlacement (string): 'end', 'extremities', 'middle', 'start' (band scale only) - tickLabelMinGap (number): Minimum gap in px between tick labels (default: 4) - labelStyle (object): CSS style for the axis label - height (number): Space reserved for this x-axis in pixels - disableLine (boolean): Hide the axis line - disableTicks (boolean): Hide tick marks - domainLimit (string): 'nice' (default, rounds to friendly values) or 'strict' - categoryGapRatio (number): Gap ratio between bands (0-1, band scale only) - barGapRatio (number): Gap ratio between bars within a band (band scale only) - colorMap (object): Axis color mapping configuration - zoom (boolean or object): Enable zoom on this axis. Can be True or object with: - minStart (number): Minimum start position (0-100) - maxEnd (number): Maximum end position (0-100) - minSpan (number): Minimum zoom span - maxSpan (number): Maximum zoom span - step (number): Zoom step size - panning (boolean): Enable panning - filterMode (string): 'keep' or 'discard' - slider (object): Slider config with { enabled, preview, size, showTooltip }. | ||
| yAxis | list of dicts; optional | Y-axis configuration. Array of axis config objects. Each axis object can have: - data (array): Y-axis values (for horizontal bar charts) - dataKey (string): Key to use from dataset for axis values - label (string): Axis label - scaleType (string): 'band', 'point', 'linear', 'log', 'time', 'utc', 'symlog', 'sqrt' - position (string): 'left', 'right', or 'none' (hidden but still computed) - id (string): Axis identifier for referencing in series - min (number): Minimum domain value - max (number): Maximum domain value - width (number): Width allocated for axis in pixels - reverse (boolean): Reverse axis direction - tickNumber (number): Approximate number of ticks - tickMinStep (number): Minimum step between ticks - tickMaxStep (number): Maximum step between ticks - tickSize (number): Tick mark length in pixels (default: 6) - tickSpacing (number): Minimum spacing in px between ticks (ordinal axes only) - tickInterval (array): Fixed tick positions as array of values - tickLabelStyle (object): CSS style for tick labels (e.g. {angle: 45, fontSize: 12}) - tickLabelPlacement (string): 'middle' or 'tick' (band scale only) - tickPlacement (string): 'end', 'extremities', 'middle', 'start' (band scale only) - tickLabelMinGap (number): Minimum gap in px between tick labels (default: 4) - labelStyle (object): CSS style for the axis label - height (number): Space reserved for this y-axis in pixels - disableLine (boolean): Hide the axis line - disableTicks (boolean): Hide tick marks - domainLimit (string): 'nice' (default, rounds to friendly values) or 'strict' - categoryGapRatio (number): Gap ratio between bands (0-1, band scale only) - barGapRatio (number): Gap ratio between bars within a band (band scale only) - colorMap (object): Axis color mapping configuration - zoom (boolean or object): Enable zoom on this axis (same options as xAxis). | ||
| zoom | list of dicts; optional | Controlled zoom state for the chart. Array of objects with: - axisId (string): The axis identifier - start (number): Start position (0-100) - end (number): End position (0-100). | ||
| zoomData | list of dicts; optional | Current zoom state. Read-only output property updated when zoom changes. Array of objects with axisId, start, and end values. | ||
| zoomInteractionConfig | dict; optional | Zoom interaction configuration. Controls which interactions are enabled for zooming and panning. Object with: - zoom (array): Zoom interactions - 'wheel', 'pinch', 'tapAndDrag', 'brush', 'doubleTapReset', or objects with { type, requiredKeys, pointerMode } - pan (array): Pan interactions - 'drag', 'pressAndDrag', 'wheel', or objects with { type, requiredKeys, pointerMode }. |
BarChart
Vertical/horizontal bars with stacking, bar labels, dataset mode, and Pro zoom. Demos →
| Name | Type | Description | ||||
|---|---|---|---|---|---|---|
| id | string; optional | The ID used to identify this component in Dash callbacks. | ||||
| axisClickData | dict; optional | Fires on axis area click. Contains: {axisValue, dataIndex, seriesValues, timestamp}. | ||||
| axisHighlight | dict; optional | Axis highlight configuration: {x: 'band'\ | 'line'\ | 'none', y: 'band'\ | 'line'\ | 'none'}. |
| borderRadius | number; optional | Border radius for bar corners in pixels. | ||||
| brushConfig | dict; optional | Brush selection config (Pro): {enabled: bool, preventTooltip: bool, preventHighlight: bool}. | ||||
| clickData | dict; optional | Fires on bar click. Contains: {seriesId, dataIndex, timestamp}. | ||||
| colors | list of strings; optional | Color palette array for series colors. | ||||
| dataset | list of dicts; optional | Array of row objects for dataKey-based series. Example: [{month: 'Jan', sales: 100}, {month: 'Feb', sales: 150}]. | ||||
| grid | dict; optional | Background grid lines: {horizontal: bool, vertical: bool}. | ||||
| height | number; optional | Chart height in pixels. | ||||
| hideLegend | boolean; optional | Hide the legend. | ||||
| highlightedItem | dict; optional | Controlled highlight state. Both input (to set highlight) and output (fires on hover). Object: {seriesId, dataIndex} or None. | ||||
| initialZoom | list of dicts; optional | Initial zoom state (Pro). Array of {axisId, start, end}. | ||||
| layout | a value equal to: 'vertical', 'horizontal'; optional | Bar direction: 'vertical' (default) or 'horizontal'. | ||||
| licenseKey | string; optional | MUI X Pro license key. Required for zoom, brush, and toolbar features. | ||||
| loading | boolean; optional | Show loading overlay. | ||||
| margin | dict; optional | Chart margins: {top, bottom, left, right} in pixels. | ||||
| n_clicks | number; optional | Number of times bars have been clicked. | ||||
| referenceLines | list of dicts; optional | Reference lines array. Each object: - x (string\ | number): Vertical line at this x value - y (number): Horizontal line at this y value - axisId (string): Which axis (when multiple) - label (string): Text label - labelAlign (string): 'start', 'middle', 'end' - lineStyle (object): SVG style for the line - labelStyle (object): SVG style for the label - spacing (object): Label offset. | |||
| renderer | a value equal to: 'svg-single', 'svg-batch'; optional | Renderer strategy: 'svg-single' (default) or 'svg-batch' for large datasets. | ||||
| series | list of dicts; optional | Array of bar series objects. Each series can contain: - data (number[]): Bar values - dataKey (string): Column key when using dataset prop - label (string): Series label for legend/tooltip - color (string): Series color - stack (string): Stack group ID (series with same value are stacked) - stackOffset (string): 'none', 'expand', 'diverging', 'silhouette', 'wiggle' - stackOrder (string): 'none', 'appearance', 'ascending', 'descending', 'insideOut', 'reverse' - barLabel (string): 'value' or 'formattedValue' to show labels on bars - barLabelPlacement (string): 'center' or 'outside' - highlightScope (object): {highlight, fade} highlight behavior - yAxisId (string): Y-axis binding for biaxial charts - id (string): Unique series identifier. | ||||
| showSlider | boolean; optional | Show zoom range slider below the chart (Pro). | ||||
| showToolbar | boolean; optional | Show zoom/export toolbar above the chart (Pro). | ||||
| skipAnimation | boolean; optional | Disable animations. | ||||
| tooltip | dict; optional | Tooltip configuration: {trigger: 'item'\ | 'axis'\ | 'none'}. | ||
| width | number; optional | Chart width in pixels. If not set, uses parent container width. | ||||
| xAxis | list of dicts; optional | X-axis configuration array. For bar charts, typically uses scaleType: 'band'. Each axis can contain: - data (array): Category labels - dataKey (string): Column key from dataset - scaleType (string): 'band' (required for bars), 'linear', 'log', etc. - label (string): Axis label text - categoryGapRatio (number): Gap between categories (0-1) - barGapRatio (number): Gap between bars in same category (-1 to Infinity) - tickPlacement (string): 'start', 'end', 'middle', 'extremities' - tickLabelPlacement (string): 'tick' or 'middle' - colorMap (object): Color mapping configuration - zoom (object): Zoom config for Pro features - id (string): Axis identifier - position (string): 'top', 'bottom', 'none' - min/max (number): Domain limits - reverse (bool): Reverse axis direction - tickNumber (number): Approximate tick count - tickMinStep/tickMaxStep (number): Control tick spacing - tickLabelStyle (object): CSS for tick labels - labelStyle (object): CSS for axis label - disableLine (bool): Hide axis line - disableTicks (bool): Hide tick marks - domainLimit (string): 'nice' or 'strict' - height (number): Space reserved for axis. | ||||
| yAxis | list of dicts; optional | Y-axis configuration array. Same structure as xAxis. | ||||
| zoomData | list of dicts; optional | Zoom state output (Pro). Fires on zoom change. | ||||
| zoomInteractionConfig | dict; optional | Zoom interaction configuration (Pro). Controls drag, wheel, pinch, brush zoom behaviors. |
CandlestickChart
Static OHLC candlesticks with volume overlay and reference lines. Demos →
| Name | Type | Description | |
|---|---|---|---|
| id | string; optional | The ID used to identify this component in Dash callbacks. | |
| bodyWidthRatio | number; optional | Candle body width as a ratio of the band width (0-1). Default: 0.6. | |
| clickData | dict; optional | Fires on candle click. Contains: {dataIndex, label, open, high, low, close, timestamp}. | |
| dataset | list of dicts; optional | Dataset for datasetKeys mode. Array of row objects. Example: [{date: '2025-01-02', open: 100, high: 110, low: 95, close: 105, volume: 1000}, ...]. | |
| grid | dict; optional | Background grid lines: {horizontal: bool, vertical: bool}. | |
| height | number; optional | Chart height in pixels. | |
| hideLegend | boolean; optional | Hide the legend (default: True for candlestick). | |
| hoverData | dict; optional | Hover data output (reserved for future use). | |
| initialZoom | list of dicts; optional | Initial zoom state (Pro). Array of {axisId, start, end}. | |
| licenseKey | string; optional | MUI X Pro license key. Required for zoom, slider, and toolbar. | |
| margin | dict; optional | Chart margins: {top, bottom, left, right} in pixels. | |
| referenceLines | list of dicts; optional | Reference lines array. Same format as BarChart/LineChart. | |
| series | list of dicts; optional | OHLC candlestick series. Typically a single series with two data formats: Array format: series=[{data: [[open,high,low,close], ...], upColor: '#4caf50', downColor: '#f44336'}] Dataset format (use with dataset prop): series=[{datasetKeys: {open:'open', high:'high', low:'low', close:'close'}, upColor: '#4caf50', downColor: '#f44336'}] Optional volume: series=[{..., volume: [100, 200, ...]}] (array format) series=[{..., volumeKey: 'volume'}] (dataset format) Series properties: - data (array): Array of [open, high, low, close] tuples or {open, high, low, close} objects - datasetKeys (object): {open, high, low, close} mapping to dataset columns - upColor (string): Color when close >= open (default: '#4caf50') - downColor (string): Color when close < open (default: '#f44336') - volume (array): Volume values for each candle - volumeKey (string): Dataset column name for volume data. | |
| showSlider | boolean; optional | Show zoom range slider (Pro). | |
| showToolbar | boolean; optional | Show toolbar (Pro). | |
| showVolume | boolean; optional | Show volume bars below candles. Requires volume data in series. | |
| skipAnimation | boolean; optional | Disable animations. | |
| tooltip | dict; optional | Tooltip configuration: {trigger: 'item'\ | 'none'}. Set trigger to 'none' to disable the OHLC tooltip. |
| volumeHeightRatio | number; optional | Volume bars maximum height as ratio of chart height (0-1). Default: 0.2. | |
| wickWidth | number; optional | Wick (shadow) line width in pixels. Default: 2. | |
| width | number; optional | Chart width in pixels. If not set, uses parent container width. | |
| xAxis | list of dicts; optional | X-axis configuration. Typically band scale with dates/labels. - data (array): Category labels (dates, day names, etc.) - dataKey (string): Column from dataset for labels - label (string): Axis label text - scaleType (string): Always 'band' for candlestick (set automatically) - zoom (object): Zoom config for Pro features - tickLabelStyle (object): CSS for tick labels - tickPlacement (string): 'start', 'end', 'middle', 'extremities'. | |
| yAxis | list of dicts; optional | Y-axis configuration for price values. - label (string): Axis label (e.g., 'Price ($)') - min/max (number): Override auto-computed domain from OHLC data - position (string): 'left' or 'right'. | |
| zoomData | list of dicts; optional | Zoom state output (Pro). | |
| zoomInteractionConfig | dict; optional | Zoom interaction configuration (Pro). |
PieChart
Pie, donut, and nested pies with controlled highlighting. Demos →
| Name | Type | Description | |
|---|---|---|---|
| id | string; optional | The ID used to identify this component in Dash callbacks. | |
| arcLabel | a value equal to: 'value', 'label', 'formattedValue'; optional | Type of label to display on arcs. - 'value': Shows the numeric value - 'label': Shows the label text - 'formattedValue': Shows formatted value. | |
| arcLabelMinAngle | number; optional | Minimum arc angle in degrees required to display a label. Prevents labels from appearing on very small slices. | |
| clickData | dict; optional | Data from the most recent click event. Read-only output property. Contains id, dataIndex, value, label, and timestamp. | |
| colors | list of strings; optional | Array of colors to use for the pie slices. If not provided, uses the default MUI color palette. Example: ['#1976d2', '#dc004e', '#ff9800', '#4caf50']. | |
| cornerRadius | number; optional | Corner radius of the arcs in pixels. Rounds the corners of each slice. | |
| cx | number \ | string; optional | X position of the pie center. Can be pixels or percentage string. Default is '50%' (centered). |
| cy | number \ | string; optional | Y position of the pie center. Can be pixels or percentage string. Default is '50%' (centered). |
| data | list of dicts; optional | Pie chart data as an array of objects (for single series). Each object should have: - id (number/string): Unique identifier for the slice - value (number): The numeric value (required) - label (string): Display label for the slice - color (string): Optional color override for this slice Example: [ { id: 0, value: 35, label: 'Marketing' }, { id: 1, value: 25, label: 'Engineering', color: '#1976d2' }, ] Note: Use either 'data' for single series or 'series' for multiple series (nested pies). | |
| endAngle | number; optional | End angle of the last arc in degrees. Default is 360 (full circle). Use 90 with startAngle=-90 for a half-pie/gauge chart. | |
| height | number; optional | Chart height in pixels. Default is 300. | |
| hideLegend | boolean; optional | If True, the legend is hidden. | |
| highlightScope | dict; optional | Highlight scope configuration for slice highlighting behavior. - highlight: 'item' or 'none' - fade: 'global' or 'none' Example: { highlight: 'item', fade: 'global' }. | |
| highlightedItem | dict; optional | Currently highlighted item. Can be used as both input (controlled mode) and output (updated when user hovers over a slice). Object with: - seriesId (string): The series identifier - dataIndex (number): The data index within the series Set to None to clear highlight. | |
| innerRadius | number \ | string; optional | Inner radius of the pie in pixels or percentage string. Set to a value > 0 to create a donut chart. Examples: 50, '50%', '40%'. |
| margin | dict; optional | Chart margins in pixels. Object with top, right, bottom, left keys. | |
| n_clicks | number; optional | Number of times the chart has been clicked. Increments on each click event. | |
| outerRadius | number \ | string; optional | Outer radius of the pie in pixels or percentage string. Examples: 100, '80%'. |
| paddingAngle | number; optional | Gap between arcs in degrees. Creates visual separation between slices. | |
| series | list of dicts; optional | Array of series configurations for multi-series/nested pie charts. Each series can have its own data, geometry, and styling. When provided, the 'data' prop and individual geometry props are ignored. Example for nested pie: [ { data: innerRingData, innerRadius: 0, outerRadius: 80, cornerRadius: 3, highlightScope: { fade: 'global', highlight: 'item' }, }, { data: outerRingData, innerRadius: 90, outerRadius: 120, cornerRadius: 3, highlightScope: { fade: 'global', highlight: 'item' }, }, ]. | |
| skipAnimation | boolean; optional | If True, disables chart animations. Also respects prefers-reduced-motion. | |
| startAngle | number; optional | Start angle of the first arc in degrees. Default is 0 (3 o'clock position). Use -90 for 12 o'clock start position. | |
| tooltip | dict; optional | Tooltip configuration. - trigger (string): 'item' to show on slice hover, 'none' to disable. | |
| width | number; optional | Chart width in pixels. If not specified, the chart expands to fill the available space. |
ScatterChart
Scatter charts with z-axis color mapping and voronoi interaction. Demos →
| Name | Type | Description | |
|---|---|---|---|
| id | string; optional | The ID used to identify this component in Dash callbacks. | |
| axisHighlight | dict; optional | Axis highlight configuration on hover. - x: 'none', 'line', or 'band' - y: 'none', 'line', or 'band'. | |
| clickData | dict; optional | Data from the most recent click event. Read-only output property. Contains seriesId, dataIndex, x, y, and timestamp. | |
| colors | list of strings; optional | Color palette array for multiple series. | |
| dataset | list of dicts; optional | Dataset array for datasetKeys-driven series. Array of objects where keys map to series datasetKeys. Example: [{x1: 10, y1: 20, x2: 30, y2: 40}, ...]. | |
| disableVoronoi | boolean; optional | If True, disables Voronoi cell interaction and falls back to hover events. | |
| grid | dict; optional | Grid configuration. Object with horizontal and vertical boolean keys. | |
| height | number; optional | Chart height in pixels. Default is 400. | |
| hideLegend | boolean; optional | If True, the legend is hidden. | |
| highlightedItem | dict; optional | Currently highlighted item. Works as both input (controlled) and output. Object with seriesId and dataIndex. | |
| loading | boolean; optional | If True, shows a loading overlay. | |
| margin | dict; optional | Chart margins in pixels. Object with top, right, bottom, left keys. | |
| n_clicks | number; optional | Number of times the chart has been clicked. Increments on each click event. | |
| renderer | a value equal to: 'svg-single', 'svg-batch'; optional | Renderer type for performance optimization. - 'svg-single': Default, renders each point as a <circle> element - 'svg-batch': Batch renders points in <path> elements for large datasets Note: svg-batch has limitations (no CSS per-point, no custom markers). | |
| series | list of dicts; optional | Array of scatter series to display. Each series contains: - id (string): Unique series identifier - label (string): Display label for legend/tooltip - color (string): Series color - data (array): Array of {x, y, id, z?} point objects - datasetKeys (object): {x, y, id?, z?} keys mapping to dataset columns - markerSize (number): Radius of scatter markers in pixels - highlightScope (object): {highlight, fade} highlighting behavior. | |
| skipAnimation | boolean; optional | If True, animations are disabled. | |
| slotProps | dict; optional | Props passed to internal slot components for customization. | |
| tooltip | dict; optional | Tooltip configuration. - trigger: 'item' (on point hover), 'axis' (all at x position), 'none' (disabled). | |
| voronoiMaxRadius | number \ | a value equal to: 'item'; optional | Maximum distance between pointer and scatter point for interaction. - number: Distance in pixels - 'item': Only trigger on direct hover over marker - undefined: Infinite radius (default). |
| width | number; optional | Chart width in pixels. If not set, fills available space. | |
| xAxis | list of dicts; optional | X-axis configuration. Array of axis config objects. - id (string): Axis identifier - label (string): Axis label - scaleType (string): 'linear', 'log', 'time', 'band', 'point', 'sqrt', 'symlog', 'utc' - min/max (number): Domain bounds - data (array): Axis data values - dataKey (string): Key for dataset-driven axis - position (string): 'top', 'bottom', 'none' - reverse (bool): Reverse axis direction - colorMap (object): Color mapping configuration - tickLabelStyle (object): CSS for tick labels - labelStyle (object): CSS for axis label - tickMinStep (number): Minimum step between ticks - tickMaxStep (number): Maximum step between ticks - tickNumber (number): Approximate tick count - tickSize (number): Tick mark length in pixels - height (number): Space reserved for axis - disableLine (bool): Hide axis line - disableTicks (bool): Hide tick marks - domainLimit (string): 'nice' or 'strict'. | |
| yAxis | list of dicts; optional | Y-axis configuration. Array of axis config objects. Same properties as xAxis, plus: - width (number): Space reserved for axis - position (string): 'left', 'right', 'none'. | |
| zAxis | list of dicts; optional | Z-axis configuration for color mapping scatter points. Color priority: z-axis > y-axis > x-axis > series color. - data (array): Z-axis values - dataKey (string): Key for dataset-driven z values - id (string): Axis identifier - min/max (number): Domain bounds - colorMap (object): Color mapping - continuous, piecewise, or ordinal Continuous: {type: 'continuous', min, max, color: ['#start', '#end']} Piecewise: {type: 'piecewise', thresholds: [...], colors: [...]} Ordinal: {type: 'ordinal', values: [...], colors: [...]}. |
CompositeChart
Scatter + line series layered on one surface, multi-axis, Pro zoom. Demos →
| Name | Type | Description | |
|---|---|---|---|
| id | string; optional | The ID used to identify this component in Dash callbacks. | |
| axisHighlight | dict; optional | Axis highlight configuration. | |
| clickData | dict; optional | Data from the most recent click event. Contains type ('scatter'\ | 'line'), seriesId, dataIndex, and timestamp. |
| colors | list of strings; optional | Color palette array. | |
| crosshairClick | dict; optional | Fires on right-click within the chart drawing area when enableCrosshair is True. Object with: - x (number): x-axis data value at click position - y (number): y-axis data value at click position - button (string): always 'right' - timestamp (string): ISO timestamp of the click Use this to implement context menus (e.g. "Set Alert") at precise data coordinates. | |
| crosshairPosition | dict; optional | Current crosshair position in data coordinates. Read-only output that updates as the user moves the mouse. Object with: - x (number): x-axis data value (epoch ms for time scales) - y (number): y-axis data value Set to None when the pointer leaves the chart area. | |
| dataset | list of dicts; optional | Dataset array for datasetKeys-driven series. | |
| disableVoronoi | boolean; optional | If True, disables Voronoi cell interaction. | |
| enableCrosshair | boolean; optional | Enable crosshair position tracking. When True, the crosshairPosition output prop reports the pointer's x/y data-space coordinates in real time as the user moves the mouse over the chart. Requires axisHighlight set to {x: 'line', y: 'line'} for the visual crosshair. | |
| forecast | list of dicts; optional | Forecast overlay data. Array of objects with x, y (center), upper, and lower values. Renders a dashed trend line with a shaded uncertainty band in the chart's SVG layer, matching the LiveTradingChart forecast style. | |
| forecastColor | string; optional | Forecast line and band color. Default '#ff9800' (orange). | |
| forecastOpacity | number; optional | Forecast band fill opacity. Default 0.15. | |
| grid | dict; optional | Grid configuration. | |
| height | number; optional | Chart height in pixels. Default is 400. | |
| hideLegend | boolean; optional | If True, the legend is hidden. | |
| highlightedAxis | list of dicts; optional | Controlled axis highlight state. Array of objects specifying which axis values are highlighted. Each object has: - axisId (string\ | number): The axis identifier - dataIndex (number): The data index to highlight Set to empty array [] to clear highlights. |
| highlightedItem | dict; optional | Currently highlighted item (controlled input/output). | |
| initialZoom | list of dicts; optional | Initial zoom configuration (Pro). Array of {axisId, start, end} objects. start/end are percentages (0-100) of the axis range. | |
| licenseKey | string; optional | MUI X Pro license key. Required for zoom/pan/toolbar features. | |
| loading | boolean; optional | If True, shows a loading overlay. | |
| margin | dict; optional | Chart margins in pixels. | |
| n_clicks | number; optional | Number of times the chart has been clicked. | |
| referenceLines | list of dicts; optional | Reference lines to display on the chart. Array of objects with: - x (number\ | string): Vertical reference line at x value - y (number): Horizontal reference line at y value - label (string): Label text - lineStyle (object): CSS for line element - labelStyle (object): CSS for label text - labelAlign (string): 'start', 'middle', 'end'. |
| series | list of dicts; optional | Array of series to display. Each series MUST include a 'type' field. Scatter series: {type: 'scatter', id, label, color, markerSize, data: [{x, y, id}], highlightScope} Line series: {type: 'line', id, label, color, data: [...], area, curve, showMark, highlightScope, yAxisId}. | |
| showSlider | boolean; optional | If True, shows the zoom slider below the chart. Injects zoom.slider.enabled into x-axis config. | |
| showToolbar | boolean; optional | If True, shows the Pro toolbar for zoom/export controls. | |
| skipAnimation | boolean; optional | If True, animations are disabled. | |
| slotProps | dict; optional | Props passed to internal slot components. | |
| syncedTooltipIndex | number; optional | Synced tooltip data index. When set to a non-negative integer, renders a tooltip overlay at that x-axis data index position, even without pointer hover. Use this to synchronize tooltip display across multiple CompositeCharts: read highlightedAxis.dataIndex from one chart, write it to syncedTooltipIndex on the other charts. Set to None or -1 to hide. | |
| tooltip | dict; optional | Tooltip configuration. | |
| tooltipItem | dict; optional | Controlled tooltip item state. Used to synchronize tooltips across multiple charts. Object with: - type (string): Chart type ('line', 'scatter', etc.) - seriesId (string): The series identifier - dataIndex (number): The data index within the series Set to None to hide tooltip. | |
| voronoiMaxRadius | number \ | a value equal to: 'item'; optional | Maximum distance for Voronoi scatter interaction. |
| width | number; optional | Chart width in pixels. If not set, fills available space. | |
| xAxis | list of dicts; optional | X-axis configuration. Array of axis config objects. | |
| yAxis | list of dicts; optional | Y-axis configuration. Array of axis config objects. | |
| zAxis | list of dicts; optional | Z-axis configuration for color mapping scatter points. | |
| zoomData | list of dicts; optional | Current zoom state. Read-only output updated on zoom/pan. Array of {axisId, start, end} objects. | |
| zoomInteractionConfig | dict; optional | Fine-grained control over zoom/pan interactions (Pro). - zoom: Array of interaction types ['wheel', 'pinch', 'brush', 'tapAndDrag', 'doubleTapReset'] - pan: Array of interaction types ['drag', 'pressAndDrag', 'wheel']. |
Heatmap
Matrix visualization with continuous/piecewise color scales (Pro). Demos →
| Name | Type | Description |
|---|---|---|
| id | string; optional | The ID used to identify this component in Dash callbacks. |
| cellStyle | dict; optional | Custom cell style. Use 'rounded' for default rounded corners with gap, or provide an object for detailed configuration: - gap (number): Spacing between cells in pixels (default: 4) - borderRadius (number): Corner radius in pixels (default: 10) - showValue (boolean): Display value text in cells (default: True) - fontSize (number): Font size for value text (default: 12) - fontWeight (number): Font weight for value text (default: 500) - textColor (string): Color for value text (default: '#ffffff'). |
| clickData | dict; optional | Data from the most recent click event. Read-only output property. Contains x, y, value, seriesId, and timestamp. |
| colorScale | dict; optional | Color scale configuration for mapping values to colors. Continuous scale (interpolates between colors): { type: 'continuous', min: 0, max: 100, colors: ['#e3f2fd', '#1565c0'] } Piecewise scale (discrete color bands): { type: 'piecewise', thresholds: [20, 40, 60, 80], colors: ['#color1', '#color2', '#color3', '#color4', '#color5'] } Note: For piecewise, you need n+1 colors for n thresholds. |
| data | list of list of numberss; optional | Heatmap data as an array of [x, y, value] tuples. - x: X-axis index (0-based) - y: Y-axis index (0-based) - value: Numeric value for the cell (mapped to color) Example: [[0, 0, 25], [0, 1, 45], [1, 0, 30], [1, 1, 60]]. |
| height | number; optional | Chart height in pixels. Default is 400. |
| hideLegend | boolean; optional | If True, the color legend is hidden. |
| highlightScope | dict; optional | Highlight scope configuration for cell highlighting behavior. - highlight: 'item' or 'none' - fade: 'global' or 'none'. |
| highlightedItem | dict; optional | Currently highlighted item. Read-only output property updated when the user hovers over a cell. |
| licenseKey | string; optional | MUI X Pro license key. Required to enable Pro features without watermarks. Get your license key from https://mui.com/x/introduction/licensing/. |
| margin | dict; optional | Chart margins in pixels. Object with top, right, bottom, left keys. |
| n_clicks | number; optional | Number of times the chart has been clicked. Increments on each click event. |
| slotProps | dict; optional | Props passed to internal slot components for customization. |
| tooltip | dict; optional | Tooltip configuration. - trigger (string): 'item' to show on cell hover, 'none' to disable. |
| width | number; optional | Chart width in pixels. If not specified, the chart expands to fill the available space. |
| xAxis | dict; optional | X-axis configuration object. - data (array): Category labels for x-axis - label (string): Axis label - scaleType (string): Scale type, defaults to 'band' for heatmaps - zoom (boolean or object): Enable zoom on this axis. Can be True or object with: - minStart (number): Minimum start position (0-100) - maxEnd (number): Maximum end position (0-100) - minSpan (number): Minimum zoom span - maxSpan (number): Maximum zoom span - step (number): Zoom step size - panning (boolean): Enable panning - filterMode (string): 'keep' or 'discard' - slider (object): Slider config with { enabled, preview, size, showTooltip }. |
| yAxis | dict; optional | Y-axis configuration object. - data (array): Category labels for y-axis - label (string): Axis label - scaleType (string): Scale type, defaults to 'band' for heatmaps - zoom (boolean or object): Enable zoom on this axis (same options as xAxis). |
SparklineChart
Compact inline charts for dashboards, KPI cards and tables. Demos →
| Name | Type | Description | ||||
|---|---|---|---|---|---|---|
| id | string; optional | The ID used to identify this component in Dash callbacks. | ||||
| area | boolean; optional | If True, fills the area under the line. Only applies when plotType is 'line'. | ||||
| axisHighlight | dict; optional | Axis highlight configuration. Controls how the axis is highlighted on hover. - x: 'line' \ | 'band' \ | 'none' - highlight style for x-axis - y: 'line' \ | 'band' \ | 'none' - highlight style for y-axis. |
| baseline | a value equal to: 'min', 'max' \ | number; optional | Baseline for area charts. Determines where the area fill starts. - 'min': fills from minimum value (default) - 'max': fills from maximum value - number: fills from a specific value. | |||
| clipAreaOffset | dict; optional | Offset for the clip area to prevent cutting off elements at edges. Object with top, right, bottom, left keys (in pixels). | ||||
| color | string; optional | Single color for the sparkline. Can be any valid CSS color string. Example: '#1976d2', 'rgb(25, 118, 210)', 'blue'. | ||||
| colors | list of strings; optional | Array of colors for the sparkline. Use this for multi-color configurations. | ||||
| curve | a value equal to: 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepBefore', 'stepAfter', 'catmullRom', 'bumpX', 'bumpY'; optional | Curve interpolation method for line charts. Options: 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepBefore', 'stepAfter', 'catmullRom', 'bumpX', 'bumpY'. | ||||
| data | list of numbers; required | Array of numeric values to display in the sparkline. This is the primary data for the chart. | ||||
| disableClipping | boolean; optional | If True, disables clipping of the chart content. Useful when elements extend beyond the chart boundaries. | ||||
| height | number; optional | Chart height in pixels. Default is 36 for compact inline display. | ||||
| highlightedIndex | number; optional | Controlled highlight index. Set this to programmatically highlight a specific data point. Requires xAxis.id to be set. | ||||
| highlightedItem | dict; optional | Currently highlighted item. Read-only output property updated when the user hovers over a data point (requires showHighlight=True). Contains the data index of the highlighted point. | ||||
| hoverIndex | number; optional | Index of the currently hovered data point. Read-only output. Use this to sync hover state with other components. | ||||
| hoverValue | number; optional | Value at the currently hovered data point. Read-only output. Use this to display the hovered value in other components. | ||||
| margin | dict; optional | Chart margins in pixels. Object with top, right, bottom, left keys. Default is { top: 5, right: 5, bottom: 5, left: 5 }. | ||||
| n_hovers | number; optional | Number of hover events. Increments each time a data point is hovered. | ||||
| plotType | a value equal to: 'line', 'bar'; optional | Type of plot to render. - 'line': Renders a line chart (default) - 'bar': Renders a bar chart. | ||||
| showHighlight | boolean; optional | If True, shows a visual highlight on the hovered data point. For line charts, shows a dot. For bar charts, shows a band. | ||||
| showTooltip | boolean; optional | If True, shows a tooltip on hover displaying the value. | ||||
| slotProps | dict; optional | Props passed to internal slot components for customization. - lineHighlight: { r: number } - radius of the highlight dot - tooltip: tooltip configuration. | ||||
| strokeWidth | number; optional | Stroke width for the line in pixels. Only applies when plotType is 'line'. Default is 2. Higher values create thicker lines. | ||||
| width | number; optional | Chart width in pixels. If not specified, the chart will expand to fill the available space. | ||||
| xAxis | dict; optional | X-axis configuration object. Unlike LineChart, this is a single object, not an array. The axis is hidden by default for compact display. - id (string): Axis identifier for controlled highlighting - data (array): X-axis labels/values - scaleType (string): Scale type. | ||||
| yAxis | dict; optional | Y-axis configuration object. Unlike LineChart, this is a single object, not an array. The axis is hidden by default for compact display. |
LiveTradingChart
Real-time streaming OHLCV simulation with forecast and alerts. Demos →
| Name | Type | Description |
|---|---|---|
| id | string; optional | The ID used to identify this component in Dash callbacks. |
| alertDownColor | string; optional | Alert label color for downward moves. Default '#f44336'. |
| alertFilter | dict; optional | Functions-as-props: custom alert detection. {function: 'name', options: {...}}. |
| alertFormatter | dict; optional | Functions-as-props: custom alert label formatting. {function: 'name', options: {...}}. |
| alertHistory | list; optional | Recent alert history (read-only output). |
| alertLookback | number; optional | Number of candles on each side to confirm a swing high/low. Default 5. |
| alertMinDistance | number; optional | Minimum ticks between consecutive alerts to prevent clustering. Default 10. |
| alertProbability | number; optional | (Legacy) Probability of alert per tick — unused by default swing detection. |
| alertThresholdPct | number; optional | (Legacy) Minimum % change to flag as alert — unused by default swing detection. |
| alertUpColor | string; optional | Alert label color for upward moves. Default '#4caf50'. |
| candleDownColor | string; optional | Candle color for downward (close < open) moves. Default '#f44336'. |
| candleUpColor | string; optional | Candle color for upward (close >= open) moves. Default '#4caf50'. |
| currentPrice | number; optional | Current price (read-only output). |
| drift | number; optional | Price drift/trend factor. Default 0.001. |
| forecastColor | string; optional | Forecast line/area color. Default '#ff9800'. |
| forecastSize | number; optional | Number of forecast points beyond the window. Default 15. |
| forecastVolatility | number; optional | Forecast uncertainty multiplier. Default 1.5. |
| grid | dict; optional | Grid configuration. |
| height | number; optional | Chart height in pixels. Default 500. |
| hideLegend | boolean; optional | Hide the legend. Default True. |
| initialPrice | number; optional | Starting price. Default 100. |
| intervalMs | number; optional | Tick interval in milliseconds. Default 300. |
| licenseKey | string; optional | MUI X Pro license key. |
| margin | dict; optional | Chart margins. |
| maxVisibleAlerts | number; optional | Maximum number of alert labels visible in the window. Default 6. |
| resetTrigger | number; optional | Increment this to reset the simulation. |
| running | boolean; optional | Whether the simulation is running. Default False. |
| seed | number; optional | RNG seed for reproducible randomness. Default 42. |
| showGrid | boolean; optional | Show grid lines. Default True. |
| showLabels | boolean; optional | Show price labels on candles. Default False. |
| showSlider | boolean; optional | Show zoom slider below the chart (Pro). Default False. |
| showVolume | boolean; optional | Show volume bars. Default True. |
| tickCount | number; optional | Total ticks elapsed (read-only output). |
| uncertaintyOpacity | number; optional | Opacity of the forecast uncertainty shaded area. Default 0.15. |
| volatility | number; optional | Price volatility factor. Default 0.02. |
| volumeHeightPct | number; optional | Volume bars height as percentage of chart area. Default 20. |
| width | number; optional | Chart width in pixels. If not set, fills available space. |
| windowSize | number; optional | Number of visible candles in the sliding window. Default 60. |
| xAxisLabel | string; optional | X-axis label text. Default 'Tick'. |
| yAxisLabel | string; optional | Y-axis label text. Default 'Price'. |
| zoomData | list of dicts; optional | Current zoom state (read-only output). |
TreeView
Data-driven RichTreeView: selection, expansion, inline editing. Demos →
| Name | Type | Description | |
|---|---|---|---|
| id | string; optional | Dash component id. | |
| ariaLabel | string; optional | ARIA label for the tree. | |
| ariaLabelledBy | string; optional | ID of element that labels the tree. | |
| checkboxSelection | boolean; default False | Show checkboxes for selection. | |
| clickedItem | dict; optional | Fired when item is clicked. {itemId, event_timestamp}. | |
| collapseIcon | string; optional | MUI icon name for collapse icon (e.g. "ExpandMore"). | |
| defaultExpandedItems | list of strings; optional | Default expanded items (uncontrolled). | |
| defaultSelectedItems | string \ | list of strings; optional | Default selected items (uncontrolled). |
| disableSelection | boolean; default False | Disable all selection. | |
| disabledItems | list of strings; optional | List of item IDs that should be disabled. | |
| disabledItemsFocusable | boolean; default False | Allow focus on disabled items. | |
| editableItems | list of strings; optional | List of item IDs that are editable (alternative to isItemEditable=True). | |
| editedItemLabel | dict; optional | Fired when label edit completes. {itemId, newLabel, event_timestamp}. | |
| endIcon | string; optional | MUI icon name for leaf/end icon. | |
| expandIcon | string; optional | MUI icon name for expand icon (e.g. "ChevronRight"). | |
| expandedItems | list of strings; optional | Controlled expanded item IDs. | |
| expansionTrigger | a value equal to: 'content', 'iconContainer'; default 'content' | What triggers expansion: "content" or "iconContainer". | |
| focusedItem | dict; optional | Fired when item is focused. {itemId, event_timestamp}. | |
| getItemChildren | string; default 'children' | Property name for item children (default: "children"). | |
| getItemId | string; default 'id' | Property name for item ID (default: "id"). | |
| getItemLabel | string; default 'label' | Property name for item label (default: "label"). | |
| height | number \ | string; optional | Container height. |
| isItemEditable | boolean; default False | Enable label editing. True = all items, or use editableItems for per-item control. | |
| itemChildrenIndentation | number \ | string; default '12px' | Indentation of children. Number (px) or string ("24px", "2rem"). |
| items | list of dicts; optional | Array of item objects. Each must have an id and label (or use getItemId/getItemLabel). | |
| multiSelect | boolean; default False | Allow selecting multiple items. | |
| selectedItems | string \ | list of strings; optional | Controlled selected item(s). String when multiSelect=False, array when True. |
| selectionPropagation | dict; optional | Auto-propagate selection to parents/descendants. {parents: bool, descendants: bool}. | |
| sx | dict; optional | MUI sx styling object. |
SimpleTreeView
JSX-driven tree for navigation sidebars and static hierarchies. Demos →
| Name | Type | Description | |
|---|---|---|---|
| id | string; optional | Dash component id. | |
| ariaLabel | string; optional | ARIA label for the tree. | |
| ariaLabelledBy | string; optional | ID of element that labels the tree. | |
| checkboxSelection | boolean; default False | Show checkboxes for selection. | |
| clickedItem | dict; optional | Fired when item is clicked. {itemId, event_timestamp}. | |
| collapseIcon | string; optional | MUI icon name for collapse icon (e.g. "ExpandMore"). | |
| defaultExpandedItems | list of strings; optional | Default expanded items (uncontrolled). | |
| defaultSelectedItems | string \ | list of strings; optional | Default selected items (uncontrolled). |
| disableSelection | boolean; default False | Disable all selection. | |
| disabledItemsFocusable | boolean; default False | Allow focus on disabled items. | |
| endIcon | string; optional | MUI icon name for leaf/end icon. | |
| expandIcon | string; optional | MUI icon name for expand icon (e.g. "ChevronRight"). | |
| expandedItems | list of strings; optional | Controlled expanded item IDs. | |
| expansionTrigger | a value equal to: 'content', 'iconContainer'; default 'content' | What triggers expansion: "content" or "iconContainer". | |
| height | number \ | string; optional | Container height. |
| itemChildrenIndentation | number \ | string; default '12px' | Indentation of children. Number (px) or string ("24px", "2rem"). |
| items | list of dicts; optional | Nested items array. Each item: {itemId: string, label: string, children?: [], disabled?: bool, disableSelection?: bool}. | |
| multiSelect | boolean; default False | Allow selecting multiple items. | |
| selectedItems | string \ | list of strings; optional | Controlled selected item(s). String when multiSelect=False, array when True. |
| sx | dict; optional | MUI sx styling object. |
TreeViewPro
Drag-reorder, lazy loading, per-item slider and kebab controls (Pro). Demos →
| Name | Type | Description | |
|---|---|---|---|
| id | string; optional | Dash component id. | |
| ariaLabel | string; optional | ARIA label for the tree. | |
| ariaLabelledBy | string; optional | ID of element that labels the tree. | |
| checkboxSelection | boolean; default False | Show checkboxes for selection. | |
| clickedItem | dict; optional | Fired when item is clicked. {itemId, event_timestamp}. | |
| collapseIcon | string; optional | MUI icon name for collapse icon. | |
| controlsItems | list of strings; optional | Restrict slider+kebab to a subset of item IDs. Empty/omitted means all items. | |
| defaultExpandedItems | list of strings; optional | Default expanded items (uncontrolled). | |
| defaultSelectedItems | string \ | list of strings; optional | Default selected items (uncontrolled). |
| disableSelection | boolean; default False | Disable all selection. | |
| disabledItems | list of strings; optional | List of item IDs that should be disabled. | |
| disabledItemsFocusable | boolean; default False | Allow focus on disabled items. | |
| editableItems | list of strings; optional | List of item IDs that are editable. | |
| editedItemLabel | dict; optional | Fired when label edit completes. {itemId, newLabel, event_timestamp}. | |
| endIcon | string; optional | MUI icon name for leaf/end icon. | |
| expandIcon | string; optional | MUI icon name for expand icon. | |
| expandedItems | list of strings; optional | Controlled expanded item IDs. | |
| expansionTrigger | a value equal to: 'content', 'iconContainer'; default 'content' | What triggers expansion: "content" or "iconContainer". | |
| focusedItem | dict; optional | Fired when item is focused. {itemId, event_timestamp}. | |
| getItemChildren | string; default 'children' | Property name for item children (default: "children"). | |
| getItemId | string; default 'id' | Property name for item ID (default: "id"). | |
| getItemLabel | string; default 'label' | Property name for item label (default: "label"). | |
| height | number \ | string; optional | Container height. |
| isItemEditable | boolean; default False | Enable label editing for all items. | |
| itemChildrenIndentation | number \ | string; default '12px' | Indentation of children. |
| itemPositionChanged | dict; optional | Output: Fired after item reorder. {itemId, oldPosition, newPosition, event_timestamp}. | |
| items | list of dicts; optional | Array of item objects. | |
| itemsReordering | boolean; default False | Enable drag-and-drop item reordering. | |
| kebabAction | dict; optional | Output: fires when a kebab menu item is chosen. {itemId, action, event_timestamp}. | |
| kebabMenuItems | list of dicts; optional | Kebab menu entries. Each entry is one of: a LEAF {label, value, icon?} — picking it fires kebabAction with action = its value; a DIVIDER {divider: True}; or a SUBMENU {label, icon?, children: [entries]} that opens on hover/click (nesting is recursive). | |
| kebabMenuItemsById | dict with strings as keys and values of type list; optional | Per-node kebab menus: {itemId: [entries]} (same entry shape as kebabMenuItems, submenus/dividers included). A node listed here gets its own menu; all other nodes fall back to kebabMenuItems. | |
| lazyLoadRequest | dict; optional | Output: Fired when unloaded node is expanded. {itemId, event_timestamp}. | |
| lazyLoadedChildren | dict; optional | Input: Children loaded by Dash callback. {parentItemId: [childItems]}. | |
| lazyLoading | boolean; default False | Enable lazy loading mode. | |
| licenseKey | string; default '' | MUI X Pro license key. Required for Pro features. | |
| multiSelect | boolean; default False | Allow selecting multiple items. | |
| orderedItems | list of dicts; optional | Output: the current tree after any drag-and-drop reorder, preserving each node's original fields (id, label, children, etc.). Updates on every reorder so Python callbacks can render the live order. | |
| reorderableItems | list of strings; optional | List of item IDs that can be reordered. If empty, all items are reorderable. | |
| selectedItems | string \ | list of strings; optional | Controlled selected item(s). String when multiSelect=False, array when True. |
| selectionPropagation | dict; optional | Auto-propagate selection to parents/descendants. | |
| showItemControls | boolean; default False | Show a Slider + kebab menu on each item row. | |
| sliderChange | dict; optional | Output: fires once on each commit (mouse-up) of a slider drag. {itemId, value, event_timestamp}. | |
| sliderColor | string; optional | Slider color. Accepts a Mantine theme color name ("teal", "blue.5"), a CSS color literal ("#ff6b6b", "rgb(...)"), or a CSS expression ("var(--mantine-color-teal-6)", "light-dark(...)"). Bare names use shade 6 by default. When omitted, the slider falls back to MUI's primary palette color. | |
| sliderMax | number; default 100 | Slider maximum. | |
| sliderMin | number; default 0 | Slider minimum. | |
| sliderStep | number; default 1 | Slider step. | |
| sliderValues | dict; optional | Controlled slider values keyed by itemId, e.g. {"task-1": 40}. Also updated as user drags. | |
| sx | dict; optional | MUI sx styling object. |
TimeClock
Inline clock-face time picker (MUI X Date & Time Pickers). Demos →
| Name | Type | Description |
|---|---|---|
| id | string; optional | Dash component id. |
| ampm | boolean; optional | Force 12h (True) or 24h (False). Omit to use the locale default. |
| autoFocus | boolean; default False | Auto-focus the clock on mount. |
| className | string; optional | CSS class applied to the wrapping div. |
| defaultValue | string; optional | Uncontrolled initial value (same string formats as value). |
| disableFuture | boolean; default False | Disable times in the future (relative to now). |
| disableIgnoringDatePartForTimeValidation | boolean; default False | When True, min/max time comparisons include the date part. When False (default), only the time-of-day is compared. |
| disablePast | boolean; default False | Disable times in the past (relative to now). |
| disabled | boolean; default False | Disable the whole clock. |
| maxTime | string; optional | Maximum selectable time (ISO or time-only string). |
| minTime | string; optional | Minimum selectable time (ISO or time-only string). |
| minutesStep | number; optional | Step (in minutes) between selectable minute values. |
| openTo | a value equal to: 'hours', 'minutes', 'seconds'; optional | Which view to open first (uncontrolled). |
| readOnly | boolean; default False | Make the clock read-only (no editing). |
| showViewSwitcher | boolean; default False | Show the hours/minutes/seconds view-switch arrow buttons. |
| sx | dict; optional | MUI sx styling object applied to the TimeClock. |
| timeData | dict; optional | Parsed convenience output, updated on every change: { hours, minutes, seconds, formatted ("HH:mm:ss"), event_timestamp }. |
| value | string; optional | Controlled value. Full wall-time ISO ("2022-04-17T15:30:00") or time-only ("15:30" / "15:30:45"). Also an OUTPUT: updated on every change with a full wall-time ISO string. |
| view | a value equal to: 'hours', 'minutes', 'seconds'; optional | Controlled visible view. Also an OUTPUT — updated when the view changes. |
| views | list of a value equal to: 'hours', 'minutes', 'seconds's; default ['hours', 'minutes'] | Which views to render, in order. Default ["hours", "minutes"]. |
Source: /api
Note for AI agents: This is the static, prerendered view of an interactive Dash application served because we detected a non-JS user agent. Full prose docs:
- /api/llms.txt — LLM-friendly documentation
- /sitemap.xml
- /robots.txt