📊 billboard.js 1.12.0 release: Multi type gauge, new focused y grid line, Bubble Compare plugin & more!

What’s New?

Multi type gauge

Multi type Gauge
gauge: {
type: "multi",
arcs: {
minWidth: 5
}
}

New focused y grid line

y Grid focus line
grid: {
focus: {
show: true,
y: true,
edge: true. // Show edged focus grid line.
}
}
non-edge focus grid line (Left) / edge focus grid line (Right)

Donut/Gauge/Pie expand rate

Adjustable expand rate for Pie
[donut | gauge | pie] : {
expand: {
rate: 1
}
}

axis.x.[min|max].fit

bb.generate({
data: {
columns: [
["data1", 30, 200, 100, 100, 100],
["data2", 50, 20, 10, 50, 60]
]
},
axis: {
x: {
min: -1,
max: 10
}
}
});
Let/Right padded space
axis: {
x: {
min: {
fit: true,
value: -1
},
max: {
fit: true,
value: 10
}
}
}
Fitted x Axis padding, according the data boundaries
axis: {
x: {
min: {
fit: true,
value: 1
},
max: {
fit: true,
value: 3
}
}
}
Limited x Axis based on the min/max setting

New axis.y2.tick.rotate option

axis: {
// y, y2 axes rotate works only when axis is rotated
rotated: true,
y: {
tick: {
rotate: 50
}
},
y2: {
show: true,
tick: {
rotate: 50
}
},
}
y/y2 Axis tick texts rotate

New axis.[y | y2].tick.stepSize

axis: {
y: {
tick: {
stepSize: 33
}
},
y2: {
show: true,
tick: {
stepSize: 20
}
}
}
Stepped y/y2 Axis tick text values

New [bubble | line | scatter].zerobased

without zerobased(first screenshot) & with ‘zerobased=true’ (second screenshot)
[bubble | line | scatter]: {
zerobased: true
}

New Bubble Compare Plugin

Bubble Compare plugin in action
plugins: [
new bb.plugin.bubblecompare({
minR: 11,
maxR: 74,
expandScale: 1.1
}),
]

axis.x.tick.autorotate

x Axis tick text autorotate according its width size
axis: {
x: {
tick: {
fit: true,
multiline: false,
autorotate: true,
rotate: 15,
culling: false,
count: 10
}
}
}

Changes might you need to know

Tooltip enhancements

tooltip: {
onshow: function(ctx, currentData) {
ctx; // current chart instance
currentData; // current tooltip dataset
/*
[
{x: "2020-01-18T15:00:00.000Z", value: 33103, id: "data1", index: 6, name: "data1"},
...
]*/
}
}

zoom.resetButton.onclick

zoom: {
enabled: {
type: "drag"
},
resetButton: {
onclick: function(button) {
button; // Reset button element reference
...
}
}
}

Update on axis.y2 domain

default y2 Axis domain (Left) / updated y2 Axis domain (Right)

The great Contributors!

What’s Next?

Main Goals of v2 are:

  • Move codebase to TypeScript
  • Restructure of file system & class architecture
  • Make smaller build & run faster
  • Do not break backward compatibility

--

--

--

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

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

Recommended from Medium

10 Critical JavaScript Interview Questions you will be Asked: With Proper Explanation

Server-Side Rendering using React and Express — Part 2

Animated Like Button with HTML CSS & JS

Final vs Const in Dart. With examples

JavaScript - Objects

Intro to React Hooks: Why, How, Dos and Don’ts

Interview Questions: How to Rotate a Matrix in JavaScript

Comprehensive Path to Mastering Asynchronous Javascript (Time: 3 days, Difficulty: 5/10)

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

Create Interactive HTML Tables Populated With API Data

Reduce TTF Font File Size by Unicode Range

Create Sparkline Charts with JavaScript

Create Interactive Web Card Game Using HTML, CSS, JS And Getting Data From Public API.