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>
}
}
Top comments (0)