How can I add linear gradient colors to my MUI X line Chart area?

Question

Here are the linear gradients I have
fill: linear-gradient(180deg, rgba(47, 76, 221, 0.40) 16.8%, rgba(47, 76, 221, 0.00) 100%);
fill: linear-gradient(180deg, rgba(181, 25, 236, 0.40) -2.55%, rgba(181, 25, 236, 0.00) 100%);

Here is my code

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' },
                { data: uData, label: 'Expense', area: 'true' },
            ]}
            xAxis={[{ scaleType: 'point', data: xLabels }]}
            slotProps={{
                legend: {
                    direction: 'row',
                    position: { vertical: 'top', horizontal: 'left' },
                    itemGap: 62,
                },
            }}




        />
    )
}


export default RevenueChart

Answer 1

Here is the answer I found

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

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',
];

After importing the dependencies, I defined a define a component called Colorswitch. I used this component to create my linear gradients for use in line chart area SVG element.

const Colorswitch = () => {
    const { top, height, bottom } = useDrawingArea();
    const svgHeight = top + bottom + height;

    return (
        <>
            <defs>
                <linearGradient id="paint0_linear_45_2" x1="300.25" y1="46.9999" x2="300.25" y2={`${svgHeight}px`} gradientUnits="userSpaceOnUse">
                    <stop stop-color="#2F4CDD" stop-opacity="0.4" />
                    <stop offset="1" stop-color="#2F4CDD" stop-opacity="0" />
                </linearGradient>
            </defs>

            <defs>
                <linearGradient id="paint0_linear_45_3" x1="299.498" y1="-4.28272" x2="299.498" y2={`${svgHeight}px`} gradientUnits="userSpaceOnUse">
                    <stop stop-color="#B519EC" stop-opacity="0.4" />
                    <stop offset="1" stop-color="#B519EC" stop-opacity="0" />
                </linearGradient>
            </defs>
        </>
    )
}

Then I passed it as a child of the LineChart. And used sx to pass the id of my linearGradients.

const RevenueChart = () => {
    return (
        <LineChart
            margin={{ top: 100 }}
            width={550}
            height={350}
            grid={true}
            colors={['#2F4CDD', '#B519EC']}
            series={[
                { data: pData, label: 'Income', area: 'true' },
                { data: uData, label: 'Expense', area: 'true' },
            ]}
            xAxis={[{ scaleType: 'point', data: xLabels }]}
            slotProps={{
                legend: {
                    direction: 'row',
                    position: { vertical: 'top', horizontal: 'left' },
                    itemGap: 62,
                },
            }}
{/* Found the class of each one of my line charts and passed the id of my specific linear gradient to it  */}
            sx={{
                '.css-j6h5qe-MuiAreaElement-root': {
                    fill: 'url(#paint0_linear_45_2)',
                },
                '.css-tvglr0-MuiAreaElement-root': {
                    fill: 'url(#paint0_linear_45_3)',
                },

            }}
        >
           {/* Passed as a child */}
            <Colorswitch />

        </LineChart>
    )
}



export default RevenueChart