tessl/pypi-dash-mantine-components

Plotly Dash Components based on the Mantine React Components Library, providing over 90 high-quality UI components for building dashboards and web applications.

—

Pending

Overview

Eval results

Files

Chart Components

Name: tessl/pypi-dash-mantine-components
Author: tessl

Data visualization components providing various chart types including line charts, bar charts, pie charts, and specialized visualizations for data analysis dashboards.

Capabilities

Line and Area Charts

Charts for displaying trends and continuous data over time or categories.

def LineChart(
    data=[],  # Chart data
    h=400,  # Chart height
    dataKey="name",  # X-axis data key
    series=[],  # Data series configuration
    withLegend=True,  # Show legend
    withTooltip=True,  # Show tooltips
    withDots=True,  # Show data points
    dotProps=None,  # Dot styling properties
    strokeWidth=2,  # Line stroke width
    curveType="linear",  # Line curve type
    connectNulls=True,  # Connect null values
    **kwargs
): 
    """
    Line chart for trend visualization.
    
    Parameters:
    - data: List of data objects
    - h: Chart height in pixels
    - dataKey: Key for x-axis values
    - series: List of series config objects with name, color
    - withLegend: Display chart legend
    - withTooltip: Show hover tooltips
    - withDots: Show data point markers
    - dotProps: Styling for data points
    - strokeWidth: Line thickness
    - curveType: Line interpolation ("linear", "monotone", "step")
    - connectNulls: Connect across null values
    """

def AreaChart(
    data=[],  # Chart data
    h=400,  # Chart height
    dataKey="name",  # X-axis data key
    series=[],  # Data series configuration
    withLegend=True,  # Show legend
    withTooltip=True,  # Show tooltips
    withDots=False,  # Show data points
    fillOpacity=0.6,  # Area fill opacity
    strokeWidth=2,  # Stroke width
    curveType="linear",  # Curve type
    connectNulls=True,  # Connect null values
    **kwargs
): 
    """
    Area chart for showing data volume over time.
    
    Parameters:
    - data: List of data objects
    - h: Chart height in pixels
    - dataKey: Key for x-axis values
    - series: List of series configurations
    - withLegend: Display chart legend
    - withTooltip: Show hover tooltips
    - withDots: Show data point markers
    - fillOpacity: Area transparency (0-1)
    - strokeWidth: Border line thickness
    - curveType: Area interpolation type
    - connectNulls: Connect across null values
    """

Bar Charts

Charts for comparing categorical data with rectangular bars.

def BarChart(
    data=[],  # Chart data
    h=400,  # Chart height
    dataKey="name",  # Category data key
    series=[],  # Data series configuration
    withLegend=True,  # Show legend
    withTooltip=True,  # Show tooltips
    orientation="vertical",  # "vertical" | "horizontal"
    type="default",  # "default" | "stacked" | "percent"
    barProps=None,  # Bar styling properties
    tickLine="y",  # Tick line configuration
    gridAxis="x",  # Grid line axis
    **kwargs
): 
    """
    Bar chart for categorical data comparison.
    
    Parameters:
    - data: List of data objects
    - h: Chart height in pixels
    - dataKey: Key for category labels
    - series: List of bar series configurations
    - withLegend: Display chart legend
    - withTooltip: Show hover tooltips
    - orientation: Bar direction
    - type: Bar chart type (grouped, stacked, percent)
    - barProps: Styling properties for bars
    - tickLine: Axis for tick marks
    - gridAxis: Axis for grid lines
    """

Pie and Donut Charts

Circular charts for showing proportions and parts of a whole.

def PieChart(
    data=[],  # Chart data
    h=400,  # Chart height
    size=400,  # Chart diameter
    withTooltip=True,  # Show tooltips
    withLabels=False,  # Show slice labels
    withLabelsLine=False,  # Show label connection lines
    labelsPosition="outside",  # "inside" | "outside"
    labelsType="value",  # "value" | "percent"
    strokeWidth=1,  # Slice border width
    paddingAngle=0,  # Space between slices
    **kwargs
): 
    """
    Pie chart for showing proportional data.
    
    Parameters:
    - data: List of data objects with name, value, color
    - h: Chart container height
    - size: Chart diameter in pixels
    - withTooltip: Show hover tooltips
    - withLabels: Display slice labels
    - withLabelsLine: Show lines connecting labels
    - labelsPosition: Label positioning
    - labelsType: Label content type
    - strokeWidth: Border thickness around slices
    - paddingAngle: Angular space between slices
    """

def DonutChart(
    data=[],  # Chart data
    h=400,  # Chart height
    size=400,  # Chart diameter
    thickness=40,  # Ring thickness
    withTooltip=True,  # Show tooltips
    withLabels=False,  # Show slice labels
    withLabelsLine=False,  # Show label lines
    strokeWidth=1,  # Slice border width
    paddingAngle=0,  # Space between slices
    **kwargs
): 
    """
    Donut chart with hollow center.
    
    Parameters:
    - data: List of data objects
    - h: Chart container height
    - size: Chart diameter
    - thickness: Ring thickness in pixels
    - withTooltip: Show hover tooltips
    - withLabels: Display slice labels
    - withLabelsLine: Show label connection lines
    - strokeWidth: Slice border thickness
    - paddingAngle: Space between slices
    """

Scatter and Bubble Charts

Charts for showing relationships between variables.

def ScatterChart(
    data=[],  # Chart data
    h=400,  # Chart height
    dataKey="name",  # Data point key
    xAxisKey="x",  # X-axis data key
    yAxisKey="y",  # Y-axis data key
    withLegend=True,  # Show legend
    withTooltip=True,  # Show tooltips
    dotProps=None,  # Dot styling properties
    **kwargs
): 
    """
    Scatter plot for showing correlation between variables.
    
    Parameters:
    - data: List of data objects
    - h: Chart height in pixels
    - dataKey: Key for data point identification
    - xAxisKey: Key for x-coordinate values
    - yAxisKey: Key for y-coordinate values
    - withLegend: Display chart legend
    - withTooltip: Show hover tooltips
    - dotProps: Styling for scatter points
    """

def BubbleChart(
    data=[],  # Chart data
    h=400,  # Chart height
    dataKey="name",  # Data point key
    xAxisKey="x",  # X-axis data key
    yAxisKey="y",  # Y-axis data key
    sizeKey="size",  # Bubble size data key
    withLegend=True,  # Show legend
    withTooltip=True,  # Show tooltips
    range=[20, 400],  # Bubble size range
    **kwargs
): 
    """
    Bubble chart showing three-dimensional data relationships.
    
    Parameters:
    - data: List of data objects
    - h: Chart height in pixels
    - dataKey: Key for bubble identification
    - xAxisKey: Key for x-coordinate values
    - yAxisKey: Key for y-coordinate values
    - sizeKey: Key for bubble size values
    - withLegend: Display chart legend
    - withTooltip: Show hover tooltips
    - range: Bubble size range [min, max] in pixels
    """

Specialized Charts

Advanced chart types for specific visualization needs.

def RadarChart(
    data=[],  # Chart data
    h=400,  # Chart height
    dataKey="name",  # Data point key
    series=[],  # Data series configuration
    withPolarGrid=True,  # Show polar grid
    withPolarAngleAxis=True,  # Show angle axis
    withPolarRadiusAxis=False,  # Show radius axis
    withLegend=True,  # Show legend
    withTooltip=True,  # Show tooltips
    **kwargs
): 
    """
    Radar/spider chart for multivariate data comparison.
    
    Parameters:
    - data: List of data objects
    - h: Chart height in pixels
    - dataKey: Key for data categories
    - series: List of series configurations
    - withPolarGrid: Show polar grid lines
    - withPolarAngleAxis: Show angle axis labels
    - withPolarRadiusAxis: Show radius axis
    - withLegend: Display chart legend
    - withTooltip: Show hover tooltips
    """

def CompositeChart(
    data=[],  # Chart data
    h=400,  # Chart height
    dataKey="name",  # X-axis data key
    series=[],  # Mixed series configuration
    withLegend=True,  # Show legend
    withTooltip=True,  # Show tooltips
    **kwargs
): 
    """
    Composite chart combining multiple chart types.
    
    Parameters:
    - data: List of data objects
    - h: Chart height in pixels
    - dataKey: Key for x-axis values
    - series: Mixed series (line, bar, area) configurations
    - withLegend: Display chart legend
    - withTooltip: Show hover tooltips
    """

def Sparkline(
    data=[],  # Chart data
    h=60,  # Chart height
    w="100%",  # Chart width
    color="blue",  # Line color
    fillOpacity=0.2,  # Fill opacity
    strokeWidth=2,  # Line thickness
    curveType="linear",  # Curve type
    **kwargs
): 
    """
    Compact sparkline chart for inline data visualization.
    
    Parameters:
    - data: List of numeric values or data objects
    - h: Chart height in pixels
    - w: Chart width
    - color: Line and fill color
    - fillOpacity: Area fill transparency
    - strokeWidth: Line thickness
    - curveType: Line interpolation type
    """

Chart Configuration Types

# Series configuration for multi-series charts
class SeriesConfig:
    name: str  # Series name for legend
    dataKey: str  # Data key for values
    color: str  # Series color
    type: str  # Chart type ("line", "bar", "area")
    
# Data point structure for charts
class ChartDataPoint:
    name: str  # Category/label
    value: float  # Numeric value
    color: str  # Point/slice color (optional)
    
# Chart styling properties
class ChartProps:
    withLegend: bool  # Show legend
    withTooltip: bool  # Show tooltips
    withGrid: bool  # Show grid lines
    legendProps: dict  # Legend configuration
    tooltipProps: dict  # Tooltip configuration

Usage Examples

Line Chart with Multiple Series

import dash_mantine_components as dmc

line_data = [
    {"month": "Jan", "sales": 4000, "expenses": 2400},
    {"month": "Feb", "sales": 3000, "expenses": 1398},
    {"month": "Mar", "sales": 2000, "expenses": 9800},
    {"month": "Apr", "sales": 2780, "expenses": 3908},
    {"month": "May", "sales": 1890, "expenses": 4800},
    {"month": "Jun", "sales": 2390, "expenses": 3800}
]

line_chart = dmc.LineChart(
    data=line_data,
    h=300,
    dataKey="month",
    series=[
        {"name": "Sales", "dataKey": "sales", "color": "blue"},
        {"name": "Expenses", "dataKey": "expenses", "color": "red"}
    ],
    withLegend=True,
    withDots=True,
    curveType="monotone"
)

Bar Chart Comparison

bar_data = [
    {"category": "Q1", "desktop": 1200, "mobile": 900, "tablet": 400},
    {"category": "Q2", "desktop": 1900, "mobile": 1200, "tablet": 600},
    {"category": "Q3", "desktop": 1400, "mobile": 1000, "tablet": 500},
    {"category": "Q4", "desktop": 1600, "mobile": 1100, "tablet": 550}
]

bar_chart = dmc.BarChart(
    data=bar_data,
    h=350,
    dataKey="category",
    series=[
        {"name": "Desktop", "dataKey": "desktop", "color": "blue"},
        {"name": "Mobile", "dataKey": "mobile", "color": "green"},
        {"name": "Tablet", "dataKey": "tablet", "color": "orange"}
    ],
    type="stacked"
)

Pie Chart Distribution

pie_data = [
    {"name": "Desktop", "value": 45, "color": "blue"},
    {"name": "Mobile", "value": 35, "color": "green"},
    {"name": "Tablet", "value": 15, "color": "orange"},
    {"name": "Other", "value": 5, "color": "gray"}
]

pie_chart = dmc.PieChart(
    data=pie_data,
    h=400,
    withLabels=True,
    withTooltip=True,
    labelsType="percent"
)

Dashboard with Multiple Charts

dashboard = dmc.SimpleGrid([
    dmc.Paper([
        dmc.Title("Revenue Trend", order=3, mb="md"),
        line_chart
    ], p="md", shadow="sm"),
    
    dmc.Paper([
        dmc.Title("Quarterly Performance", order=3, mb="md"),
        bar_chart
    ], p="md", shadow="sm"),
    
    dmc.Paper([
        dmc.Title("Device Distribution", order=3, mb="md"),
        pie_chart
    ], p="md", shadow="sm"),
    
    dmc.Paper([
        dmc.Title("Daily Visitors", order=3, mb="md"),
        dmc.Sparkline(
            data=[20, 40, 40, 80, 40, 212, 320, 11, 9, 13, 41, 30, 87, 45],
            h=80,
            color="teal"
        )
    ], p="md", shadow="sm")
], cols=2)

Install with Tessl CLI

npx tessl i tessl/pypi-dash-mantine-components

docs