Question 382891 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to generate time chart in Chart.js?

I’m making a simple server log, and I want use Chart.js to generate total hit reports by hour, day, month or year. Here is my code:

import { ChartColors } from "$fresh_charts/utils.ts";
import Chart from "../../islands/chart.tsx";

const data = [
  { x: "2016-12-25", y: 20 },
  { x: "2017-12-26", y: 10 },
  { x: "2020-12-26", y: 10 },
  { x: "2024-12-26", y: 10 },
]
export default function ChartPage(props) {
  return (
    <div class="p-4 mx-auto max-w-screen-md">
      <Chart
        type="line"
        options={{
          scales: {
            x: {
              type: "time",
              time: {
                "unit": "year",
              },
              displayFormats: {
                "year": "YYYY",
              },
            },
            y: { beginAtZero: true },
          },
        }}
        data={{
          datasets: [
            {
              label: "Users",
              data: data,
              borderColor: ChartColors.Blue,
              borderWidth: 1,
            },
          ],
        }}
      />
    </div>
  );
}

If I comment out the x scale option totally, then the chart is generated fine (though incorrectly in scale). If I keep the x scale option, then it cannot be rendered. I know I misconfigure something in Time Cartesian Axis, but I cannot figure it out. How to make this work?

Tags:

2

Answers


  1. 0

    I believe that you are not installing and importing the Date Adapter library.

    1. Install the date adapter library.
    {
  ...,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "chart.js": "^4.4.2",
    "chartjs-adapter-moment": "^1.0.0"
  },
  ...
}
    1. Importing the date adapter library in chart.tsx
    import 'chartjs-adapter-moment';

    Demo @ StackBlitz

    Login or Signup to reply.
  2. 0

    This can also help :

     import { ChartColors } from "$fresh_charts/utils.ts";
 import Chart from "../../islands/chart.tsx";

 const data = [
 { x: "2016-12-25", y: 20 },
 { x: "2017-12-26", y: 10 },
 { x: "2020-12-26", y: 10 },
 { x: "2024-12-26", y: 10 },
 ];

 export default function ChartPage(props) {
 return (
   <div class="p-4 mx-auto max-w-screen-md">
     <Chart
       type="line"
       options={{
       scales: {
        x: {
          type: "time",
          time: {
            unit: "year", 
            displayFormats: {
              year: "YYYY",
            },
          },
          title: {
            display: true,
            text: "Year", 
          },
        },
        y: { 
          beginAtZero: true,
          title: {
            display: true,
            text: "Users",
          },
        },
      },
    }}
    data={{
      datasets: [
        {
          label: "Users",
          data: data.map(({ x, y }) => ({ x: new Date(x), y })),
          borderColor: ChartColors.Blue,
          borderWidth: 1,
        },
      ],
    }}
  />
</div>
);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search