Implementing the chart component

In this section, we'll be creating chart components to display common and simple charts such as a bar chart, line chart, and pie chart. We'll then implement the chart Side Plane to enable the setting of chart component variables.

Note

The code for the Chart and ChartPlane components implemented is available here: https://github.com/PacktPublishing/Building-Data-Driven-Applications-with-Danfo.js/blob/main/Chapter08/src/components/ChartPlane.js.

In the src/components/ directory, let's create a file called Chart.js and the Chart component will be implemented with the following steps:

1. We import our desired plotting component from react-chartjs-2, and then create the Chart component:

   import { Bar as BarChart } from 'react-chartjs-2';
   import { Line as LineChart } from "react-chartjs-2";
   import { Pie as PieChart} from "react-chartjs-2";
   import Draggable from 'react-draggable';
    
   export...