React component for the billboard.js charting library
This is based on react-c3js, with modifications for billboard.js
and enhancements for rendering
$ npm install react-billboardjs --save
import React, { Component } from "react";
// component and styles
import BillboardChart from "react-billboardjs";
import "react-billboardjs/lib/billboard.css";
const CHART_DATA = {
columns: [
["data1", 30, 20, 50, 40, 60, 50],
["data2", 200, 130, 90, 240, 130, 220],
["data3", 300, 200, 160, 400, 250, 250]
],
type: "line"
};
class LineChart extends Component {
render() {
return <BillboardChart data={CHART_DATA} />;
}
}
Make sure to include the provided CSS file to ensure that all appropriate styles for billboard are included as well (this is the same CSS file provided by billboard.js
, so if you are already including that then no need to include this as well). The example above is if you are using webpack
or a similar bundler, but the styles are global so bring them in however is best for your application.
All top-level properties available on the billboard.js
options are passable as props, so for more detail about each of those props please check their documentation site. There are also a few additional props specific to the component:
- className
{string}
- isPure
{boolean}
- style
{Object}
- unloadBeforeLoad
{boolean}
An additional className
that is passed to the element that the chart is rendered into.
<BillboardChart
className="fancy"
...
/>
Any additional props that you want passed to the element that the chart is rendered into.
<BillboardChart
domProps={{'data-type': 'chart'}}
...
/>
Are the prop values passed based on a shallow-equal comparison of props and context. This can prevent unnecessary re-renders when set to true
, but expects any prop changes to be new objects (meaning arrays / objects that are mutated will not trigger a render).
<BillboardChart
isPure
...
/>
An additional style
object that is passed to the element that the chart is rendered into.
const STYLE = {
display: 'inline-block'
};
<BillboardChart
style={STYLE}
...
/>
One caveat to keep in mind is that there are two styles that will always be applied from billboard.js
even if the properties are included in the style
object:
max-height
(dynamically calculated based on the height of the container)position
(set torelative
)
If you want either of these to apply to the chart, the easiest way to accomplish this is to have a standard <div>
that wraps the chart that you can apply these styles to.
Should the current data be unloaded before the new data will be loaded.
<BillboardChart
unloadBeforeLoad
...
/>
If you capture the ref
of the chart, you will gain access to the instance, which allows you to use both the component methods and the billboard.js
native chart.
class Chart extends PureComponent {
getRef = (ChartInstance) => {
this.chartInstance = ChartInstance;
};
render() {
return (
<BillboardChart
data={...}
ref={this.getRef}
/>
);
}
}
Exports the chart using the experimental functionality introduced in 1.2.0
of billboard.js
(equivalent to the native export method).
this.chartInstance.exportChart("image/png", dataUrl => {
const link = document.createElement("a");
link.download = "chart.png";
link.href = dataUrl;
link.textContent = "Download chart as PNG";
document.body.appendChild(link);
});
Loads new data into the chart (equivalent to the native Chart.load method).
this.chartInstance.loadData({
columns: [["data1", 100, 50]]
});
Forces a redraw of the chart.
this.chartInstance.redraw();
Loads new data into the chart (equivalent to the native Chart.unload method).
this.chartInstance.unloadData({
ids: ["data1"]
});
If you want to access the native billboard.js
chart instance, it is available on the chart
property of the ref
.
this.chartInstance.chart.defocus("data1");
The BillboardChart
component itself has some static methods that are used to get information about the global bb
object.
Get all chart objects for all charts rendered. This aligns with the bb.instance
property.
console.log(BillboardChart.getInstances()); // [Chart, Chart]
Standard stuff, clone the repo and npm install
dependencies. The npm scripts available:
build
=> run webpack to build developmentdist
file with NODE_ENV=developmentbuild:minifed
=> run webpack to build productiondist
file with NODE_ENV=productioncopy:css
=> copy thebillboard.css
file frombillboard.js
package tosrc
dev
=> run webpack dev server to run example app (playground!)lint
=> run ESLint against all files in thesrc
folderlint:fix
=> runlint
with--fix
appliedprepublish
=> runscompile-for-publish
prepublish:compile
=> runlint
,test
,transpile:es
,transpile:lib
,build
, andbuild:minified
scriptstest
=> run AVA test functions withNODE_ENV=test
test:coverage
=> runtest
but withnyc
for coverage checkertest:watch
=> runtest
, but with persistent watchertranspile:lib
=> run babel against all files insrc
to create files inlib
transpile:es
=> run babel against all files insrc
to create files ines
, preserving ES2015 modules (forpkg.module
)