📊 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

Let’s say you generated a chart with below options, giving min and max value to limit x Axis value.

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

The tick.rotate option makes tick texts rotated, useful to represent wide spaced text in limited width size. When axis.rotated=true is set, y and y2 Axes also needed apply rotate options in some circumstances.

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

New added zerobased option will make y Axis to start from 0, instead giving a padded value(default).

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

New Bubble Compare Plugin

The newly added bubblecompare plugin, will facilitate visually comparing values using bubble type. Comparing data 3-dimensional ways, x axis, y axis & bubble-size.

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

axis.x.tick.autorotate

According the dimension where chart is displayed, adjusting the full display of the axis tick texts was a challenge. Because of this reason, tick.rotate comes to the rescue.

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

a) callback option
Improve tooltip’s on callback options(onshow, onshown, onhide, onhidden) passing the current chart context and current dataset.

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

New callback option, zoom.resetButton.onclick is added. The ‘Reset Zoom’ button is displayed when drag zoom-in is applied.

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

Update on axis.y2 domain

Previously, when set to show y2 Axis, the default domain values was [0, 1].

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

The great Contributors!

This release could be possible because of the hard work of all contributors. Thanks for your support!

What’s Next?

We’re working very hardly for the next major v2 version. You can find its early implementation from:

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

--

--

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