@billboard.js/react
React component for billboard.js
Installation
# Install billboard.js together if you don't have it already
$ npm install billboard.js @billboard.js/react
How to use
Basic Usage
import React, {useEffect, useRef} from "react";
// import billboard.js
import bb, {line} from "billboard.js";
import "billboard.js/dist/billboard.css"; // default css
// import react wrapper
import BillboardJS, {IChart} from "@billboard.js/react";
// const BillboardJS = require("@billboard.js/react"); // for CJS
function App() {
// to get the instance, create ref and pass it to the component
const chartComponent = useRef<IChart>(null);
const options = {
data: {
columns: [
["data1", 300, 350, 300]
],
type: line()
}
};
useEffect(() => {
// get the instance from ref
const chart = chartComponent.current?.instance;
// call APIs
if (chart) {
chart.load( ... );
}
}, []);
return <div style={{width: "500px"}}>
<BillboardJS bb={bb} options={options} ref={chartComponent} />
</div>;
}
props
passed to the component
Using When the options are passed to the "chart" component.
// index.tsx
import App from "./App.tsx";
const options = {
data: {
columns: [
["data1", 300, 350, 300]
],
type: "bar"
}
};
<App {...options} />
// App.tsx
import * as Chart from "billboard.js";
import "billboard.js/dist/billboard.css"; // default css
import BillboardJS, {IChar, IChartOptions} from "../src/index";
export function App(props: IChartOptions) {
const chartComponent = useRef<IChart>(null);
// when chart "type" is passed from props, chart types need to be initialized separately.
// in this scenario, can't be "tree-shaken" only used chart type modules.
Chart[props.data.type]();
useEffect(() => {
const chart = chartComponent.current?.instance;
if (chart) {
chart.load( ... );
}
}, []);
return <div style={{width: "500px"}}>
<BillboardJS bb={Chart.bb} options={props} ref={chartComponent} />
</div>;
}
TypeScript Interfaces
// chart options
interface IChartOptions;
// @billboard.js/react props
interface IProp {
bb: typeof bb;
options: ChartOptions;
}
// Chart instance
interface IChart {
instance: Chart;
}