billboard.js 1.6.0 released today!

What’s New?

Themes

Checkout the example site to see in action
(Above) default / (Below) insight theme

bar.radius

Rounded bar
bar: {
radius: {
ratio: 0.5
}
}

Zoom by dragging

Zoom by drag in action
zoom: {
enabled: {
type: "drag" // or 'wheel' (default value)
},

// control 'reset button' display
resetButton: true,

// customize reset button's text value
resetButton: {
text: "unzoom"
}
}

Dasharray for regions

Applying different dash styles in different region
regions: {
data1: [
{
start: 1,
end: 2,
style: {
// The first number specifies a distance for the filled area, and the second a distance for the unfilled area
dasharray: "6 2"
}
},
...
]
}

line.point

.bb-circles-data2 circle {
visibility: hidden;
}
Indicating specific data point display
line: {
// indicate, what data will be showing points
point: ["data1", "data3"]
},

radar.direction.clockwise

(Left) counter clockwise, (Right) clockwise direction
radar: {
direction: {
clockwise: true
}
}

Enhancement on custom data point

"<polygon points='2.5 0 0 5 5 5'></polygon>"
Using complex custom data point
"<g><circle cx='10' cy='10' r='10'></circle><rect x='5' y='5' width='10' height='10' style='fill:#fff'></rect></g>"
Combined custom data points
point: {
pattern: [
...
"<polygon points='2.5 0 0 5 5 5'></polygon>",
"<g><circle cx='10' cy='10' r='10'></circle><rect x='5' y='5' width='10' height='10' style='fill:#fff'></rect></g>"
]
}

Multiline for gauge label text

Multilined text label
gauge: {
label: {
format: function(value) {
return value +"%\nTest\nValue";
}
}
}

Exposing primary node elements

const chart = bb.generate(...);chart.$;// main element '<g transform="translate(50.5, 4.5)">'
// wrapped with d3
chart.$.main;

The new .config() API

const chart = bb.generate({
data: {
columns: [
["data", 91.4]
],
type: "gauge"
},
gauge: {
max: 1000
}
});
chart.config("data.type"); // will return 'gauge'
Update gauge’s max value and redraw
setTimeout(() => {
// update gauge.max to 100, and redraw with changed option
chart.config("gauge.max", 100, true);
}, 1000);

Closing

--

--

--

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

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

Recommended from Medium

Auto-Deploy Vue.js to GitHub Pages using Actions

Instagram -clone using React-js

UI Libraries and Web Components for React

Chat Room in Angular and NodeJS

Parsing JSON in Dart

Closures — The way encapsulation and Module patterns work in JavaScript

A build system for all SPA: Webpack

JavaScript Classes: The Basics

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.3 release: Non-zero based bar, stacking bar radius & more!

Introducing SAND-wich: An open-source project that’s focused on making your NFT collection really…

Communication in Google Chrome browser extension

How to Review an Academic Paper?