0
# Chart Components
1
2
Data visualization components providing various chart types including line charts, bar charts, pie charts, and specialized visualizations for data analysis dashboards.
3
4
## Capabilities
5
6
### Line and Area Charts
7
8
Charts for displaying trends and continuous data over time or categories.
9
10
```python { .api }
11
def LineChart(
12
data=[], # Chart data
13
h=400, # Chart height
14
dataKey="name", # X-axis data key
15
series=[], # Data series configuration
16
withLegend=True, # Show legend
17
withTooltip=True, # Show tooltips
18
withDots=True, # Show data points
19
dotProps=None, # Dot styling properties
20
strokeWidth=2, # Line stroke width
21
curveType="linear", # Line curve type
22
connectNulls=True, # Connect null values
23
**kwargs
24
):
25
"""
26
Line chart for trend visualization.
27
28
Parameters:
29
- data: List of data objects
30
- h: Chart height in pixels
31
- dataKey: Key for x-axis values
32
- series: List of series config objects with name, color
33
- withLegend: Display chart legend
34
- withTooltip: Show hover tooltips
35
- withDots: Show data point markers
36
- dotProps: Styling for data points
37
- strokeWidth: Line thickness
38
- curveType: Line interpolation ("linear", "monotone", "step")
39
- connectNulls: Connect across null values
40
"""
41
42
def AreaChart(
43
data=[], # Chart data
44
h=400, # Chart height
45
dataKey="name", # X-axis data key
46
series=[], # Data series configuration
47
withLegend=True, # Show legend
48
withTooltip=True, # Show tooltips
49
withDots=False, # Show data points
50
fillOpacity=0.6, # Area fill opacity
51
strokeWidth=2, # Stroke width
52
curveType="linear", # Curve type
53
connectNulls=True, # Connect null values
54
**kwargs
55
):
56
"""
57
Area chart for showing data volume over time.
58
59
Parameters:
60
- data: List of data objects
61
- h: Chart height in pixels
62
- dataKey: Key for x-axis values
63
- series: List of series configurations
64
- withLegend: Display chart legend
65
- withTooltip: Show hover tooltips
66
- withDots: Show data point markers
67
- fillOpacity: Area transparency (0-1)
68
- strokeWidth: Border line thickness
69
- curveType: Area interpolation type
70
- connectNulls: Connect across null values
71
"""
72
```
73
74
### Bar Charts
75
76
Charts for comparing categorical data with rectangular bars.
77
78
```python { .api }
79
def BarChart(
80
data=[], # Chart data
81
h=400, # Chart height
82
dataKey="name", # Category data key
83
series=[], # Data series configuration
84
withLegend=True, # Show legend
85
withTooltip=True, # Show tooltips
86
orientation="vertical", # "vertical" | "horizontal"
87
type="default", # "default" | "stacked" | "percent"
88
barProps=None, # Bar styling properties
89
tickLine="y", # Tick line configuration
90
gridAxis="x", # Grid line axis
91
**kwargs
92
):
93
"""
94
Bar chart for categorical data comparison.
95
96
Parameters:
97
- data: List of data objects
98
- h: Chart height in pixels
99
- dataKey: Key for category labels
100
- series: List of bar series configurations
101
- withLegend: Display chart legend
102
- withTooltip: Show hover tooltips
103
- orientation: Bar direction
104
- type: Bar chart type (grouped, stacked, percent)
105
- barProps: Styling properties for bars
106
- tickLine: Axis for tick marks
107
- gridAxis: Axis for grid lines
108
"""
109
```
110
111
### Pie and Donut Charts
112
113
Circular charts for showing proportions and parts of a whole.
114
115
```python { .api }
116
def PieChart(
117
data=[], # Chart data
118
h=400, # Chart height
119
size=400, # Chart diameter
120
withTooltip=True, # Show tooltips
121
withLabels=False, # Show slice labels
122
withLabelsLine=False, # Show label connection lines
123
labelsPosition="outside", # "inside" | "outside"
124
labelsType="value", # "value" | "percent"
125
strokeWidth=1, # Slice border width
126
paddingAngle=0, # Space between slices
127
**kwargs
128
):
129
"""
130
Pie chart for showing proportional data.
131
132
Parameters:
133
- data: List of data objects with name, value, color
134
- h: Chart container height
135
- size: Chart diameter in pixels
136
- withTooltip: Show hover tooltips
137
- withLabels: Display slice labels
138
- withLabelsLine: Show lines connecting labels
139
- labelsPosition: Label positioning
140
- labelsType: Label content type
141
- strokeWidth: Border thickness around slices
142
- paddingAngle: Angular space between slices
143
"""
144
145
def DonutChart(
146
data=[], # Chart data
147
h=400, # Chart height
148
size=400, # Chart diameter
149
thickness=40, # Ring thickness
150
withTooltip=True, # Show tooltips
151
withLabels=False, # Show slice labels
152
withLabelsLine=False, # Show label lines
153
strokeWidth=1, # Slice border width
154
paddingAngle=0, # Space between slices
155
**kwargs
156
):
157
"""
158
Donut chart with hollow center.
159
160
Parameters:
161
- data: List of data objects
162
- h: Chart container height
163
- size: Chart diameter
164
- thickness: Ring thickness in pixels
165
- withTooltip: Show hover tooltips
166
- withLabels: Display slice labels
167
- withLabelsLine: Show label connection lines
168
- strokeWidth: Slice border thickness
169
- paddingAngle: Space between slices
170
"""
171
```
172
173
### Scatter and Bubble Charts
174
175
Charts for showing relationships between variables.
176
177
```python { .api }
178
def ScatterChart(
179
data=[], # Chart data
180
h=400, # Chart height
181
dataKey="name", # Data point key
182
xAxisKey="x", # X-axis data key
183
yAxisKey="y", # Y-axis data key
184
withLegend=True, # Show legend
185
withTooltip=True, # Show tooltips
186
dotProps=None, # Dot styling properties
187
**kwargs
188
):
189
"""
190
Scatter plot for showing correlation between variables.
191
192
Parameters:
193
- data: List of data objects
194
- h: Chart height in pixels
195
- dataKey: Key for data point identification
196
- xAxisKey: Key for x-coordinate values
197
- yAxisKey: Key for y-coordinate values
198
- withLegend: Display chart legend
199
- withTooltip: Show hover tooltips
200
- dotProps: Styling for scatter points
201
"""
202
203
def BubbleChart(
204
data=[], # Chart data
205
h=400, # Chart height
206
dataKey="name", # Data point key
207
xAxisKey="x", # X-axis data key
208
yAxisKey="y", # Y-axis data key
209
sizeKey="size", # Bubble size data key
210
withLegend=True, # Show legend
211
withTooltip=True, # Show tooltips
212
range=[20, 400], # Bubble size range
213
**kwargs
214
):
215
"""
216
Bubble chart showing three-dimensional data relationships.
217
218
Parameters:
219
- data: List of data objects
220
- h: Chart height in pixels
221
- dataKey: Key for bubble identification
222
- xAxisKey: Key for x-coordinate values
223
- yAxisKey: Key for y-coordinate values
224
- sizeKey: Key for bubble size values
225
- withLegend: Display chart legend
226
- withTooltip: Show hover tooltips
227
- range: Bubble size range [min, max] in pixels
228
"""
229
```
230
231
### Specialized Charts
232
233
Advanced chart types for specific visualization needs.
234
235
```python { .api }
236
def RadarChart(
237
data=[], # Chart data
238
h=400, # Chart height
239
dataKey="name", # Data point key
240
series=[], # Data series configuration
241
withPolarGrid=True, # Show polar grid
242
withPolarAngleAxis=True, # Show angle axis
243
withPolarRadiusAxis=False, # Show radius axis
244
withLegend=True, # Show legend
245
withTooltip=True, # Show tooltips
246
**kwargs
247
):
248
"""
249
Radar/spider chart for multivariate data comparison.
250
251
Parameters:
252
- data: List of data objects
253
- h: Chart height in pixels
254
- dataKey: Key for data categories
255
- series: List of series configurations
256
- withPolarGrid: Show polar grid lines
257
- withPolarAngleAxis: Show angle axis labels
258
- withPolarRadiusAxis: Show radius axis
259
- withLegend: Display chart legend
260
- withTooltip: Show hover tooltips
261
"""
262
263
def CompositeChart(
264
data=[], # Chart data
265
h=400, # Chart height
266
dataKey="name", # X-axis data key
267
series=[], # Mixed series configuration
268
withLegend=True, # Show legend
269
withTooltip=True, # Show tooltips
270
**kwargs
271
):
272
"""
273
Composite chart combining multiple chart types.
274
275
Parameters:
276
- data: List of data objects
277
- h: Chart height in pixels
278
- dataKey: Key for x-axis values
279
- series: Mixed series (line, bar, area) configurations
280
- withLegend: Display chart legend
281
- withTooltip: Show hover tooltips
282
"""
283
284
def Sparkline(
285
data=[], # Chart data
286
h=60, # Chart height
287
w="100%", # Chart width
288
color="blue", # Line color
289
fillOpacity=0.2, # Fill opacity
290
strokeWidth=2, # Line thickness
291
curveType="linear", # Curve type
292
**kwargs
293
):
294
"""
295
Compact sparkline chart for inline data visualization.
296
297
Parameters:
298
- data: List of numeric values or data objects
299
- h: Chart height in pixels
300
- w: Chart width
301
- color: Line and fill color
302
- fillOpacity: Area fill transparency
303
- strokeWidth: Line thickness
304
- curveType: Line interpolation type
305
"""
306
```
307
308
## Chart Configuration Types
309
310
```python { .api }
311
# Series configuration for multi-series charts
312
class SeriesConfig:
313
name: str # Series name for legend
314
dataKey: str # Data key for values
315
color: str # Series color
316
type: str # Chart type ("line", "bar", "area")
317
318
# Data point structure for charts
319
class ChartDataPoint:
320
name: str # Category/label
321
value: float # Numeric value
322
color: str # Point/slice color (optional)
323
324
# Chart styling properties
325
class ChartProps:
326
withLegend: bool # Show legend
327
withTooltip: bool # Show tooltips
328
withGrid: bool # Show grid lines
329
legendProps: dict # Legend configuration
330
tooltipProps: dict # Tooltip configuration
331
```
332
333
## Usage Examples
334
335
### Line Chart with Multiple Series
336
337
```python
338
import dash_mantine_components as dmc
339
340
line_data = [
341
{"month": "Jan", "sales": 4000, "expenses": 2400},
342
{"month": "Feb", "sales": 3000, "expenses": 1398},
343
{"month": "Mar", "sales": 2000, "expenses": 9800},
344
{"month": "Apr", "sales": 2780, "expenses": 3908},
345
{"month": "May", "sales": 1890, "expenses": 4800},
346
{"month": "Jun", "sales": 2390, "expenses": 3800}
347
]
348
349
line_chart = dmc.LineChart(
350
data=line_data,
351
h=300,
352
dataKey="month",
353
series=[
354
{"name": "Sales", "dataKey": "sales", "color": "blue"},
355
{"name": "Expenses", "dataKey": "expenses", "color": "red"}
356
],
357
withLegend=True,
358
withDots=True,
359
curveType="monotone"
360
)
361
```
362
363
### Bar Chart Comparison
364
365
```python
366
bar_data = [
367
{"category": "Q1", "desktop": 1200, "mobile": 900, "tablet": 400},
368
{"category": "Q2", "desktop": 1900, "mobile": 1200, "tablet": 600},
369
{"category": "Q3", "desktop": 1400, "mobile": 1000, "tablet": 500},
370
{"category": "Q4", "desktop": 1600, "mobile": 1100, "tablet": 550}
371
]
372
373
bar_chart = dmc.BarChart(
374
data=bar_data,
375
h=350,
376
dataKey="category",
377
series=[
378
{"name": "Desktop", "dataKey": "desktop", "color": "blue"},
379
{"name": "Mobile", "dataKey": "mobile", "color": "green"},
380
{"name": "Tablet", "dataKey": "tablet", "color": "orange"}
381
],
382
type="stacked"
383
)
384
```
385
386
### Pie Chart Distribution
387
388
```python
389
pie_data = [
390
{"name": "Desktop", "value": 45, "color": "blue"},
391
{"name": "Mobile", "value": 35, "color": "green"},
392
{"name": "Tablet", "value": 15, "color": "orange"},
393
{"name": "Other", "value": 5, "color": "gray"}
394
]
395
396
pie_chart = dmc.PieChart(
397
data=pie_data,
398
h=400,
399
withLabels=True,
400
withTooltip=True,
401
labelsType="percent"
402
)
403
```
404
405
### Dashboard with Multiple Charts
406
407
```python
408
dashboard = dmc.SimpleGrid([
409
dmc.Paper([
410
dmc.Title("Revenue Trend", order=3, mb="md"),
411
line_chart
412
], p="md", shadow="sm"),
413
414
dmc.Paper([
415
dmc.Title("Quarterly Performance", order=3, mb="md"),
416
bar_chart
417
], p="md", shadow="sm"),
418
419
dmc.Paper([
420
dmc.Title("Device Distribution", order=3, mb="md"),
421
pie_chart
422
], p="md", shadow="sm"),
423
424
dmc.Paper([
425
dmc.Title("Daily Visitors", order=3, mb="md"),
426
dmc.Sparkline(
427
data=[20, 40, 40, 80, 40, 212, 320, 11, 9, 13, 41, 30, 87, 45],
428
h=80,
429
color="teal"
430
)
431
], p="md", shadow="sm")
432
], cols=2)
433
```