Etiqueta para cada punto de datos react-chartjs-2

Estoy tratando de crear un gráfico de líneas simple en el que los conjuntos de datos pueden tener una cantidad variable de puntos de datos.

La idea sería que las etiquetas fueran un rango de valores y luego, en cada conjunto de datos, apuntar el punto de datos a la etiqueta correspondiente.

Actualmente estoy haciendo lo siguiente con respecto a la configuración del gráfico como ejemplo

    const data = {
        labels: ['0', '0.25', '0.5', '0.75', '1', '1.5', '2'],
        datasets: [
            {
                label: 'P97',
                data: [37.11,43.37,46.30,48.18,49.47,51.09,52.00],
                borderDash: [10,5],
                fill: false,
                backgroundColor: 'rgb(128, 128, 128)',
                borderColor: 'rgba(128, 128, 128, 0.2)',
            },
            {
                label: 'P50',
                data: [34.84 ,41.2 ,44.15 ,46.02 ,47.31 ,48.7 ,49.59],
                fill: false,
                backgroundColor: 'rgb(0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0.2)',
            }]

El problema aquí es que, en algún momento, P50podría tener más puntos de datos que P97, con esto y el enfoque de código que hice, el gráfico anterior se rompería.

Aquí hay un pseudocódigo de lo que estaría tratando de lograr

    const data = {
        labels: // Range between 0 and 2,
        datasets: [
            {
                label: 'P97',
                //labels: ['0', '1', '1.5', '2'],
                data: [37.11,49.47,51.09,52.00],
                borderDash: [10,5],
                fill: false,
                backgroundColor: 'rgb(128, 128, 128)',
                borderColor: 'rgba(128, 128, 128, 0.2)',
            },
            {
                label: 'P50',
                //labels: ['0', '0.25', '0.5', '0.75', '1', '1.5', '2'],
                data: [34.84 ,41.2 ,44.15 ,46.02 ,47.31 ,48.7 ,49.59],
                fill: false,
                backgroundColor: 'rgb(0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0.2)',
            }]

¿Es esto posible con los gráficos de reacción? También se agradecen otras tecnologías para esto si no es posible.

¡Gracias!

Answer