DEV Community

Jae Sung Park
Jae Sung Park

Posted on

billboard.js 3.18.0: Arc annotations, per-group normalization & enhanced treemap labels

#billboardjs #javascript #webdev #d3js

This 3.18.0 release introduces powerful new features that expand chart visualization capabilities. From arc annotations for pie/donut charts to per-group stack normalization and enhanced treemap label formatting - this release addresses key community requests.

For the detailed release info, please check out the release note:
https://github.com/naver/billboard.js/releases/tag/3.18.0

📌 What's new?

1. Arc annotation labels (label.line)

A long-awaited feature request from the community! Display annotation labels with connecting lines outside the arc segments.

This enhances readability by placing labels clearly outside the chart, connected with visual lines to their corresponding sections.

const chart = bb.generate({
  data: {
    columns: [
      ["data1", 30],
      ["data2", 120],
      ["data3", 50]
    ],
    type: "pie"
  },
  pie: {
    label: {
      format: function(value, ratio, id) {
        return id + ": " + (ratio * 100).toFixed(1) + "%";
      },
      line: {
        show: true,      // Enable annotation lines
        distance: 30,    // Distance of labels from the arc
        text: true       // Show text labels (can be a function)
      }
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

Works with: pie, donut, gauge, polar chart types.

Demo:

2. Per-group stack normalization (data.stack.normalize.perGroup)

When using stack.normalize: true, the existing behavior sums up all column values regardless of which axis the series is assigned to.

This new option allows each group to normalize independently to 100%, which is essential when you have stacked bars on the y-axis and a separate line series on the y2-axis that shouldn't affect the normalization.

const chart = bb.generate({
  data: {
    columns: [
      ["data1", 30, 200, 100],
      ["data2", 130, 100, 140],
      ["data3", 60, 80, 120],
      ["data4", 200, 150, 100]
    ],
    type: "bar",
    groups: [
      ["data1", "data2"],
      ["data3", "data4"]
    ],
    stack: {
      normalize: {
        perGroup: true  // Each group normalizes independently to 100%
      }
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

Demo:
https://naver.github.io/billboard.js/demo/#Data.DataStackNormalizedGroup

3. Treemap label formatter with tile size

Previously, the treemap.label.format function only received value, ratio, and id parameters. While ratio was useful, it doesn't reflect the actual rendered dimensions.

Now the formatter receives the tile's real width and height in pixels, allowing you to conditionally render labels based on available space.

const chart = bb.generate({
  data: {
    columns: [
      ["data1", 1000],
      ["data2", 500],
      ["data3", 300],
      ["data4", 200]
    ],
    type: "treemap",
    labels: {
      // format(value, ratio, id, size)
      // - size: { width, height } in pixels
      format: function(value, ratio, id, size) {
        if (size.width < 50 || size.height < 30) {
          return ""; // Hide label if tile is too small
        }
        return id + "\n" + value;
      }
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

For example, the size argument will contain each data's square dimension. From the below screenshot, data1's width and height value will be passed to the size object.

👋 Going forward

New features added and improvements fine-tune responsive behavior and visual clarity — building toward a more flexible, developer-friendly charting core. Keep the feedback coming on GitHub and community(medium & dev.to) channels!

Happy charting!

Top comments (0)