Create charts in your React app.

In this case, we will use Billboard.js which is a JavaScript chart interface based on D3.js. The library supports a wide range of chart types such as area, bar, line, gauge, scatter, candlestick, polar, pie, and etc.

INSTALLATION
of from the terminal inside your project folder, run either the below:

npm i billboard.js
yarn add billboard.js

USAGE
Locate the section where you want to render the chart inside your component:

import {bb, area, bar, zoom} from "billboard.js";

class Welcome extends React.Component {

// generate the chart
generate = () => {
var chart = bb.generate({
    bindto: "#chart-area",
    data: {
      // for ESM import usage, import 'line' module and execute it as
      // type: line(),
      type: "line",
      columns: [
          ["data1", 30, 200, 100, 400, 150, 250] // or you can load data from an API
      ]
    },
    zoom: {
      // for ESM import usage, import 'zoom' module and execute it as
      // enabled: zoom()
      enabled: true
    }
});
}
  render() {
    return <div id="chart-area"></div>
  }
}