DEV Community

Cover image for Create charts in your React app.
Sedrick Tha Dev
Sedrick Tha Dev

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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>
  }
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)