billboard.js 3.8 release: inverted x axis!
Today out the new 3.8
release 🥳 !. This release comes with 4 new features and 4 bug fixes.
For the detailed release info, please checkout the release note:
https://github.com/naver/billboard.js/releases/tag/3.8.0
What’s New?
axis.x.inverted
This option will let scale in “inverted” way. Inverted option already provided for y & y2 axes, but not for x axis.
x axis was displaying data from the left to right and in most cases this was the basic way to visualize data.
Enabling this option, will make data to be displayed from right to left. And this option is specially useful for timeseries axis type.
Demo: https://naver.github.io/billboard.js/demo/#Axis.InvertedAxis
Simply bound data normally, and when the axis.x.inverted=true
is set, will render as inverted way. Will work on every axis types(indexed, category and timeseries).
data: {
x: "x",
columns: [
// when 'axis.x.inverted=true' is set, x axis and its data will appear as in following order.
// "2023-01-06" -> "2023-01-04" -> "2023-01-03" -> "2023-01-02" -> "2023-01-01"
["x", "2023-01-01", "2023-01-02", "2023-01-03", "2023-01-04", "2023-01-06"],
["data1", 30, 200, 100, 400, 150],
],
},
axis: {
x: {
inverted: true,
type: "timeseries"
}
}
Here’s the simple demonstration on different axis types with the combination of inverted y axis.
padding fitted mode
By default, padding values(marked as red in the below screenshot) are set for every sides(top, bottom, left, right) to prevent some possible rendering issue for chart elements.
But at same time, there’re needs to remove those gap to make chart to occupy fully to given space. And this is specially needed to apply design guides in most cases.
Demo: https://naver.github.io/billboard.js/demo/#ChartOptions.FitPadding
The new padding.mode='fit'
will let chart elements to fully occupy the bound element, but there’re possibility to not perfectly fit according the global styles where can affect chart element’s dimension.
In this case, use “fit” mode in conjunction with padding’s option to adjust more accurately.
bb.generate({
padding: {
mode: "fit",
// when mode is 'fit', below values will be treated
// relatively from the 'fit' state
top: 0, bottom: 0, left: 0, right: 0
},
...
});
From the below screenshot, can compare the differences between the default padding and “fit” mode padding.
Resizing option for .load() & .unload()
When new dataseries are loaded, depending the data names, legend area need more space to render, which need some resize after the load.
To facilitate the task, added new resizeAfter
option for .load/unload() API.
If want resize after the execution, simply specify resizeAfter=true
and will do the resize.
// .load()
// will resize after the load by default
chart.load({ ... });
// will not resize after the load by default
chart.load({
...
resizeAfter: false
});
// .unload()
// will resize after the unload by default
chart.unload({ ... });
// will not resize after the unload by default
chart.unload({
...
resizeAfter: false
});
Here’s the action, when resizeAfter=true
.
And to make the comparison when isn’t enabled: resizeAfter=false
(default)
resizeAfter
wasn’t enabled by default, because there’re use cases calling .load() API in very short interval and this possibly will interrupt smooth transition.
styling option for react package
Simple addition for @billboard.js/react
package, contribution from github.com/@BillionaireDY.
From the new v1.1.0
, can specify style
and className
attributes as normal elements does.
// import react wrapper
import BillboardJS, {IChart} from "@billboard.js/react";
function App() {
...
return <BillboardJS
...
/* The values will be specified to the bound element
as inlined styles */
style={{
width: "500px",
...
}}
/* When class name doesn't contains `bb`,
then you also need to update the default CSS
to be rendered correctly. */
className={"bb my-classname"}
/>;
}
When style attributes are specified, they directly will be set as inlined attributes to the bound <div>
element.
Closing
Stay tuned for the new forthcoming features!