Chart line not appearing in a semi log chart using chart.js

Question

I am using react-chartjs-2 to create a semi log chart using some simple data. I tried many examples but in the final chart the line isn't drawn nor I see any error in the browser console. I am using Next.js & Tailwind CSS for this project.

I also tried using the techniques described in the time series charts but those also don't work

I have figured out how to create the axis and ticks , now how do I draw the line ?

Here is my code.

index.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>
  );
}

Result:

Answer 1

You don't pass an option to the labels array, you pass the tm variable which means it will use that as a key, you need to pass it as:

const data = {
  labels: tm,
  datasets: []
}