billboard.js 3.6 release: official React wrapper & new enhancements!

What’s New?

Official React wrapper — @billboard.js/react

These days devs normally approach using frameworks and React is the most popular one.
From this release, we’ll provide an official React wrapper to facilitate the use of billboard.js on react dev environment.

# Install billboard.js together if you don't have it already
$ npm install billboard.js @billboard.js/react
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>();
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>;
}

bar.linearGradient

The new bar.linearGradient will make bars filled with gradient color.

bar: {
linearGradient: true // or set an object value to specify more in detail
}
Different bar gradient fills

bar.overlap

bullet bar chart type isn’t supported yet, but the new bar.overlap option will make it interpret as is.

bb.generate({
data: {
columns: [
["data1", 80, 150, 100],
["data2", 100, 120, 130],
["data3", 150, 80, 120]
],
type: "bar"
},
bar: {
width: {
data1: 60,
data2: 40,
data3: 20
},
overlap: true
}
});
When bars are overlapped, bars will be rendered at same x Axis tick’s position.

Control number type for 0(zero) on groped data

The new data.groupsZeroAs option is to control how the 0(zero) value treated on grouped data(stacked each other).

data: {
columns: [
["data1", -11, -11, -11, -11],
["data2", 4, 4, 4, 4],
["data3", 0, 1, 0, 0]
],
type: "area",
order: null,
groups: [
["data1", "data2", "data3"]
]
}
data: {
columns: [
["series1", -11, -11, -11, -11],
["series2", 4, 4, 4, 4],
["series3", 0, -1, 0, -1]
]
}
data: {
columns: [
["series1", -11, -11, -11, -11],
["series2", 4, 4, 4, 4],
["series3", 0, 1, 0, -1]
]
}
  • zero: 0 will be positioned at absolute axis zero point.
  • positive: 0 will be positioned at the top of a stack.
  • negative: 0 will be positioned at the bottom of a stack.
data: {
...,
groupsZeroAs: "positive" // "negative" or "zero"
}

legend.item.tile.type

This option will add an additional enhancement for the legend item’s shape rendering.

legend: {
item: {
tile: {
type: "circle", // default 'rectangle'
r: 10, // setup radius of circle item type
}
}
}

.config() API

Added an enhancement for .config() API to get the generation option object.

const chart = bb.generate({
data: {
columns: [
["data1", 80, 150, 100],
["data2", 100, 120, 130],
["data3", 150, 80, 120]
],
type: "bar"
},
bindto: "#chart"
});

// get the options object specified at the initialization
chart.config();
// will return above generation option object
// --> {data: {…}, bindto: '#chart'}

Closing

Based on our release schedule, the next regular updates will happen on Dec. We’re planning to add new chart type support and several enhancements.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store