billboard.js 3.14 release: viewBox resizing!

New v3.14 release came out today! This release comes with 5 new features, 8 bug fixes and bunch of improvements.

For the detailed release info, please checkout the release note:

• https://github.com/naver/billboard.js/releases/tag/3.14.0

What’s New?

viewBox resizing

New resizing option is added. The default resizing will resize based on the its container dimension changes.

The new resize.auto='viewBox' option will make the chart to resize maintaining the aspect ratio, and without any computation costs.

Basically, it utilizes the “viewBox” attribute behaviour, and what it actually does is stretches the SVG viewport.

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

If the usage requirement matches, is definetelly recommended.

axis.evalTextSize

When chart is initialized to render, internally will compute axis tick text size to calculated the space needed for axis area.

Generally, this process isn’t needed to be considered at all, but in a case when axis tick text sizes changes after this initialization, the calculation will make to render incorrectly, because the tick text size used internally isn’t valid after the changes.

To improve in this use case, will provide new axis.evalTextSize option, where can opt the way to getting axis tick size computation.

axis: {
    // 1: default, which will memoize evaluated axis text size
    evalTextSize: true,

    // 2: will evaluate the dimension of axis text size every time.
    evalTextSize: false,

    // 3: customize dimension evaluator
    evalTextSize: function(text) {
        ...
        return {width, height):
   }
}

interaction.onout

The “default” behavior of being away from chart area is defocusing currently selected state. That means, the showing state of tooltip, focused grid line etc.

The new option will make to maintain last selection state, even being away from the chart area, to keep last selection state.

Technically, the option will turn-on or off the default interaction for “onout” event.

interaction: {
    onout: false
}

forced lazy rendering

The render.lazy option will make to render when container element becoming visible. Useful for circumstances where the chart element needed to be initialized later.

The determination will automatically set when the container element isn’t visible. And there’s no way to force to render in that condition, because initializing on hidden state can possible make to render wrongly and has no meaning in general.

But, also there’re special cases to do that. To fulfill these necessity, when explicit render.lazy=false is set, will initialize regardless the container element visibility state.

render: {
    // when explicit 'false' set, will force render even container is hidden
    lazy: false
}

Visibility state to legend item’s event callback

Small informative enhancement is added for legend item’s event callback functions.

Event callbacks only provided current legend id value only. If needed do some task based on the legend visibility, it needed to implement on your own.

It wasn’t hard, but is definitely cumbersome taks. To get rid this, now will pass “visible” state of the legend item.

Based on this argument, can execute task based on the visibility state.

legend
     item: {
         // new 'visible' param is given to be used within callback
         onclick: function(id, visible) {
             // toggle based on the data visibility
             this[visible ? "hide" : "show"](id);
         },
         onover: function(id, visible) { ... },
         onout: function(id, visible) { ... },
    }
}

Closing

That’s all we have for this release and probably last feature implementations for this year.

Thanks always, and stay tune for upcoming updates!