如何为MUI X折线图区域添加线性渐变颜色？

需要为折线图的两个填充区域分别应用以下线性渐变效果：

• Income区域：linear-gradient(180deg, rgba(47, 76, 221, 0.40) 16.8%, rgba(47, 76, 221, 0.00) 100%)
• Expense区域：linear-gradient(180deg, rgba(181, 25, 236, 0.40) -2.55%, rgba(181, 25, 236, 0.00) 100%)

以下是修改后的完整实现代码，通过SVG渐变定义+series样式配置实现需求：

import * as React from 'react';
import { LineChart } from '@mui/x-charts/LineChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490, 6490, 5321, 1321];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300, 10000, 1000, 7500];
const xLabels = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
];

const RevenueChart = () => {
    return (
        <LineChart
            margin={{ top: 100 }}
            width={550}
            height={350}
            grid={true}
            series={[
                { 
                    data: pData, 
                    label: 'Income', 
                    area: true,
                    style: {
                        area: { fill: 'url(#incomeGradient)' }
                    }
                },
                { 
                    data: uData, 
                    label: 'Expense', 
                    area: true,
                    style: {
                        area: { fill: 'url(#expenseGradient)' }
                    }
                },
            ]}
            xAxis={[{ scaleType: 'point', data: xLabels }]}
            slotProps={{
                legend: {
                    direction: 'row',
                    position: { vertical: 'top', horizontal: 'left' },
                    itemGap: 62,
                },
            }}
        >
            {/* 定义SVG线性渐变 */}
            <defs>
                <linearGradient id="incomeGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="16.8%" stopColor="rgba(47, 76, 221, 0.40)" />
                    <stop offset="100%" stopColor="rgba(47, 76, 221, 0.00)" />
                </linearGradient>
                <linearGradient id="expenseGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="-2.55%" stopColor="rgba(181, 25, 236, 0.40)" />
                    <stop offset="100%" stopColor="rgba(181, 25, 236, 0.00)" />
                </linearGradient>
            </defs>
        </LineChart>
    )
}

export default RevenueChart

关键说明 #

1. 在LineChart内部添加<defs>标签，定义两个SVG线性渐变，渐变方向设置为垂直（和原CSS渐变的180deg方向一致），并设置对应的颜色停止点。
2. 每个series通过style.area.fill引用对应的渐变ID，替换默认的纯色填充。

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