es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React: Quiero añadir texto al tooltip de react-chart-2.

21 Jul, 2023 Programación

Estoy usando react-chart-2.
Pasa el cursor sobre el gráfico para ver el tooltip. Quiero mostrar un % a la derecha del número, como 30%.
¿Cómo puedo agregar el carácter % al tooltip? Además, ¿cómo puedo establecer el valor izquierdo con un mínimo de 0 y un máximo de 100?

code

import "./styles.css";
import { Line } from "react-chartjs-2";

const App = () => {
  const data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "test",
        data: [30, 10, 10, 40, 70, 10, 30],
        fill: false,
        backgroundColor: "#F7C520",
        borderColor: "#F7C520",
        hoverBackgroundColor: "#E6B71E",
        hoverBorderColor: "#E6B71E"
      }
    ]
  };

const options = {
    responsive: true,
    tooltips: {
      mode: "label"
    },
    elements: {
      line: {
        fill: false
      }
    },
    scales: {
      xAxes: [
        {
          display: true,
          gridLines: {
            display: true
          }
        }
      ]
    }
  };

return (
    <div classname="App">
      <h2>Ejemplo de datos mixtos</h2>
      <line data="{data}" options="{options}"></line>
    </div>
  );
};

export default App;
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar el carácter % al tooltip, puedes modificar la opción tooltips en el objeto options. Establece la propiedad callbacks como un objeto con una función label que devuelva el valor de los datos seguido del carácter “%”.

    const options = {
  responsive: true,
  tooltips: {
    mode: "label",
    callbacks: {
      label: function(tooltipItem, data) {
        return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + "%";
      }
    }
  },
  ...
}

    Para establecer el valor mínimo en 0 y el máximo en 100 para el eje x, puedes modificar la opción scales en el objeto options. Establece la propiedad xAxes como un array con un objeto que tenga una propiedad ticks. Establece la propiedad min en 0 y la propiedad max en 100.

    const options = {
  ...
  scales: {
    xAxes: [
      {
        display: true,
        gridLines: {
          display: true
        },
        ticks: {
          min: 0,
          max: 100
        }
      }
    ]
  }
};

    Con estas opciones añadidas, al pasar el ratón sobre el gráfico se mostrará un tooltip con el valor de los datos seguido del carácter “%”, y el valor izquierdo del eje x estará limitado a un rango de 0 a 100.

Comments are closed.