billboard.js 1.1.0 release!

If you don’t know about billboard.js, please visit the github repo.https://github.com/naver/billboard.js

New features

legend.contents

Prior this feature, to make custom legend was quite tedious. It needed to generate nodes and bind events manually.
To get rid these tedious job, billboard.js introduced templating syntax to generate a simple and fast legend contents.

How to use

There’re two ways to implement.
a) via template string for each item
b) via a function returning each item’s string

tooltip.order

This option will let order displaying tooltip’s data.

Note: for stacked data, the order is reverted than the normal. Is because stacked data are rendered from bottom to the top.

What was the issue?

Ordering option was for data only, and as you can see on below result, the bars rendered according the order option, but the tooltips are quite confusing in terms of ordering.

Being more clear

To get rid all of this confusion, added new option `tooltip.order`.
This will allow order tooltip apart of data ordering and user can focus just only for tooltip ordering.

donut.title

With the new added enhancement, it allows adding a line break. Wihch permits rendering multilined texts.

What was the issue?

To add a line break after ‘Petal’, there was no way for that before, unless you manipulate nodes manually adding svg’s text node.

How to use

With the new relase, added new enhancement on multilining donut title text.
Just add ‘\n’ character where you want to add a line break.

onbeforeinit / onafterinit

These new options permit run function before and after the initialization.

How to use

Just set a function to be executed for each initialization moment.

clipPath

Normally the area where chart elements are drawn, is clipped with clip-path attribute.

What was the issue?

Generating a chart with following options.

How to use

Simply set ‘clipPath’ option to false.

The change you probably might know

The ‘clipPath’ option removes ‘clip-path’ attribute from <g class=bb-chart> element and change the position of DOM node hierarchy, positioning after the axis element nodes to make chart area to be over the axis elements.

data.onmin / onmax

For those who wants customize chart UI, it’s usual dealing with the minimum or maximum data value.

How to use

Let say, you generated a chart with the following options.

data.labels.position

This option allow change the position of the label text position.

What was the issue?

When generating a chart with data label, the label texts are shown above the data points(in case of line type). Sometimes texts aren’t properly shown because of the position, in this case data points with value 0.

How to use

Just simply declaring the x/y coords value, releatively its original position.
The following example, will be positioning text from its original, x + 10 and y + 8.

inputType.touch.preventDefault

Permit adjust the way of preventing default action on touch event.

What was the issue?

Let’s take a two different situation.

How to use

To prevent this interference of interaction, preventing the document scorlling is needed while swipe is in action.
Set preventDefault option to true to prevent scrolling.

Online playground!

Since this release, we’re announcing online playground which can help generating chart on the fly!

Logo

We recently added a new logo. It’s the mixture of typo and the bar chart.
It’s provided as svg files, which can be useful for representing the library in variety of display.

billboard.js logo

What’s next?

For the next release, we’re planning add new chart type and of course, fixing bugs.
We’re trying to keep a regular release period of each 2 ~ 3 months, so there will be one more release within this year.

Thank you

Thank you, the community and all who showed us a great interest on billboard.js!

--

--

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