Line chart doesn't work with type time chart.js

user_9464680 0
Viewed 121

I use chart.js with React and I can't figure out why the line chart doesn't work with type: 'time', maybe I could be missing something:

Chart.js CodeSandbox

import React from "react";
import { Line } from "react-chartjs-2";

const startDate = new Date(2020, 4, 20);

const json = '{"responses":[{"count":"73","rows":[{"values":["1"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["1"]},{"values":["6"]},{"values":["7"]},{"values":["5"]},{"values":["8"]},{"values":["9"]},{"values":["2"]},{"values":["1"]},{"values":["1"]},{"values":["1"]},{"values":["6"]},{"values":["3"]},{"values":["0"]},{"values":["20"]},{"values":["9"]},{"values":["3"]},{"values":["2"]},{"values":["1"]},{"values":["13"]},{"values":["3"]},{"values":["13"]},{"values":["13"]},{"values":["7"]},{"values":["12"]},{"values":["0"]}]}]}';

const values = JSON.parse(json).responses[0].rows.map(row => row.values[0]);

const options = {
  legend: {
    display: false
  },
  hover: {
    mode: "index",
    intersect: false,
    animationDuration: 0
  },
  scales: {
    yAxes: [{ position: "right" }],
    xAxes: [
      {
        gridLines: { display: false },
        type: "time",
        time: {
          parser: "MMM D",
          unit: "day",
          unitStepSize: 5,
          displayFormats: {
            day: "MMM D"
          }
        },
        ticks: {
          min: startDate, //May 20
          max: new Date()
        }
      }
    ]
  },
  tooltips: {
    mode: "x-axis"
  }
};

const data = {
  datasets: [
    {
      label: "data",
      fill: false,
      data: values,
      backgroundColor: "pink",
      borderWidth: 2,
      lineTension: 0,
      borderColor: "pink",
      hoverBorderWidth: 2,
      pointBorderColor: "rgba(0, 0, 0, 0)",
      pointBackgroundColor: "rgba(0, 0, 0, 0)",
      pointHoverBackgroundColor: "#fff",
      pointHoverBorderColor: "pink",
      showLine: true
    }
  ]
};

const LineChart = () => {
  return (
    <div style={{ maxWidth: 1024, margin: "32px auto" }}>
      <Line data={data} options={options} />
    </div>
  );
};

export default LineChart;
chart.js reactjs charts javascript
1 Answers

You should generate specific dataset like this:

const values = JSON.parse(json).responses[0].rows.map((row, index) => {
  let date = new Date(2020, 4, 20);
  date.setDate(startDate.getDate() + index)
  return {
    y: row.values[0],
    x: date
  };
});

example

user_53832410
Related