MUI X Charts Skill

Overview

Guidance for implementing data visualizations using MUI X Charts in React applications.

Objective

Enable developers to create accessible, responsive charts and graphs using MUI X Charts library.

When to Use

Use this skill when:

• Creating data visualizations in MUI-based React apps
• Implementing line, bar, pie, or scatter charts
• Needing theme-aware charts that match MUI design
• Building responsive, interactive charts

Don't use this skill for:

• Complex visualizations (consider D3.js or Chart.js)
• Non-MUI projects (use other chart libraries)
• Real-time streaming data (limited support)

Critical Patterns

✅ REQUIRED: Provide Axis Labels and Legends

// ✅ CORRECT: Descriptive labels
<LineChart
  xAxis={[{ label: 'Month', data: months }]}
  yAxis={[{ label: 'Revenue ($)' }]}
  series={[{ data: revenue, label: 'Q1 2024' }]}
/>

// ❌ WRONG: No labels (inaccessible)
<LineChart
  xAxis={[{ data: months }]}
  series={[{ data: revenue }]}
/>

✅ REQUIRED: Use Responsive Sizing

// ✅ CORRECT: Container-based sizing
<Box sx={{ width: '100%', height: 400 }}>
  <LineChart /* ... */ />
</Box>

// ❌ WRONG: Fixed pixel sizes
<LineChart width={800} height={400} />

✅ REQUIRED: Ensure Color Contrast

// ✅ CORRECT: Use theme colors with good contrast
<LineChart
  series={[
    { data: data1, color: theme.palette.primary.main },
    { data: data2, color: theme.palette.secondary.main },
  ]}
/>

Conventions

Refer to mui for:

• Theme integration
• Component patterns

Refer to react for:

• Component structure
• Hooks usage

MUI X Charts Specific

• Choose appropriate chart type for data
• Implement responsive sizing
• Provide proper axis labels and legends
• Handle loading and error states
• Ensure color contrast for accessibility

Decision Tree

Time series data? → Use LineChart.

Categorical comparison? → Use BarChart.

Part-to-whole relationship? → Use PieChart.

Correlation between variables? → Use ScatterChart.

Multiple metrics? → Use multiple series in same chart or compose multiple charts.

Interactive tooltips? → Enabled by default, customize with tooltip prop.

Custom styling? → Use sx prop or theme customization.

Example

import { LineChart } from '@mui/x-charts/LineChart';

<LineChart
  xAxis={[{ data: [1, 2, 3, 4, 5] }]}
  series={[
    { data: [2, 5, 3, 7, 4], label: 'Series A' }
  ]}
  width={500}
  height={300}
/>

Edge Cases

Empty data: Handle gracefully with placeholder or message.

Large datasets: Consider data aggregation or sampling for performance.

Dynamic data: Use React state and update chart data reactively.

Accessibility: Provide alternative data representation (table) for screen readers.

Print support: Test chart rendering in print mode, may need CSS adjustments.

References

• https://mui.com/x/react-charts/