# Bar Chart - Reference Lines

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

**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

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



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



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



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



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



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



```python
# 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](/barchart-basic) · [Dataset Mode](/barchart-dataset) · [Stacking](/barchart-stacking) · [Interaction](/barchart-interaction) · [Pro Features](/barchart-pro)


---

*Source: /barchart-reference*