Dash Mantine Components Charts

Dash Python
1

Hi All,

The documentation for the Dash Mantine Component Charts is now available :tada:

  • Area Chart
  • Bar Chart
  • Donut Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Sparkline

image
image1920×1287 111 KB

The Mantine charts are built on the Recharts library, known for its simplicity and ease of use. Recharts integrates well with dash-mantine-components, allowing easy styling with your app’s theme colors. Additionally, the charts automatically update when switching between light and dark themes - no callback required!.

Note - For highly customizable figures or when working with large data sets, Plotly remains the better option.

Here’s a minimal app to get you started - it includes a theme switch component too!


import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash import Dash, Input, Output, State, callback, _dash_renderer
_dash_renderer._set_react_version("18.2.0")

theme_toggle = dmc.ActionIcon(
    [
        dmc.Paper(DashIconify(icon="radix-icons:sun", width=25), darkHidden=True),
        dmc.Paper(DashIconify(icon="radix-icons:moon", width=25), lightHidden=True),
    ],
    variant="transparent",
    color="yellow",
    id="color-scheme-toggle",
    size="lg",
    ms="auto",
)

data = [
  {"date": "Mar 22", "Apples": 2890, "Oranges": 2338, "Tomatoes": 2452},
  {"date": "Mar 23", "Apples": 2756, "Oranges": 2103, "Tomatoes": 2402},
  {"date": "Mar 24", "Apples": 3322, "Oranges": 986, "Tomatoes": 1821},
  {"date": "Mar 25", "Apples": 3470, "Oranges": 2108, "Tomatoes": 2809},
  {"date": "Mar 26", "Apples": 3129, "Oranges": 1726, "Tomatoes": 2290}
]


area_chart = dmc.AreaChart(
    h=300,
    dataKey="date",
    data=data,
    type="stacked",
    withLegend=True,
    series=[
        {"name": "Apples", "color": "indigo.6"},
        {"name": "Oranges", "color": "blue.6"},
        {"name": "Tomatoes", "color": "teal.6"}
    ]
)

stylesheets = [
    "https://unpkg.com/@mantine/dates@7/styles.css",
    "https://unpkg.com/@mantine/code-highlight@7/styles.css",
    "https://unpkg.com/@mantine/charts@7/styles.css",
    "https://unpkg.com/@mantine/carousel@7/styles.css",
    "https://unpkg.com/@mantine/notifications@7/styles.css",
    "https://unpkg.com/@mantine/nprogress@7/styles.css",
]
 # Note - in dmc>= 0.14.4 you can use
 # stylesheets = [dmc.styles.ALL]
 
app = Dash(__name__, external_stylesheets=stylesheets)

app.layout = dmc.MantineProvider(
    dmc.Container(
        [theme_toggle, dmc.Divider(mb="lg"), dmc.Text("DMC Area Chart"),  area_chart],
        fluid=True,
    ),
    id="mantine-provider",
    forceColorScheme="light",
)


@callback(
    Output("mantine-provider", "forceColorScheme"),
    Input("color-scheme-toggle", "n_clicks"),
    State("mantine-provider", "forceColorScheme"),
    prevent_initial_call=True,
)
def switch_theme(_, theme):
    return "dark" if theme == "light" else "light"


if __name__ == "__main__":
    app.run(debug=True)
8 Likes
2

Just cross posting here from a question asked over in the dmc Discord channel…

It’s possible to enable animations in the charts. See the Rechart docs for more examples.

Mantine has the annimation turned off by default, but you can pass extra props to Recharts using the property <chartname>Props — for example for the pie chart, use pieProps

dmc.PieChart(
  data=[
      { "name": "Test1", "value": 2, "color": "teal.6" },
      { "name": "Test2", "value": 1, "color": "indigo.6" },
  ],
  withLabelsLine=True,
  labelsPosition="outside",
  labelsType="value",
  withLabels=True,
  pieProps={ "isAnimationActive": True, "dataKey": "value" }
)

This gif isn’t high quality - it’s actually smoother in the app

dmc_pie

1 Like
3

Just some casual :100: A+ developer stuff. Awsome as always! Looks great!

2 Likes