How to enable timescale in chart.js line chart?

user_16452315 0
Viewed 311

I build an example line chart with chart.js. Here is my html and js code. I see chart with my data set is drawn.

But when I try to enable time scale in my x axis by adding this in options,

const config = {
    type: 'line',
    data: data,
    options: {
        responsive: true,
        scales: {
            x: {
                type: 'time',
            }
        }
    }
};

no chart is being drawn. And I don't see any error in browser console. Can you please tell me what am I missing?

Working html and js without time axis enable.

<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Integration</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>

<canvas id="line-chart" width="800" height="450"></canvas>

<script>
    const data = {
        datasets: [{
            label: 'my first dataset',
            borderColor: 'rgb(255, 99, 132)',

            data: [{ x: "2016-12-25", y: 3 }, { x: "2016-12-28", y: 10 }, { x: "2016-12-29", y: 5 }, { x: "2016-12-30", y: 2 }, { x: "2017-1-3", y: 20 }, { x: "2017-1-5", y: 30 }, { x: "2017-1-8", y: 45 }],
        }
        ,
        {
            label: 'My Second dataset',
            borderColor: 'rgb(99, 255, 132)',

            data: [{ x: "2016-12-25", y: 20 }, { x: "2016-12-27", y: 62 }, { x: "2016-12-26", y: 15 }, { x: "2016-12-31", y: 172 }, { x: "2017-1-1", y: 30 }, { x: "2017-1-5", y: 50 }, { x: "2017-1-6", y: 25 }],
        }
        ]
    };

    const config = {
        type: 'line',
        data: data,
        options: {
            responsive: true,
        }
    };

    const myChart = new Chart(
        document.getElementById('line-chart'),
        config
    );
</script>

But

chart.js javascript
1 Answers

Reason your time axis is not working is because since chart.js V3 you will need to include your own date adapter, chart.js does not ship with a default date adapter anymore. For more information see the documentation

const data = {
  datasets: [{
      label: 'my first dataset',
      borderColor: 'rgb(255, 99, 132)',

      data: [{
        x: "2016-12-25",
        y: 3
      }, {
        x: "2016-12-28",
        y: 10
      }, {
        x: "2016-12-29",
        y: 5
      }, {
        x: "2016-12-30",
        y: 2
      }, {
        x: "2017-01-03",
        y: 20
      }, {
        x: "2017-01-05",
        y: 30
      }, {
        x: "2017-01-08",
        y: 45
      }],
    },
    {
      label: 'My Second dataset',
      borderColor: 'rgb(99, 255, 132)',

      data: [{
        x: "2016-12-25",
        y: 20
      }, {
        x: "2016-12-27",
        y: 62
      }, {
        x: "2016-12-26",
        y: 15
      }, {
        x: "2016-12-31",
        y: 172
      }, {
        x: "2017-01-01",
        y: 30
      }, {
        x: "2017-01-05",
        y: 50
      }, {
        x: "2017-01-06",
        y: 25
      }],
    }
  ]
};

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    scales: {
      x: {
        type: 'time',
      }
    }
  },
};

const myChart = new Chart(
  document.getElementById('line-chart'),
  config
);
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chart.js Integration</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <!--Line below added, added date adapter for time scale -->
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>

<body>
  <canvas id="line-chart" width="800" height="450"></canvas>
</body>

</html>

user_86829830
Related