billboard.js 2.2.0 release: Gauge enhancements, Pie outerRadius & more!

What’s New?

Multiline support for data.label

data: {
labels: {
format: function(v, id ,i, j) {
return v > 0 ?
"Ipsum is simply dummy text" :
"Lorem Ipsum is simply dummy text";
}
}
}
Line breaks for data label texts

Callback for data.labels.colors

data: {
labels: {
// call back for label text color
colors: function(color, data) {
// color: the default data label color string
// data: ex) {x: 0, value: 200, id: "data3", index: 0}
....
return d.value > 200 ? "cyan" : color;
}
}
}
Data label text colored as ‘cyan’ for the given condition

Enhancements for gauge

a) startingAngle

startingAngle=1 (Left) / startingAngle=-1 (Right)
gauge: {
startingAngle: -1
}

b) arcLength

gauge.arcLength=100 (the default) (Left) / gauge.arcLength=75 (Right)
gauge: {
arcLength: 75
}

c) background

gauge: {
background: "red"
}

Outer Radius for pie

pie: {
// specify for all data
outerRadius: 100,
// specify for each data
outerRadius: {
data1: 110,
data2: 80
}
}

point.opacity

point: {
// do not set inline 'opacity' css prop setting
opacity: null,

// set every data point's opacity value
opacity: 0.7
}
point.opacity=null

What’s Next?

  • d3 v5: billboard.js v1.x ~ v2.x
  • d3 v6: billboard.js v3+

--

--

--

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

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

Recommended from Medium

//platform.twitter.com/widgets.js from Twitter https://twitter.com/UKCareGuide

billboard.js 1.10 release: Bubble dimension, axis culling & more!

React Weekly Issue 25

The relationship between JavaScript & ECMAScript

billboard.js 1.1.0 release!

Building Persistable One-to-One Chat Application using Spring Boot and WebSockets

Using Resize Observer For Responsive Design

Node Weekly Issue 13

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

Angular Universal + Serverless.com + Aws Lambda + DynamoDB

The easy straightforward way to create demo serverless functions on Netlify

Svelte Slicer

Create Real-Time Visualizations with React and D3.js