The chart library: billboard.js 1.8.0 released today!

What’s New from the release?

Let’s change color when is over!

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";
}

Full display control for axis tick

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
}
}
}

Variant width on bars

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

Multilined text

  • Multine text enhancement for Pie/Donut
pie: {  // donut also as well
label: {
format: function(value, ratio, id) {
return value +"\nHours";
}
}
}
  • Multilined Text
Multilined title
title: {
text: "Temperature History by Region, 2017-2018\nSource: community weather center"
}

LinearGradient for Area types

// 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

  • Do not generate unnecessary nodes if they aren’t necessary.
  • Get rid the duplicated calls to minimize execution calls.
  • Memoize some dimension values to not evaluate multiple times.

Small benchmark

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()
  • v1.7.1: 33~42/sec
  • v1.8.0: 16 ~ 24/sec
Performing dynamic resize via .resize()
  • v1.7.1: 51~66/sec
  • v1.8.0: 12 ~ 39/sec

Small tip

transition: {
duration: 0 // or null
}

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

PixelSnap 2 for Mac | Made with Vue JS

PixelSnap2 | Made with Vue JS | Made with Javascript Club

How packaging makes it dead simple to share UI components

Top 7 APIs for your practicing projects

Some basic things we need to do before installing React

Performance Testing Authenticated Pages with Lighthouse

How to import Javascript variables from other files in node.js with express

My Internship Goals.

How I started my open source journey after being demotivated for two years

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

Building a Data Visualisation Tool in JavaScript

Create Interactive HTML Tables Populated With API Data

Create Sparkline Charts with JavaScript

Building an interactive line chart using Svelte and D3