The chart library: billboard.js 1.8.0 released today!

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

What’s New from the release?

Demo: https://naver.github.io/billboard.js/demo/#ChartOptions.ColorOnover

color.onover in action
// set all data to 'red'
onover: "red",
// set different color for data
onover: {
data1: "red",
data2: "yellow"
},
// will pass data object to the callback
onover: function(d) {
return d.id === "data1" ? "red" : "green";
}

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

Tick composition

x: { // same for 'x', 'y', 'y2' and subchart axis
tick: {
show: true, // show or hide tick lines
text: {
show: true // show or hide tick texts
}
}
}

Demo:https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidthVariant

Applied different width value for each dataset
bar: {
width: {
data1: {
ratio: 0.2,
max: 20
},
data2: 30
}
}

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

pie: {  // donut also as well
label: {
format: function(value, ratio, id) {
return value +"\nHours";
}
}
}
Multilined title

Demo: https://naver.github.io/billboard.js/demo/#Title.MultilinedTitle

title: {
text: "Temperature History by Region, 2017-2018\nSource: community weather center"
}

Demo: https://naver.github.io/billboard.js/demo/#AreaChartOptions.LinearGradient

// will generate follwing linearGradient:
// <linearGradient x1="0" x2="0" y1="0" y2="1">
// <stop offset="0" stop-color="$DATA_COLOR" stop-opacity="1"></stop>
// <stop offset="1" stop-color="$DATA_COLOR" stop-opacity="0"></stop>
// </linearGradient>
linearGradient: true,
Customized linearGradient
// Or customized gradient
linearGradient: {
x: [0, 0], // x1, x2 attributes
y: [0, 0], // y1, y2 attributes
stops: [
// offset, stop-color, stop-opacity
[0, "#7cb5ec", 1],
// setting 'null' for stop-color, will set its original data color
[0.5, null, 0],
// setting 'function' for stop-color, will pass data id as argument.
// It should return color string or null value
[1, function(id) { return id === "data1" ? "red" : "blue"; }, 0],
]
}

Improved performance

Test condition:
- Total of 30 datasets, which each has length of 30 data
The resources(CPU, JS heap size and DOM Nodes) values aren't really accurate, just take as a consideration.
Performing dynamic load via .load()
Performing dynamic resize via .resize()
transition: {
duration: 0 // or null
}

Closing

--

--

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