MUI Charts中能否在同一容器内组合折线图与水平柱状图？

这个需求是可以实现的，你的问题出在轴类型与系列布局的配置冲突上。以下是具体的问题分析和修正方案：

问题根源 #

1. 水平柱状图（layout: "horizontal"）要求关联的y轴必须是band类型（用于承载分类数据），这也是你第一次报错的核心原因。
2. 当你将右侧y轴改为band类型后，左侧y轴仍是默认的linear类型，两种不同类型的y轴在同一图表中会触发渲染逻辑冲突，导致出现TypeError: _ is undefined。

可行配置方案 #

要在同一Chart容器内共存折线图和水平柱状图，需要让两个系列共享同一个band类型的分类轴，同时为不同的数值指标配置独立的轴。具体步骤如下：

1. 统一分类轴类型 #

将y轴设置为band类型，作为两个系列共享的分类轴（比如日期、类别等离散数据）。

2. 折线图适配横向布局 #

将折线图也设置为layout: "horizontal"，使其与水平柱状图共用y轴，同时用不同的x轴区分数值数据。

3. 配置双数值x轴 #

为折线图和柱状图分别配置linear类型的x轴，用于展示不同的数值指标。

完整代码示例 #

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

// 示例数据：分类为日期，对应温度极值、降水量三个指标
const data = [
  { category: '1/1', min: 5, max: 15, precip: 20 },
  { category: '1/2', min: 7, max: 18, precip: 15 },
  { category: '1/3', min: 6, max: 16, precip: 25 },
];

export default function CombinedChart() {
  return (
    <Chart
      width={800}
      height={500}
      series={[
        // 折线图：横向布局，关联左侧温度数值轴
        { type: 'line', dataKey: 'min', color: '#577399', layout: 'horizontal', xAxisId: 'tempX' },
        { type: 'line', dataKey: 'max', color: '#fe5f55', layout: 'horizontal', xAxisId: 'tempX' },
        // 水平柱状图：关联右侧降水量数值轴
        { type: 'bar', layout: 'horizontal', dataKey: 'precip', color: '#bfdbf7', xAxisId: 'precipX' },
      ]}
      xAxis={[
        { id: 'tempX', scaleType: 'linear', position: 'top', label: '温度 (°C)' },
        { id: 'precipX', scaleType: 'linear', position: 'bottom', label: '降水量 (mm)' },
      ]}
      yAxis={[{ scaleType: 'band', dataKey: 'category', label: '日期' }]}
      dataset={data}
    />
  );
}

替代方案（若需折线图纵向） #

如果必须保留折线图的纵向布局（x轴为分类，y轴为数值），同时展示水平柱状图，建议将两个独立的Chart组件放在同一个容器中（比如Flex布局的div），避免单Chart组件内的轴类型冲突。

内容的提问来源于stack exchange，提问作者Tulamordew