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.

New loaded data’s legend aren’t visible

To facilitate the task, added new resizeAfteroption 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!