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,
},
]
}