billboard.js 3.12 release: new funnel chart!

4 min readMay 27, 2024

Glad to announcev3.12 released 🥳 🎉 today! This release comes with 3 new features, 7 bug fixes and improvements.

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

What’s New?

funnel chart

A funnel chart is a graphical representation of each area gets narrower. Each area corresponds to a step or stage in a sequential process where illustrating the progression of data as they move through.

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

From this release, can easily generate funnel chart by specifying as chart type. And also it provides neck option which can adjust bottom narrowed area’s neck.

bb.generate({
  data: {
    columns: [
     ["data1", 11300],
     ["data2", 12245],
     ["data3", 11125],
     ["data4", 13355],
     ["data5", 18562]
    ],
    type: "funnel", // for ESM specify as: funnel()
    labels: true,
    order: "asc"
  },
  funnel: {
    neck: {
       // absolute value
       width: 200,
       height: 50,

       // ratio value relative of chart size
       width: { ratio: 0.5 },
       height: { ratio: 0.5 }
    }
  }
});

axis.tooltip

With this option, will make notice the current position’s coordinate value according its axes value.

This will facilitate recognize exact point during the interaction with the chart.

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

axis: {
    tooltip: true, // generate tooltip with default background color

    // set backgound color for axis tooltip texts
    tooltip: {
         backgroundColor: "red",

         // set differenct backround colors per axes
         // NOTE: In this case, only specified axes tooltip will appear.
         backgroundColor: {
              x: "green",
              y: "yellow",
              y2: "red"
         }
    }
}

axis.x.forceAsSingle

When one of the below option is used, tooltip event will work only when mouse pointer is near to the data points:

scatter, bubble type
tooltip.grouped: false
xs: { data1: "x1", data2: "x2" }

The reasons are, bubble and scatter types are data centric, which aren’t approached by x axis.

And when multiple x axes with xs option is used, is like specifiying multple x axes and its scales as follow image.

{
   data: {
     columns: [
        ["x1", 1, 2, 3, 4, 5],
        ["x2", 1,3, 2.05, 3.3, 4.4, 4.8],
        ["data1", 300, 350, 300, 120, 120, 212],
        ["data2", 130, 100, 140, 200, 150, 50]
      ],
     xs: {
        data1: "x1",
        data2: "x2"
     }
   }
}

The example only use 2 x axes, but what if 5 or 10 x axes are used? It means there’re multiple overlapped area depend on the each x axis range.

In this scenario, it can be hard to make to interact based on the x axis value.

But in the other hand, there’re use cases which want to interact as single x axis. To fulfill this, will provide new axis.x.forceAsSingle to make event interact as like having single x axis.

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

{
  data: {
    columns: [
     ["x1", 1, 3, 6, 7, 9],
     ["x2", 2, 4, 6, 8, 10],
     ["data1", 300, 350, 300, 120, 220, 250],
     ["data2", 130, 100, 140, 200, 150, 50]
    ],
    type: "line",
    xs: {
      data1: "x1",
      data2: "x2"
    }
  },
  axis: {
    x: {
      forceAsSingle: true
    }
  }
}

Update on transpiler: babel → esbuild

billboard.js has been supporting legacy browsers since the beginning, but for it, needed add lots of polyfills which made to increment distribution size.

We concluded that the marketshare of legacy browsers dropped down, and it’s time to remove it.

Reviewed currently available options and we decided to adopt esbuild, because it could easily migrate using our current build tooling environment.

Here is the result, which cut down the build size from 9~18%.