Estoy usando react-chartjs-2 para crear un gráfico semi-logarítmico usando algunos datos simples. Probé muchos ejemplos pero en el gráfico final no se dibuja la línea ni veo ningún error en la consola del navegador. Estoy usando Next.js y Tailwind CSS para este proyecto.

También intenté usar las técnicas descritas en los gráficos de series temporales, pero tampoco funcionan.

He descubierto cómo crear el eje y las marcas, ahora, ¿cómo dibujo la línea?

Aquí está mi código.

índice.js

 import { Chart as ChartJS, CategoryScale, LogarithmicScale, LogarithmicScaleOptions, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from "chart.js"; import { Line } from "react-chartjs-2"; ChartJS.register( LogarithmicScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend ); export const options = { scales: { x: { display: true, type: "logarithmic", min: 0.000001, max: 1, }, y: { display: true, min: 400, max: 2500, }, }, responsive: true, plugins: { legend: { position: "top", }, title: { display: true, text: "5W-10R", }, }, }; const vmax = [2000, 1750, 1500, 1250, 1000, 750, 500]; const tm = [ 0.0000125, 0.00001633, 0.00002222, 0.000032, 0.00005, 0.0002, 0.0008, ]; export const data = { tm, datasets: [ { label: "Dataset 1", data: vmax, borderColor: "rgb(255, 99, 132)", backgroundColor: "rgba(255, 99, 132, 0.5)", }, ], }; export default function Home({}) { return ( <div className=""> <div className="flex flex-col items-center justify-center min-h-screen py-2"> <main className="flex flex-col items-center w-full flex-1 px-10 "> <Line options={options} data={data} /> </main> </div> </div> ); }

Resultado: