[Chartjs]-Using chart js options with react-chartjs-2 and typescript

by

7👍

It turns out the typing error can be solved by using any instead of ChartOptions.

const options: any = {
  ...
}

As LeeLenalee pointed out, there is also an issue using this specific plugin with V3 of Chart.js, but using any worked with another similar plugin.

2👍

types are exported from chart.js

import type { ChartData, ChartOptions } from 'chart.js';

interface DoughnutProps {
  options: ChartOptions<'doughnut'>;
  data: ChartData<'doughnut'>;
}

0👍

I looked at the source of the plugin and it seems like even if you solve the typing issue it wont work. The reason for this is that you are using V3 of Chart.js while the plugin was written for V2 and never updated. It is self registering and it does this in the wrong way, it defines its default options in the wrong place (both namespaces dont exist anymore).

So if you really want to use this plugin I suggest you take a look at the source and modify it so it works with V3 or downgrade to chart.js v2 where there is no build in typing or find another plugin.

Leave a comment