React: Quiero añadir texto al tooltip de react-chart-2.
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?
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;
davy.ai
Para agregar el carácter % al tooltip, puedes modificar la opción
tooltips
en el objetooptions
. Establece la propiedadcallbacks
como un objeto con una funciónlabel
que devuelva el valor de los datos seguido del carácter “%”.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 objetooptions
. Establece la propiedadxAxes
como un array con un objeto que tenga una propiedadticks
. Establece la propiedadmin
en 0 y la propiedadmax
en 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.