billboard.js 3.7 release: new treemap type support!

Excited to share another new 3.7 release 🥳 !. This release comes with 4 new features and 9 bug fixes.

For the detailed release info, please checkout the release note:
https://github.com/naver/billboard.js/releases/tag/3.7.0

What’s New?

Treemap

Another new capability has been added!. The treemap type will visualize hierarchical structure and each of the value represented as in a rectangle area with corresponding size relative the whole chart dimension.

Demo: https://naver.github.io/billboard.js/demo/#Chart.TreemapChart

bb.generate({
  data: {
    columns: [
      ["data1", 1300],
      ["data2", 200],
        ...
    ],
    type: "treemap", // for ESM specify as: treemap()
    labels: {
      colors: "#fff"
    }
  },
  treemap: {
    label: {
      show: true,
      threshold: 0.03,
      format: function(value, ratio, id) {
        return value;
      }
    }
  },
});

Generally well know treemap tiling is the binary and it’s visualized as:

billboard.js also support 5 different tiling methods(dice, slice, sliceDice, squrify, resquarify) aside of the binary tile type.

arc.cornerRadius

Newly added arc.cornerRadius option, can be applied for every arc types(donut, gauge, pie).

When specified the option, it will make each edge corner to be rounded. From this can make flourish arc type in a different way. And radius value can be controlled differently for each data series.

Demo: https://naver.github.io/billboard.js/demo/#PieChartOptions.CornerRadius

arc: {
    cornerRadius: 12,

    // can customize corner radius for each data with function callback
    //
    // The function will receive:
    // - id {string}: Data id
    // - value {number}: Data value
    // - outerRadius {number}: Outer radius value
    cornerRadius: function(id, value, outerRadius) {
        return (id === "data1" && value > 10) ?
            50 : outerRadius * 1.2;
    },

    // set ratio relative of outer radius
    cornerRadius: {
        ratio: 0.5
    }
}

Checkout different variation applied to different arc types.

.export() API: preserving fontStyle

In a previous version, .export() API couldn’t handle custom font style applied to text within chart.

Demo: https://naver.github.io/billboard.js/demo/#API.ExportPreserveFontStyle

This happens because the transformation to image is done in below steps.

Serialize svg nodes (with all styles used to render the chart) → Import to canvas element → export as image using canvas’ toDataURL() API.

To fully reflect all the styles applied to the chart, all the style rules and values needed to be accessible from the current page context. If the font style’s data coming from different domain, it can’t reflect correct font style.

To solve this, all the fonts data used, needed to inlined and embedded to current page, but is tedious task.

From this release, added preserveFontStyle option for .export() API, which makes to render correct font style coming from different domain without any additional work.

chart.export({
    preserveFontStyle: true
}, function(dataUrl) {
   ...
}

This option will facilitate to preserve font style, but has limitation. So, if you need to get perfect transformation, is still recommended embed font data.

Enhance tooltip.format.value passing ratio for stacked area & bar

For stacked area & bar type, tooltip.format.value callback function will receive ratio value as argument.

From this enhancement, will facilitate on displaying ratio(percentage) value for toolip.

tooltip: {
    format: {
        value: function(value, ratio, id, index) {
            ratio; // <== will given ratio
        }
    }
}

Closing

Last year, the downloads count has been increased 57.61% compared with ’21. This result shows the adoption of billboard.js is continuing to grow!

This surely will motivate us to keep invest on this project.
Many thanks to the community!

Stay tuned for the new features coming for this year.