DEV Community

Cover image for billboard.js 3.16.0 release: ✨ bar trending line & improved resizing performance!
Jae Sung Park
Jae Sung Park

Posted on

billboard.js 3.16.0 release: ✨ bar trending line & improved resizing performance!

#javascript #d3js #webdev #billboardjs

The new release comes with 3 new features and improvements.

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

📌 What’s new?

bar trending line

New bar trending line will connect between bars and will make to understand its range(trending) gaps.

It supports 4 different types to connect bars and also can specify per dataseries.

Image description

Demo: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarConnectLine

Applying is straight forward and very simple. If needs to customize connect line styles, define a CSS selector rule .bb-bar-connectLine {...}.

bar: {
  // specify types for all bars
  connectLine: "start-start" | "start-end" | "end-start" | "end-end",

  // specify different types per dataseries
  connectLine: {
      data1: "start-start",
      data2: "start-end",
      data3: "end-start",
      data4: "end-end"
  }
}
Enter fullscreen mode Exit fullscreen mode

Reverse axis.tick.culling

axis.tick.culling will make to render nicely tick text values. But depend on ticks sizes, right sided ticks(usually the last) text isn’t drawn.

In this release, added new option axix.tick.culling.reverse option to control the flows. When is “reversed”, will start displaying tick text from the last to the start point.

Image description

Demo: https://naver.github.io/billboard.js/demo/#Axis.XAxisTickCulling

Specify reverse option if want make tick culling in a reversed flow.

axis: {
  [x | y | y2]: {
    tick: {
      outer: false,
      culling: {
        max: 6,
        reverse: true
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Specify absolute axes text size value

axis.evalTextiSize option was introduced since 3.14.0 and normally doesn’t need to be touched. But if needs to adjust very delicately axes text size for some styling and rendering issue, the newly added feature will help.

All axes tick text sizes are differently applied.

All axes tick text sizes are differently applied.

Demo: https://naver.github.io/billboard.js/demo/#Axis.AxisEvalTextSize

Now can tell billboard.js to count axes text dimension to calculate the dimension of the chart. Utilize given parameters to control return values.

axis: {
    y2: {
      show: true
    },
    // specify manual axis text character size
    // text: tick text element, id: Axis id - 'x', 'y' or 'y2'
    evalTextSize: function(text, id) {
       return {
           x: {w: 30, h: 30},
           y: {w: 25, h: 20},
           y2: {w: 15.5, h: 20}
       }[id];
    }
  }
Enter fullscreen mode Exit fullscreen mode

Perf Improvement

One of the hard work done in this release was improving some performance on runtime. Especially during the resize happens.

Refactored several points and finally got 54.87% decrease in average compared with the last version.

Types 3.15.1 3.16 Diff
Area 422.42 153.5 -63.66%
Bar 509.1 244.3 -52.01%
Pie 56.24 47.91 -14.79%
Total 987.76 445.71 -54.87%

Here’s the benchmark in action and can check duration time measured on console log.

Image description

👋 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)