[Chartjs]-Chartjs-2(React), Lines do not appear

by

2👍

Try like this.. This works for me:

npm install –save react-chartjs-2 chart.js

In your page import things like:bar, line, etc as per requirement.

import { Doughnut, Bar, Line, Pie } from ‘react-chartjs-2’;

In constructor, fill datasets in the state:

 this.state = {
            lineChartData: {
                labels: ['01', '02', '03', '04', '05', '06'],
                datasets: [{
                    label: 'X',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)'

                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)'

                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        }

finally, call your component/graph in jsx:

<Line
       data={this.state.lineChartData}
       options={{ maintainAspectRatio: true }}
 />

Hope this works fine.

Leave a comment