MUI X Charts 是 MUI 生态中的 React 图表库，包名为 @mui/x-charts，安装命令为 npm install @mui/x-charts。该库采用 MIT 许可证，所有图表类型均包含在免费的 Community 版本中。
用途
MUI X Charts 用于在 React 应用中绘制数据可视化图表，适合构建仪表盘、报表、数据分析界面以及需要嵌入图表的业务系统。
主要能力
基础图表
- BarChart：柱状图，支持通过 dataset 与 xAxis 的 dataKey 绑定数据，可设置 series 的 dataKey、label、color，并支持横向布局（layout="horizontal"）。
- LineChart：折线图，支持时间轴（scaleType: 'time'）、valueFormatter 格式化、area 填充区域、curve 曲线类型（linear、monotoneX、catmullRom、step）、showMark 显示标记点。
- PieChart：饼图/环形图，支持 innerRadius（大于 0 时为环形图）、outerRadius、paddingAngle、cornerRadius、startAngle、endAngle、cx、cy、highlightScope 高亮与淡出配置。
- ScatterChart：散点图，支持 xAxis、yAxis 标签，数据点为 { x, y, id } 结构。
组合式 API（Composition API）
通过 ResponsiveChartContainer 及 BarPlot、LinePlot、MarkPlot、ChartsXAxis、ChartsYAxis、ChartsTooltip、ChartsAxisHighlight、ChartsLegend、ChartsGrid 等子组件，可以自由组合图表图层，实现柱状图与折线图混排、双 Y 轴、自定义渲染顺序、在图层之间插入自定义 SVG 元素，以及精确控制包含哪些子组件。
自定义坐标轴
支持多种刻度类型：band（分类，常用于柱状图）、linear（数值）、time（日期）、log（对数）、point（等距）。可通过 valueFormatter 格式化刻度标签，通过 tickMinStep、tickMaxStep 控制刻度步长，并支持双 Y 轴（left/right 位置）。
提示框与图例
ChartsTooltip 支持 trigger="item"（按数据项）、trigger="axis"（按轴值）、trigger="none"（禁用）。可通过 slots={{ itemContent: CustomItemTooltip }} 自定义提示内容，使用 ChartsItemContentProps 获取 series、dataIndex、color。图例支持 direction（row/column）、position（vertical/horizontal）、padding、itemMarkWidth、itemMarkHeight、markGap、itemGap 等配置，也可通过 hidden: true 隐藏。
交互
支持 onItemClick（点击数据项，返回 type、seriesId、dataIndex）和 onAxisClick（点击轴，返回 axisValue、dataIndex）。通过 highlightScope 配置 highlighted 与 faded 实现高亮与淡出效果。
响应式与布局
使用 ResponsiveChartContainer 或在有明确尺寸的父容器中省略 width/height，图表会自动填充父容器宽度，并在窗口缩放时自动调整大小。可通过 margin 配置上、右、下、左外边距。
堆叠系列
通过 series 的 stack 属性实现堆叠柱状图与堆叠面积图，支持多个堆叠组（不同 stack 值）以及 stackOrder。
动画与颜色
支持 skipAnimation 关闭动画；动画默认启用。可为每个系列设置 color，也可使用内置调色板（blueberryTwilightPalette、mangoFusionPalette、cheerfulFiestaPalette），或结合 MUI 主题（useTheme）实现主题感知颜色。
其他图表
- SparkLineChart：用于仪表盘和表格的内联迷你图，支持折线（curve、area）与柱状（plotType="bar"），可在 DataGrid 单元格中渲染。
- Gauge：仪表盘图，支持 value、startAngle、endAngle、text 以及通过 gaugeClasses 定制样式。
数据绑定与样式
推荐使用 dataset + dataKey 模式，避免手动提取数组，适合数据来自 API 的场景。可通过 sx 定制坐标轴标签、轴线、网格线、图例文字等样式。
使用方式
通过 npm install @mui/x-charts 安装后，从 @mui/x-charts/BarChart、@mui/x-charts/LineChart、@mui/x-charts/PieChart、@mui/x-charts/ScatterChart、@mui/x-charts/SparkLineChart、@mui/x-charts/Gauge 等路径按需导入组件，在 React 组件中以 JSX 方式声明图表并传入 series、xAxis、yAxis、dataset 等属性。
适用场景
适合需要在 React 应用中快速构建柱状图、折线图、饼图、散点图、迷你图、仪表盘以及混合图表的场景，尤其是使用 MUI 组件库的项目。
限制
资料未提供服务端渲染、无障碍访问、导出图片、大数据量性能基准等具体说明。对于 1000 个点以上的大数据集，资料建议在渲染前进行降采样；频繁更新的图表可使用 skipAnimation；可通过 React.lazy 懒加载图表组件。自定义动画时长与缓动未直接以 props 暴露，资料建议使用 CSS 过渡实现额外动画效果。