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

For the detailed release info, please checkout the release note:
https://github.com/naver/billboard.js/releases/tag/1.12.0

What’s New?

Demo: https://naver.github.io/billboard.js/demo/#GaugeChartOptions.GaugeTypeMulti

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

Demo: https://naver.github.io/billboard.js/demo/#Grid.FocusedGridLines

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)

Demo: https://naver.github.io/billboard.js/demo/#PieChartOptions.ExpandRate

Adjustable expand rate for Pie
[donut | gauge | pie] : {
expand: {
rate: 1
}
}
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
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

Demo: https://naver.github.io/billboard.js/demo/#Axis.StepSizeForYAxis

axis: {
y: {
tick: {
stepSize: 33
}
},
y2: {
show: true,
tick: {
stepSize: 20
}
}
}
Stepped y/y2 Axis tick text values
without zerobased(first screenshot) & with ‘zerobased=true’ (second screenshot)
[bubble | line | scatter]: {
zerobased: true
}

Demo: https://naver.github.io/billboard.js/demo/#Plugins.BubbleCompare

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

Demo: https://naver.github.io/billboard.js/demo/#Axis.XAxisTickAutorotate

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: {
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: {
enabled: {
type: "drag"
},
resetButton: {
onclick: function(button) {
button; // Reset button element reference
...
}
}
}
default y2 Axis domain (Left) / updated y2 Axis domain (Right)

The great Contributors!

What’s Next?

--

--

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