Estoy tratando de trazar esta imagen y realmente no sé cómo hacerlo. Puedo mostrar radares, gráficos de barras, pero este no lo sé. Estoy usando la biblioteca de recharts . Con respecto al valor, no es necesariamente obligatorio obtener un total del 100% agregando campos notValidated y validated . Y si pasa el cursor, sale una barra gris transparente y muestra más información sobre los valores (vea la imagen por favor)

Aquí lo que he intentado obtener solo las barras verticales:

 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() } ) }

Aquí está el json de mi API:

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

Por favor, vea la imagen: