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!