billboard.js 1.9 release: Introducing plugins & more!

What’s new?

Introducing Plugins: Stanford Diagram

Demo screenshot of Stanford Diagram

Enhancement on gauge: stack data

Basic gauge type
Gauge with stack data
bb.generate({
data: {
columns: [
["data1", 30],
["data2", 190]
],
type: "gauge"
}
});
gauge: {
title: "Title A"
}

Tooltip: Template contents & display control

tooltip: {
contents: {
template: "<ul><li>Index<br>{=TITLE}</li>{{<li class={=CLASS_TOOLTIP_NAME}><span>{=VALUE}:{=VAR}</span><br><span style=color:{=COLOR}>{=NAME}</span></li>}}</ul>"
}
}
}
contents: {
text: {
VAR: ["A", "B", "C"]
},
template: "<ul><li>Index<br>{=TITLE}</li>{{<li class={=CLASS_TOOLTIP_NAME}><span>{=VALUE}:{=VAR}</span><br><span style=color:{=COLOR}>{=NAME}</span></li>}}</ul>"
}
},
tooltip: {
contents: {
bindto: "#my-tooltip" // will bound to <... id="my-tooltip">
}
}
tooltip: {
doNotHide: true
}

Sensitivity for Bar & Pie

point: {
sensitivity: 5
}
  • senstivity=10: Going closer to each data boundary, notice that tooltip is showing two data values as overlapped.
  • senstivity=0: It doesn’t show two data. Only show one data as the coordinate moves.

Data Labels: Color & Position

Customized data label text color
data: {
labels: {
// apply for all label texts
colors: "red",

// or set different colors per dataset
// for not specified dataset, will have the default color value
colors: {
data1: "yellow",
data3: "green"
}
},
labels: {
colors: "white",
centered: true
}
Data label text centered

Pie: Enhancement on innerRadius

// set different innerRadius for each data
pie: {
innerRadius: {
data1: 90,
data2: 90,
data3: 0
}
}

Radar: Multiline Axis Text

bb.generate({
padding: {
top: 25
},
data: {
x: "x",
columns: [
["x", "1st\nPrize", "2nd\nPrize", "3rd\nPrize"],
["data1", 230, 250, 100],
["data2", 150, 150, 230]
],
type: "radar",
labels: true
},
radar: {
axis: {
max: 300
}
},
});

Global Configuration

// set global configuration at the top
bb.defaults({
data: {
type: "bar"
}
});

// now for every generation, `data.type` defaults to 'bar'
bb.generate({ ... });
bb.generate({ ... });
bb.defaults(); // will return: {data:{type: "bar"}}

Stats

// turn off globally
bb.defaults({stats: false});
// or from generation option
bb.generate({
...,
stats: false
});

And some small updates you might know

Custom legend behaves

The remove of bar stroke style

Inline stroke property set for bars
.bb-chart-bar path {
stroke: blue;
stroke-width: 1px;
}

What’s Next?

--

--

--

Front-end engineer at NAVER, creator of billboard.js

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Nginx 101 — Part 2

The Angular Model (ngx-model)

JavaScript Weekly Issue 33

I built an Electron app with React — you’ll never guess what happened next…

Object.freeze() vs Object.seal() vs Object.preventExtensions()

Commonly used commands in an Angular application

Introducing CROPRO — crop and rotate images in your web apps

A Simple Way To Validate User Data For Express Based RESTful APIs

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
Jae Sung Park

Jae Sung Park

Front-end engineer at NAVER, creator of billboard.js

More from Medium

billboard.js 3.4 release: new polar chart!

Creating and Using TomTom Geofences with Vue

Create Interactive HTML Tables Populated With API Data

Create Real-Time Visualizations with React and D3.js