An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
July 11, 2022 07:09 am GMT
Original Link: https://dev.to/nyanyiwast/create-charts-in-your-react-app-32mp
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:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To