[Chartjs]-Curved lines are not displayed with react-chartjs-2

by

1👍

✅

Okay this one took a while but I figured it out. I have solved it without tree shaking so that is what I will be showing, you can of course add tree shaking but I think that perhaps that is part of what is giving you trouble. To load it lazily just do

import 'chart.js/auto';
import { Scatter } from 'react-chartjs-2';

And then as I’m sure you’ve tried add this to options

elements: {
    line: {
        tension: 0.5,
    },
},

This way simply registers all possible registerables which will increase bundle size, this can be seen in chart.js/auto

import {Chart, registerables} from '../dist/chart.js';

Chart.register(...registerables);

export * from '../dist/chart.js';
export default Chart;

Where we can see that it imports all registerable items and then registers them.

Tree-shakable way

To decrease bundle size you can choose to register manually. The minimum registerables needed for your chart are

import {
    Chart as ChartJS,
    LineElement,
    PointElement,
    Filler,
    LinearScale,
} from 'chart.js';
import { Scatter } from 'react-chartjs-2';
ChartJS.register(LineElement, PointElement, Filler, LinearScale);

If you want the tree-shakable way but have a hard time figuring out which registerables you need a surefire, though tedious way, is to just add all registerables, delete one and check that everything still works as intended and then just do this for all registerables. If you want to do this you can always use chart.js/auto and then correct it when you are done with the functionality, this way you wont have to worry about it every time you add new functionality. That was all the rambling I could muster hope it helps 🙂

Leave a comment