Options not loading

Versions: react-chartjs-2 ^3.0.3 chart.js ^3.2.1

Testing the latest version with a Line Chart - adding options to specify X-axis with type “time” and unit “month” doesn’t work.

I’ve tested epoch, utc, and moment time formats but they all display whatever data gets passed through as labels (time series doesn’t seem to get considered).

Looks like other options (ie removing ticks) doesn’t have any affect as well - which I saw was raised in another issue.

const options = {
  scales: {
    xAxes : [{
      type: "time",
      time : {
        unit : "hour"
      }
    }]
  },
};

const data = {
    labels: [1611806740907, 1612304651659,.....],
    datasets: [
      {
        data: [100000, 12000000,.....],
        fill: false,
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgba(255, 99, 132, 0.2)',
      },
    ],
  };

function LineChart(props) {
  return (
    <>
      <Line data={data} options={options} />
    </>
  )
};
export default LineChart;

[razked]

I have experienced the same problem recently.

downgrading the packages to chart.js@2.9.4 react-chartjs-2@2.11.1

resolved my problem.

[rajatdangat07]

Versions: “chart.js”: “^3.2.1” “react-chartjs-2”: “^3.0.3”

I’m having the same issue when trying to add options that remove gridLines.

const options = {
  maintainAspectRatio: true,
  scales: {
    xAxes: [{
      gridLines: {
        display: false
      }
    }],
    yAxes: [{
      gridLines: {
        display: false
      }
    }]
  }
}

const BarChart = () => {
  return (
    <div>
      <Bar
        data={data}
        width={400}
        height={200}
        options={options}
      />
    </div>
  )
}

There are breaking changes in the chart js version 3. If you are migrating from version 2 check out the migration guide. In your case, the options should be:

const options = {
   maintainAspectRatio: true,
   scales: {
     x: {
       grid: {
         display: false
       },
     },
     y: {
       grid: {
         display: false
       },
     },
   },
 }