Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 11, 2022 07:09 am GMT

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.jsyarn 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 chartgenerate = () => {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>  }}

Original Link: https://dev.to/nyanyiwast/create-charts-in-your-react-app-32mp

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To