billboard.js 1.5.0 released today!

What’s new?

The new Radar type

Different radar types
bb.generate({
data: {
x: "x",
columns: [
["x", "Data A", "Data B", "Data C", "Data D", "Data E"],
["data1", 330, 350, 200, 380, 150]
],
type: "radar", // that's all!
}
});

axis.[x|y|y2].tick.text.position

tick’s text position before applying option (left) / after (right)
axis: {
y: {
tick: {
text: {
position: {
x: 10, // original x position + 10px
y: 10 // original y position + 10px
}
}
}
}
}

axis.[x|y].clipPath

axis: {
x: {
clipPath: false // will not set 'clip-path' attribute
},
y: {
clipPath: false // will not set 'clip-path' attribute
}
}

Improved lining for x axis

Automatic multiline for x axis text
data: {
columns: [
["x",
"www.somes\nitename1\n.com",
"www.\nsomesitename2\n.com",
"www.somesitename3\n.com",
"www.\nsomesitename4.com",
"www.somesitename5\n.com"
],
["pv", 90, 100, 140, 200, 100]
],
}
Specified multiline of x axis text

tooltip.linked.name

var chart1 = bb.generate({
...
tooltip: {
linked: {
name: "link01" // will be linked with the 'link01' name group
}
}

var chart2 = bb.generate({
...
tooltip: {
linked: {
name: "link02" // will be linked with the 'link02' name group
}
}

var chart3 = bb.generate({
...
tooltip: {
linked: {
name: "link01"
}
}


var chart4 = bb.generate({
...
tooltip: {
linked: {
name: "link02"
}
}
linked tooltip with grouped name

What’s Next?

  • Multiple Axes
  • Themed CSS file

--

--

--

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

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

Recommended from Medium

Learn how to manipulate the DOM by building a simple JavaScript color game

Creating a React.js App with Create-React-App — Part 3: “Routing Basics”

Ebi: The making of a GitHub search tool from three perspectives

CS 373 Fall 2021: Blog #10

Switching Technologies

Add Pre- Commit to your next.js web application [with Eslint, prettier, Husky] 2021 edition

What is Javascript ?

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

Micro-frontends: Fixing duplicate class name in Styled Component in

How to easily create JS libraries compatible with ES/AMD/UMD/CJS module systems using Nx

Simple implementation of drag and drop between lists using React and Typescript without additional…

Auto generating questions in React using an API and question template database.