Bar Chart - Reference Lines

BarChart reference lines and styling: target and threshold markers, vertical reference lines, skip animation, hidden legend and custom color palettes.

Overview

referenceLines draws horizontal (y) and vertical (x) markers over the bars — targets, thresholds, dates — each with its own label, labelAlign, lineStyle and labelStyle. The rest of this page covers the styling switches: skipAnimation, hideLegend and the colors palette.

Target line

Horizontal reference line showing a sales target.

# File: docs/barchart_reference/target_example.py

from dash_mui_charts import BarChart

from docs.barchart_reference._data import months, sales

component = BarChart(
    id='bar-ref-target',
    series=[
        {'data': sales, 'label': 'Monthly Sales', 'color': '#1976d2'},
    ],
    xAxis=[{'data': months, 'scaleType': 'band'}],
    yAxis=[{'label': 'Units Sold'}],
    referenceLines=[
        {
            'y': 60,
            'label': 'Target (60)',
            'labelAlign': 'end',
            'lineStyle': {'stroke': '#f44336', 'strokeWidth': 2,
                          'strokeDasharray': '6 4'},
            'labelStyle': {'fill': '#f44336', 'fontWeight': 'bold',
                           'fontSize': 12},
        },
    ],
    grid={'horizontal': True},
    height=350,
)

:defaultExpanded: false :withExpandedButton: true

Multiple reference lines

Min, average, and max thresholds on one chart.

# File: docs/barchart_reference/multi_example.py

from dash_mui_charts import BarChart

from docs.barchart_reference._data import months, sales

component = BarChart(
    id='bar-ref-multi',
    series=[
        {'data': sales, 'label': 'Sales', 'color': '#5c6bc0'},
    ],
    xAxis=[{'data': months, 'scaleType': 'band'}],
    referenceLines=[
        {
            'y': min(sales),
            'label': f'Min ({min(sales)})',
            'labelAlign': 'start',
            'lineStyle': {'stroke': '#f44336', 'strokeWidth': 1.5,
                          'strokeDasharray': '4 4'},
            'labelStyle': {'fill': '#f44336', 'fontSize': 11},
        },
        {
            'y': sum(sales) / len(sales),
            'label': f'Avg ({sum(sales) / len(sales):.0f})',
            'labelAlign': 'middle',
            'lineStyle': {'stroke': '#ff9800', 'strokeWidth': 2},
            'labelStyle': {'fill': '#ff9800', 'fontSize': 11},
        },
        {
            'y': max(sales),
            'label': f'Max ({max(sales)})',
            'labelAlign': 'end',
            'lineStyle': {'stroke': '#4caf50', 'strokeWidth': 1.5,
                          'strokeDasharray': '4 4'},
            'labelStyle': {'fill': '#4caf50', 'fontSize': 11},
        },
    ],
    grid={'horizontal': True},
    height=350,
)

:defaultExpanded: false :withExpandedButton: true

Vertical reference line

Mark a specific category (e.g., a policy change date).

# File: docs/barchart_reference/vertical_example.py

from dash_mui_charts import BarChart

from docs.barchart_reference._data import months, sales

component = BarChart(
    id='bar-ref-vertical',
    series=[
        {'data': sales, 'label': 'Sales', 'color': '#00897b'},
    ],
    xAxis=[{'data': months, 'scaleType': 'band'}],
    referenceLines=[
        {
            'x': 'May',
            'label': 'New Policy',
            'labelAlign': 'start',
            'lineStyle': {'stroke': '#9c27b0', 'strokeWidth': 2},
            'labelStyle': {'fill': '#9c27b0', 'fontWeight': 'bold',
                           'fontSize': 12},
        },
    ],
    grid={'horizontal': True},
    height=350,
)

:defaultExpanded: false :withExpandedButton: true

Skip animation

Bars render instantly when skipAnimation=True.

# File: docs/barchart_reference/noanim_example.py

from dash_mui_charts import BarChart

from docs.barchart_reference._data import months, sales

component = BarChart(
    id='bar-ref-noanim',
    series=[
        {'data': sales, 'label': 'Sales', 'color': '#ef6c00'},
    ],
    xAxis=[{'data': months, 'scaleType': 'band'}],
    skipAnimation=True,
    grid={'horizontal': True},
    height=280,
)

:defaultExpanded: false :withExpandedButton: true

Hidden legend

Use hideLegend=True when the legend is redundant.

# File: docs/barchart_reference/nolegend_example.py

from dash_mui_charts import BarChart

from docs.barchart_reference._data import months, sales

component = BarChart(
    id='bar-ref-nolegend',
    series=[
        {'data': sales, 'label': 'Sales', 'color': '#7b1fa2'},
    ],
    xAxis=[{'data': months, 'scaleType': 'band'}],
    hideLegend=True,
    borderRadius=8,
    grid={'horizontal': True},
    height=280,
)

:defaultExpanded: false :withExpandedButton: true

Custom color palette

Override the default palette with the colors prop.

# File: docs/barchart_reference/colors_example.py

from dash_mui_charts import BarChart

component = BarChart(
    id='bar-ref-colors',
    series=[
        {'data': [30, 45, 35], 'label': 'East'},
        {'data': [25, 50, 40], 'label': 'West'},
        {'data': [40, 30, 55], 'label': 'Central'},
    ],
    xAxis=[{'data': ['2023', '2024', '2025'], 'scaleType': 'band'}],
    colors=['#ff6f00', '#00bfa5', '#6200ea'],
    grid={'horizontal': True},
    height=300,
)

:defaultExpanded: false :withExpandedButton: true

Related pages

• Basic · Dataset Mode · Stacking · Interaction · Pro Features

Source: /barchart-reference