I'm trying to plot this picture and I really don't know how to do that. I can display radars, bars graphs but this one I don't know. I'm using recharts library. Reagarding the value, it's not necessarilary mandatory to get total 100% by addind notValidated and validated fields. And if you pass the cursor, you get a gray transparent bar and it shows more information on the values (see the picture please)

Here what I've tried to get only the vertically bars :

export default function GraphsPlot() {

    const { gradesPlot, validationPlot } = graphs ?? {}
    ...
    function validationBar() {
        data = validationPlot
        return ({
            title: 'Grades',
            graph: {
                type: 'bar',
                showTooltip: true,
                showXAxis: true,
                showYAxis: true,
                container: {
                    data,
                },
                bars:
                    [
                        {
                            dataKey: 'validated',
                            cells: data.map(d => ({
                                stroke: 'transparent',
                                fill: 'green'
                            }))
                        }
                    ],
                [
                    {
                        dataKey: 'notValidated',
                        cells: data.map(d => ({
                            stroke: 'transparent',
                            fill: 'red'
                        }))
                    }
                ],
                xaxis: {
                    dataKey: 'title',
                    interval: 0,
                    tick: { style: { fontSize: '.9rem' } },
                },
                yaxis: {
                    dataKey: 'Grades',
                    domain: [0, 100],
                },
            },
        }).graph
    }
    return (
        { ...validationBar() }

    )
}

Here is the json from my api :

{
        "gradesPlot": [...],
        "validationPlot": [
            {
                "title": "Maths",
                "notValidated": 25,
                "validated": 75,
            },
            {
                "title": "Physics",
                "notValidated": 10,
                "validated": 30,
            },
        ]
}

Please see the picture :