DEV Community: Jae Sung Park

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

Jae Sung Park — Fri, 23 Jan 2026 08:18:17 +0000

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)
      }
    }
  }
});

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

Demo:

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

https://naver.github.io/billboard.js/demo/#GaugeChartOptions.LabelLine

https://naver.github.io/billboard.js/demo/#PolarChartOptions.LabelLine

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%
      }
    }
  }
});

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;
      }
    }
  }
});

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!

billboard.js 3.17.0: ✨ New Axis Customization, Label Styling & Image Labels!

Jae Sung Park — Wed, 24 Sep 2025 02:41:17 +0000

This 3.17.0 release brings powerful new features that give developers fine-grained control over chart visualization.

From inner axis ticks and dynamic label background functions to label borders and image-based labels — all the core features requested by our community are now available.

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

🎯 Major New Features

Image Label Support

A groundbreaking feature that allows using images as labels. Create more intuitive data representations with icons, logos, and custom images.

Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
The new data label image option also added to donut, gauge, pie and polar types as well.

Newly added options are:

data.labels.image
donut.label.image
gauge.label.image
pie.label.image
polar.label.image

Demo:
https://naver.github.io/billboard.js/demo/#Data.DataLabelImage
https://naver.github.io/billboard.js/demo/#DonutChartOptions.LabelImage
https://naver.github.io/billboard.js/demo/#PieChartOptions.LabelImage
https://naver.github.io/billboard.js/demo/#PolarChartOptions.LabelImage
https://naver.github.io/billboard.js/demo/#GaugeChartOptions.GaugeLabelImage

Simply specify image url and the dimension(dimension values are required, since it used to calculate correct position).

data: {
 labels: {
  image: {
    url: "./assets/data1.svg",

    // or use placeholder to dynamically set image URL based on data ID
    url: "./images/{=ID}.svg",  // will be replaced to "./images/data1.svg", "./images/data2.svg", etc.

    width: 30,
    height: 30,
    pos: {
       y: -5
    }
  },

  // or use function to return image configuration dynamically
  image: function(v, id, i) {
    // v is the value of the data point where the label is shown.
    // id is the id of the data where the label is shown.
    // i is the index of the data series point where the label is shown.

    // Return different images based on value
    if (v > 500) {
     return {
      url: "./high-value.svg",
      width: 40,
      height: 40,
      pos: { x: 0, y: 0 }
     };
    } else if (v > 100) {
     return {
      url: "./medium-value.svg",
      width: 30,
      height: 30,
      pos: { x: 0, y: 0 }
     };
    } else if(v < 5) {
        // Return falsy value in case of don't want to show image
        return null;
    } else {
     return {
      url: "./low-value.svg",
      width: 20,
      height: 20,
      pos: { x: 0, y: 0 }
     };
    }
   }
},
[donut | gauge | pie | polar]: {
 label: {
  image: ...
 }
}

Label Border Styling

Add borders to labels for improved readability and visual emphasis effects.

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

Can control border radius and the padding, which will let customize styles as your needs.

data: {
    labels: {
        border: true,
        border: {
             padding: { ... },
             radius: 10
        }
    }
}

Inner Axis Ticks

Introducing the tick.inner option that allows you to display axis ticks inside the chart area for a cleaner, more modern chart design.

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

Specify per axes by simply enabling the tick.inner option.

  axis: {
    x: {
      tick: {
        inner: true
      }
    },
    y: {
      tick: {
        inner: true
      }
    },
    y2: {
      show: true,
      tick: {
        inner: true
      }
    }
  }

Dynamic Label Background Colors

Set label background colors using functions to dynamically change colors based on data values, significantly enhancing data visualization expressiveness.

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

When the option is set, background colors can be specified one color per dataset.

Within the function, the last returned color for dataset will be used.
Only can control set or unset background color for each values.

data: {
  labels: {
      // call back for label text background color
      backgroundColors: function(color, d) {
          // color: the default data label color string
          // data: ex) {x: 0, value: 200, id: "data3", index: 0}
          ....
          return d.value > 200 ? "cyan" : "red";
      }
  }
}

🚀 Enhanced Developer Experience

This release significantly increases chart customization flexibility based on developer feedback:

Enhanced Axis Control: Inner ticks enable more sophisticated chart designs
Dynamic Styling: Function-based background colors for data-driven visualization
Rich Label Expression: Border and image support for diverse representation methods
Consistent API: Intuitive option structure while maintaining existing billboard.js patterns

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

Jae Sung Park — Fri, 27 Jun 2025 08:41:42 +0000

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.

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"
  }
}

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.

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
      }
    }
  }
}

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.

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];
    }
  }

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.

👋 Going forward

Happy charting!

billboard.js 3.15.0 release: Container-based resizing & enhanced regions

Jae Sung Park — Thu, 20 Mar 2025 05:26:01 +0000

New release comes with 3 new features and improvements.

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

What's New?

Container-based Auto Resize

New container-based auto resize feature has been added. This allows the chart to automatically resize based on its container dimension changes.

The default resize is triggered based on "viewport" changes. It means automatic resize, will be executed in a conditon where browser resize event happens.

Demo: https://naver.github.io/billboard.js/demo/#ChartOptions.resizeParent

Simply specify "parent" as resize.auto option value.

resize: {
    // auto resize when parent container element size changes
    auto: "parent"
}

The new option will give a new alternative to resize based on parent container element's size changes, regardless the viewport.

Enhanced Regions with Category Range Support

Regions feature has been enhanced to accept category range.
This allows you to define regions based on category values rather than just numeric values.

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

{
  ...
  axis: {
    x: {
      type: "category",
      categories: [
        "cat1",
        "cat2",
        "cat3",
        "cat4",
        "cat5",
        "cat6"
      ]
    }
  },
  regions: [
    {
      axis: "x",
      start: "cat2",  // <-- can use category name
      end: "cat3"
    },
    {
      axis: "x",
      start: "cat5",
      end: 5. // <-- can be combined with indexed number value
    }
  ]
}

This enhancement provides more flexibility when working with categorical data, allowing you to highlight specific ranges of categories on your charts.

Regions Label Center Positioning

New regions.label.center option has been added to allow centering region labels. This gives you more control over the positioning of labels within regions.

Demo: https://naver.github.io/billboard.js/demo/#Region.RegionLabel

The option will accept two string value of alignment direction.

"x": will align horizontally
"y": will align vertically

Can be used separately or combined together.

regions: [
  {
      label: {
          center: "xy"
      }
  },
  {
      label: {
          center: "x"
      }
  },
  {
      label: {
          center: "y"
      }
  }
]

With this feature, you can create more visually appealing and informative region labels that are properly centered within their respective regions.

Closing

These new features enhance billboard.js's flexibility and ease of use, particularly for responsive designs and working with categorical data. The container-based auto resize feature is especially useful for modern web applications where responsive design is crucial.

Try out these new features and let us know what you think!

billboard.js 3.14 release: viewBox resizing!

Jae Sung Park — Fri, 25 Oct 2024 05:42:47 +0000

New v3.14 release came out today! This release comes with 5 new features, 8 bug fixes and bunch of improvements.

For the detailed release info, please checkout the release note:

https://github.com/naver/billboard.js/releases/tag/3.14.0

What’s New?

viewBox resizing

New resizing option is added. The default resizing will resize based on the its container dimension changes.

The new resize.auto='viewBox' option will make the chart to resize maintaining the aspect ratio, and without any computation costs.

Basically, it utilizes the “viewBox” attribute behaviour, and what it actually does is stretches the SVG viewport.

Demo: https://naver.github.io/billboard.js/demo/#ChartOptions.resizeViewBox

If the usage requirement matches, is definetelly recommended.

axis.evalTextSize

When chart is initialized to render, internally will compute axis tick text size to calculated the space needed for axis area.

Generally, this process isn’t needed to be considered at all, but in a case when axis tick text sizes changes after this initialization, the calculation will make to render incorrectly, because the tick text size used internally isn’t valid after the changes.

To improve in this use case, will provide new axis.evalTextSize option, where can opt the way to getting axis tick size computation.

axis: {
    // 1: default, which will memoize evaluated axis text size
    evalTextSize: true,

    // 2: will evaluate the dimension of axis text size every time.
    evalTextSize: false,

    // 3: customize dimension evaluator
    evalTextSize: function(text) {
        ...
        return {width, height):
   }
}

interaction.onout

The “default” behavior of being away from chart area is defocusing currently selected state. That means, the showing state of tooltip, focused grid line etc.

The new option will make to maintain last selection state, even being away from the chart area, to keep last selection state.

Technically, the option will turn-on or off the default interaction for “onout” event.

interaction: {
    onout: false
}

forced lazy rendering

The render.lazy option will make to render when container element becoming visible. Useful for circumstances where the chart element needed to be initialized later.

The determination will automatically set when the container element isn’t visible. And there’s no way to force to render in that condition, because initializing on hidden state can possible make to render wrongly and has no meaning in general.

But, also there’re special cases to do that. To fulfill these necessity, when explicit render.lazy=false is set, will initialize regardless the container element visibility state.

render: {
    // when explicit 'false' set, will force render even container is hidden
    lazy: false
}

Visibility state to legend item’s event callback

Small informative enhancement is added for legend item’s event callback functions.

Event callbacks only provided current legend id value only. If needed do some task based on the legend visibility, it needed to implement on your own.

It wasn’t hard, but is definitely cumbersome taks. To get rid this, now will pass “visible” state of the legend item.

Based on this argument, can execute task based on the visibility state.

legend
     item: {
         // new 'visible' param is given to be used within callback
         onclick: function(id, visible) {
             // toggle based on the data visibility
             this[visible ? "hide" : "show"](id);
         },
         onover: function(id, visible) { ... },
         onout: function(id, visible) { ... },
    }
}

Closing

That’s all we have for this release and probably last feature implementations for this year.

Thanks always, and stay tune for upcoming updates!

billboard.js 3.13 release: new area-step-range chart!

Jae Sung Park — Fri, 23 Aug 2024 09:26:33 +0000

New v3.13 release came out today! This release comes with 4 new features, 2 bug fixes and tooling improvements.

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

What’s New?

Area-step-range chart

Range types are useful visualize “ranged values” from the baseline value. From this release will provide new “step” type to the variation.

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

import bb, {areaStepRange} from "billboard";

bb.generate({
  data: {
    columns: [
     ["data1", [70, 40, 30],
     [155, 130, 115],
     [160, 135, 120],
     [200, 120, 110],
     [95, 50, 40],
     [199, 160, 125]
    ]],
    type: areaStepRange()
  }
});

Regions rendering improvement

To render some range with dashed line, data.regions option is used. But the way of rendering dashed lines, done by combining multiple path command as dashed lines needed to be.

From the above example screenshot, multiple path command are needed to draw dashed lines.

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

This approach caused some rendering issues(#1, #2) and we tried to improve this on native way.

Instead of drawing dashed lines with path commands, we moved to render using stroke-dasharray style property.

Before: path command/ After: stroke-dasharray

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

On zoom interaction, animation frame performance has been improved from 84ms → 5ms!

By updating to 3.12, will get the benefit without any code changes.

legend.format: provide original data id

When data.names option is specified, it will make display data names different than the original names(id).

{
  data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
    columns: [
       ["data1", 71.4],
       ["data2", 10]
    ]
  }
}

In this case, legend.format callback, will receive data.names replaced value, instead the original id.

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id) {
       // id will be 'Detailed Name' and 'Name Detailed'
    }
}

From this release will provide original ‘id’ value with the replaced names.

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id, dataId) {
        // id will be 'Detailed Name' and 'Name Detailed'
        // dataId will be 'data1' and 'data2'
    }
}

Demo: https://naver.github.io/billboard.js/demo/#Legend.LegendFormat

bar.width callback

Previously, bar.width was possible specify absolute value or in ratio value. absolute can’t reflect chart resize dynamically and ratio can reflect with some limitation.

The way ratio is calculated is based on below equation.

x Axis tick Interval * ratio

For example, if chart has width of 500px, with 5 x Axis tick count, the interval will be 100px roughly.

In this case, if bar.width.ratio=0.5 is specified, the equation will be as follows, and bar’s width will be 49.9px.

100(exact value is 99.8) * 0.5 = 49.9

To give more control adjusting bar’s width value, will enhance bar.width option to accept a callback function with handy parameters.

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

bar: {
    width: function(width, targetsNum, maxDataCount) {
         // - width: chart area width
         // - targetsNum: number of targets
         // - maxDataCount: maximum data count among targets
   }
}

One more thing, update on test framework

We adopted Karma + Mocha for our test framework and it was great experience to maintain billboard.js to be stable.

Sadly, Karma announced the deprecation and we needed to migrate some other modern test frameworks to keep the library stable and following the modern ecosystem.

After some research, we decided to move to vitest. We successfully migrated within this release and local testing has been improved up to 63%!

Packages	Duration	Diff over Karma
Karma (Mocha + Chai)	142.382	-
Vitest (webdriverio:chrome)	144.364	`+1.39%`
Vitest (playwright:chromium)	51.606	`-63.75%`

Form more details, checkout https://github.com/naver/billboard.js/pull/3866

Closing

That’s all we have for this release and thanks to stay tuned!

billboard.js 3.10 release: point radialGradient, new theme and improved stability.

Jae Sung Park — Thu, 26 Oct 2023 01:31:20 +0000

New 3.10 release 🥳 🎉 out today! This release comes with 6 new features, 21 bug fixes and improvements.

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

What's New?

Radial gradient for point

Radial gradient option can be applied to circle points and will provide an alternative to visualize points in different way.

Demo: https://naver.github.io/billboard.js/demo/#Point.RadialGradientPoint

Simply turning on the option with default gradient value, or can customize(for more info checkout the link)by your own value.

point: {
  // apply radial gradient with default value
  radialGradient: true,

  // or apply radial gradient with customized value
  radialGradient: {
     cx: 0.5,
     cy: 0.5,
     r: 0.5,
     stops: [
       [0.3, "#fff", 0.8],
       [0.6, function(id) { return id === "data1" ? this.color(id) : "green"; }, 0.35],
       [1, null, 1]
     ]
  }
}

New ‘modern’ theme

New theme “modern” added to this release. Like other themes, will provide pre-designed styles which can be used as a starter of your project or just use as is.

The colors patterns and styles of main UI elements are as follows.

If wants check all the themes appearances, checkout:
https://github.com/naver/billboard.js/wiki/Themes

To see work in action, simply go to example page and select modern theme from the select box.

subchart API

This newly added API can control programmatically the selection range of subchart.

Demo: https://naver.github.io/billboard.js/release/latest/doc/Chart.html#subchart

const chart = bb.generate({ ... });

// select subchart selection giving domain range
chart.subchart([2, 5]);

// reset subchart selection
chart.subchart.reset();

The use is simple and straight forward. Specify the domarin range of current chart and subchart will reflect it.

regions.label

This option will make add label text to the regions.

Demo: https://naver.github.io/billboard.js/demo/#Region.RegionLabel

regions: [
  {
    ...
    label: {
       text: "Regions 1",
       x: 50,  // position relative of the initial x coordinate
       y: 50,  // position relative of the initial y coordinate
       color: "red",  // color string
       rotated: true.  // make text to show in vertical or horizontal
    },
    ...
  }
]

The below screenshot shows 3 different regions with label text, applied with options.

Provide y coordinate for tooltip position

Previously, x coordinate was provide to facilitate updating tooltip position, but not for y coordinate.

The reason was unlike the x coodinate, providing y coordinate needed consider which value y coordinate will base on. For eg., if the chart visualizing stacked bar or multiple series of data, which value should take for y coordinate?

It can’t be determined programmatically, so for single data will provide y coordinate value, but for multiple data will provide a helper function which user can get necessity coordinate from.

Demo: https://naver.github.io/billboard.js/demo/#Tooltip.TooltipPosition

tooltip: {
     position: function(data, width, height, element, pos) {
         // data: [{x, index, id, name, value}, ...]
         // width: Tooltip width
         // height: Tooltip height
         // element: Tooltip event bound element
         // pos: {
         //   x: Current mouse event x position,
         //   y: Current mouse event y position,
         //   xAxis: Current x Axis position (the value is given for axis based chart type only)
         //   yAxis: Current y Axis position value or function(the value is given for axis based chart type only)
         // }

         // yAxis will work differently per data lenghts
         // - a) Single data: `yAxis` will return `number` value
         // - b) Multiple data: `yAxis` will return a function with property value

         // a) Single data:
         // Get y coordinate
         pos.yAxis; // y axis coordinate value of current data point

         // b) Multiple data:
         // Get y coordinate of value 500, where 'data1' scales(y or y2).
         // When 'data.axes' option is used, data can bound to different axes.
         // - when "data.axes={data1: 'y'}", wil return y value from y axis scale.
         // - when "data.axes={data1: 'y2'}", wil return y value from y2 axis scale.
         pos.yAxis(500, "data1"); // will return y coordinate value of data1

         pos.yAxis(500); // get y coordinate with value of 500, using y axis scale
         pos.yAxis(500, null, "y2"); // get y coordinate with value of 500, using y2 axis scale

         return {
           top: 0,
           left: 0
         }
     }
}

With provided y coordinate value, can make tooltip to be positioned at the center of each data point’s position.

Also for x coordinate, will return with the left y axis margin(if has), so don’t need to add anymore.

TableView plugin: nullString option

When data contains nullish value, TableView plugin couldn’t handle it properly rendering broken table.

From this release, new enhancement option added to TableView plugin, where can set replacement string(default is ‘-’) value for nullish value.

Thanks the contribution from https://github.com/RobinDeeCee

 const chart = bb.generate({
  data: {
    columns: [
       ["x", "2012", "2013", "2014", "2015", "2016"],
       ["data1", null, 2380, null, 1238, 1500],
       ["data2", 500, 120, 100, 200, 840, 935],
       ["data3", 1223, null, null, 300, 250],
       ["data4", null, 2135, 1020, 1138, 2119],
       ["data5", 1223, 2310, 1210, 2220, 1238]
    ],
    plugins: [
       new bb.plugin.tableview({
        ...
        nullString: "N/A"
       }),
    ]
 });

The above data will be rendered as follows. Note that nullish datas are replaced by given N/A string.

Improvements

Padding adjustment

padding option usually used to adjust chart size, and where providing different modes(like ‘fit’ or setting false to letting only shape to be visualized) with pixel unit control.

But, with different combination of the option padding wasn’t consistent and accurate.

To improve this issue, we worked to make padding to be applied in a consistent way.

Also wrote a documentation to facilitate how padding option will be applied in each circumstances.

Understanding padding

Boosting test coverage up to 90%

Stability is our concerns always. But how to make the library functioning as is with newly added features and constant code changes?

The basic strategy is enforcing the test code to cover previous bug situation and different option combination.

So, for that we decided increase the coverage of the codebase. Previously, the coverage was stayed as 90%+, but narrowing down for files, there were some files staying 70~80%.

This can be problematic and were potential cause of degrading the stability.

We put hard work to improve this, and we ended up reaching each files having 90%+ of the test coverage!

Type	tag/3.9.3	After (as of 30th, Aug)	Diff
Statements	94.69% (9,235/9,752)	`97.57%` (9,499/9,753)	`+2.88%`
Branches	86.28% (5,682/6,585)	`90.37%` (5,981/6,618)	`+4.09%`
Functions	94.99% (1,499/1,578)	`97.71%` (1,541/1,577)	`+2.72%`
Lines	94.69% (7,513/7,934)	`97.67%` (7,724/7,908)	`+2.98%`
Coverage	90.859%	94.348%	`+3.489%`

If you’re curious about it, check more details from below link:
https://github.com/naver/billboard.js/issues/3332#issuecomment-1709308119

Closing

We’re growing slow, but steady. Thanks for all the interests showing to us.
We’ll comeback with more enhancements as usual. So, stay tune!

billboard.js 3.9 release: arc.needle, dark theme 🌘 & more!

Jae Sung Park — Mon, 03 Jul 2023 11:25:28 +0000

New 3.9 release 🥳 out today! This release comes with 7 new features and 3 bug fixes.

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

What's New?

arc.needle

Needle can be used to point certain point of data value, within arc shape.

Demos:
https://naver.github.io/billboard.js/demo/#DonutChartOptions.DonutNeedle
https://naver.github.io/billboard.js/demo/#GaugeChartOptions.GaugeNeedle

The needle shape can be fully customized by your own(in this case it needs specify path value), or just simply update the length or top/bottom radii.

Checkout full option interface and its comments to understand each options.

[donut | gauge]: {
   // when 'arc.needle.show=true' is set, will able to use template to reflect needle value
   title: "{=NEEDLE_VALUE}"
},
arc: {
   needle: {
       show: true,
       color: "red", // any valid CSS color

       // for customized needle
       path: function(length) {
         const len = length - 20;

         // will return upper arrow shape path
         // Note: The path should begun from '0,0' coordinate to top center.
         const path = `M 0 -${len + 20}
           L -12 -${len}
           L -5 -${len}
           L -5 0
           A 1 1 0 0 0 5 0
           L 5 -${len}
           L 12 -${len} Z`;

         return path;
       },

       value: 40,  // will make needle to point value 40.
       length: 80, // needle length in percentages relative to radius.

       top: {
         // rx and ry are the two radii of the ellipse;
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
         rx: 1,
         ry: 1,
         width: 5
       },

       bottom: {
         // rx and ry are the two radii of the ellipse;
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
         rx: 1,
         ry: 1,
         width: 10
         len: 10
       }
     }
 }

The first donut chart uses customized needle and initial value specified. In this case, when some dataseries is hidden, the needle will updating to point given value.

And the second chart, initialized with 0 value, and the needle value is updated dynamically.

To update needle value dynamically, it provides simple API method to update current needle value by chart.$.needle.updateHelper().

// Update arc needle position
const chart = bb.generate({
  data: {
    type: "donut"
  },
  arc: {
    needle: {
      show: true,
      ...
    }
  }
});

chart.$.needle.updateHelper(70);  // update needle position to point value 70.

// update needle position to point value 70 and the config value.
// NOTE: updating config value, will update needle pointer initial value too.
chart.$.needle.updateHelper(70, true);

// update needle point position every 1 second
let i = 0;
setInterval(() => {
  chart.$.needle.updateHelper(i += 10);
}, 1000)

Dark theme

Dark mode are quite common these days, and to facilitate will provide dark theme from this release.

Of course as other themes, it can be used as a starter to apply your own styles based on dark theme.

dark theme will be distributed as single css file and see in action from the example page by selecting it from the left side navigation "Theme" section.

point.sensitivity

point.sensitivity option will let customize the distance(from data point's x/y coordinate)to be interacted.

Demo: https://naver.github.io/billboard.js/demo/#Point.PointSensitivity

When sensitivity value is 3, it means the interaction will happen when mouse pointer enters 3px boundaries starting from exact x/y coordinate.

But for bubble type, specifying absolute value can't make to interact smoothly, because each bubble radius will vary on its value.

To improve this, will provide radius option, to reflect the sensitivity depend on each bubble radius. And also, provides callback option which can add some conditional to control it in more detail way.

point: {
     // having lower value, means how closer to be for interaction
     sensitivity: 3,

     // sensitivity based on point's radius
     sensitivity: "radius",

     // callback for each point to determine the sensitivity
     sensitivity: function(d) {
       // ex. of argument d:
       // ==> {x: 2, value: 55, id: 'data3', index: 2, r: 19.820624179302296}

       // returning d.r, will make sensitivity same as point's radius value.
       return d.r;
     }
}

The below example, illustrate when sensitivity value is specified as absolute value and when is specified radius value.

data.labels.position

Another enhancement option to control the position of data label text.

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

Just simply return corresponding x/y coordinate value for each data text element as you want.

data: {
  ...
  labels: {
     show: true,
     /**
      * The arguments are:<br>
      * - `type` coordinate type string, which will be 'x' or 'y'.
      * - `v` is the value of the data point where the label is shown.
      * - `id` is the id of the data where the label is shown.
      * - `i` is the index of the data series point where the label is shown.
      * - `texts` is the array of whole corresponding data series' text labels.
      */
     position: function(type, v, id, i, texts) {
       let pos = 0;
       const len = texts.size() / 2 - 1;

       if (type === "x" && (i === 0 || i === len)) {
         pos = i === 0 ? 20 : -20;
       }

       return pos;
    }
  }
}

bar.front

When various shape types with bar type are used in single chart, usually bar shapes are positioned in behind of other shapes elements to not make overlap and interrupt the visibility.

Controlling z-order is not easy in "svg world", because the z-order will be following relative of DOM tree structure.
The only way to control this, it needs control DOM tree structure which is not an easy task.

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

Enabling this option, will simply make bar shapes to appear at the front of other shapes elements.

bar: {
    front: true
}

Easily can notice the differences from below example.

legend.item.interaction

By default, legend items will have toggle and over/out interaction. But sometimes there're needs to disable it.
From this release, will provide new options to control it.

Demo: https://naver.github.io/billboard.js/demo/#Legend.LegendItemInteraction

Will provide 2 way to control:

Enable or disable the default legend interaction
Provide a "double click" interaction, which in this case, double clicking will make focusing clicked dataseries and hiding others.

legend: {
   item: {
      // will disable default interaction (mouse hover effect and click to hide clicked dataseries)
      interaction: false | {
        /**
        * Set legend item to interact on double click.
        *  - **NOTE:**
        *    - Double clicking will make focused clicked dataseries only, hiding all others.
        *      - for single click case, `click + altKey(Win)/optionKey(Mac OS)` to have same effect.
        *    - To return initial state(which all dataseries are showing), double click current focused legend item again.
        *      - for single click case, `click + altKey(Win)/optionKey(Mac OS)` to have same effect.
        *    - In this case, default `click` interaction will be disabled.
        */
        dblclick: true
      },

      // when set below callback option value, will work regardless of 'interaction=false' is set
      onclick: function(id) { ... },
      onover: function(id) { ... },
      onout: function(id) { ... }
   }
}

See in action when dblclick option is enabled. "Double clicking" legend item, will make appearing clicked dataseries only and hiding the others.

To return initial states, double click focused legend item again.

Closing

The number of downloads are continuously growing, and it reached 100k downloads per month!

This proves competitiveness among other options, and this is somehow delightful 😆 to see more more developers around the worlds are choosing billboard.js for the data visualization.

We'll continuously making improvements from your supports!

Status of JavaScript(ECMAScript): 2019 & beyond.

Jae Sung Park — Thu, 27 Jun 2019 01:49:46 +0000

JavaScript continues its popularity that it doesn’t necessary to mention it anymore.

JavaScript is the most commonly used language in GitHub over the years, as shown in the graph in GitHub’s report, Octoverse. Also Stack Overflow’s recent survey, “Developer Survey Results 2019”, JavaScript was named as the most popular technology.

Top languages over time used on GitHub

In particular, ECMAScript 2015 and subsequent ECMAScript specifications seem to be accepted by many developers without much resistance.

JavaScript Flavors from the ‘State of JS 2018’ survey.

In this article we will look at the key features of ECMAScript 2018 and the proposals expected to be included in the following specifications, ECMAScript 2019 and ECMAScript 2020.

Bear in mind:
The content of this article is based on June 2019. Depending on the time you read, the content and facts of the article may vary.

Some changes & news

Although it does not directly affect the linguistic aspects of JavaScript, there have been some changes that could affect indirect aspects, such as use environments and ecosystems.

Changes in TC39

TC39, a technical committee discussing JavaScript standard specifications, has decided to change its operating structure from 2019. TC39 holds meetings six times a year, and the committee has grown to a point where about 40 to 60 people attend meetings.

The structure, which used to be the chairman and vice chairman, changed to a horizontal structure in the form of shared responsibility by three co-chairs (Aki Braun (PayPal), Brian Terlson (Microsoft), and Yulia Startsev (Mozilla). It also opened its official website(https://tc39.github.io) in March 2019.

In the article “A Year (plus a little) on TC39”, written by Aki Braun, co-chair of TC39, you can see the progress of the TC39 meeting and the appearance of the meeting.

Earlier in July 2018, npm joined ECMA International and TC39 (see “npm Joins ECMA International and TC39”).

SharedArrayBuffer

Due to the security vulnerabilities Meltdown and Spectre, browser vendors have changed their default settings to disable the use of SharedArrayBuffer object as of January 5, 2018.

These settings are still being maintained to this day, except Chrome. Chrome reactivated since v67, through the site isolation (see “Isue 821270: Re-enable SharedArrayBuffer + Atomics”).

The adoption of chromium by MS Edge

Microsoft surprised many by announcing on December 6, 2018 that it would transitioning its browser, Microsoft Edge, to Chromium-based (see “Microsoft Edge: Making the Webbetter through more open source collaboration.”)

In a Q&A session with Microsoft held on the sidelines of the TC39 meeting on Jan. 29, 2019, the following facts were revealed regarding Microsoft Edge’s Chromium transition.

There’s no plan on open sourcing the old rendering engine.
The updates of the existing JavaScript engine, ChakraCore, will continue but has no long-term plans.

Limin Zhu, member of ChakraCore Team, commented as:

ChakraCore is currently being used in various projects outside the browser. So, despite the change of direction for Microsoft Edge, our team will continue supporting ChakraCore (see “Chromium adoption in Microsoft Edge and future of ChakraCore”).

You can download chromium based Microsoft Edge(Canary/Dev/Beta version) from the Microsoft Edge Insider Channels site.

The purpose and future plans for transforming Microsoft Edge to Chromium-based can be found in the “Microsoft Edge and Chromium Open Source: Our Intent” article.

From the developer’s perspective, this transition of Microsoft Edge can reduce the burden & struggles of cross-browsing development.

However, from the perspective of the Web ecosystem, something worrisome could happen. Because this will cut the diversity of the browsers.

If you remember the time when Internet Explorer was in a monopolistic position, where many websites were targeted to Internet Explorer only, the expansion of chromium-based browsers would not be a pleasant.

For the concerns about diversity, see the article “Chrome is turning into the new Internet Explorer 6” and Mozilla’s “Goodbye, EdgeHTML”.

Module Support

Since the module support has been added in ECMAScript 2015, modules are widely used as an essential functionality now.

Let’s take a look the coverage and the current status of the dynamic import() syntax and native module support to further expand of the use of the module.

Dynamic import()

Promise based import() syntax, will let load module dynamically. This proposal was staying at Stage 3 for awhile, but finally 6th June, reached ‘Stage 4’ and become a part of the ECMAScript 2020.

For the detailed explanation the import() syntax, see the article “ES modules: A cartoon deep-dive”.
Checkout caniuse.com for the browser support coverage.

import("./myModule.mjs")  
    .then(module => {
        ...
    });
// using async/await
(async () => {
    const module = await import("./myModule.mjs");
    ...
})();

Starting from Firefox 60, the import() syntax can be used by setting the javascript.options.dynamicImport flag, and this was enabled by default in Firefox 67.

Microsoft Edge(non chromium based) does not support import() syntax yet, but it would expected to be supported when chromium based Edge is released.

Native Module loading

Starting with Firefox 60 released in May 2018, native modules(ESM) can be used without flag(see “Firefox 60 — Modules and More”). Node.js 8.5.0, released by September 2017, experimentally supports ESM.

ESM in Node.js requires --experimental-modules flag as the below example. In this occasion, CommonJS’s ‘require()’ will be disabled for module loading (see “Announcering a new — experimental-modules”).

node --experimental-modules my-app.mjs

The Node.js foundation, formed ‘Module Team’ for the official support of ESM. The work of the Module Team is split into 4 phases.

Phase 0: Branches off of current Node but removes much of the Node 8.5.0+ --experimental-modules implementation.
Phase 1: Adds the “minimal kernel,” features that the modules working group felt would likely appear in any potential new ES modules implementation.
Phase 2: Fleshes out the implementation with enough functionality that it should be useful to average users as a minimum viable product.
Phase 3: Improves user experience and extends the MVP. The effort is currently in Phase 3.

ECMAScript 2018

ECMAScript 2018 was announced in June 2018.

Asynchronous Iterators

The async operator, which enumerates asynchronous stream data, operates similarly to a typical operator and uses a syntax form for — await — of. The difference between an async operator and a normal operator is that it returns of Promise object.

async function test() {  
    // Regular Iterator
    for (const i of list) ...

    // Async Iterator
    for await (const i of asyncList) ...
}

If you are dealing with asynchronous call streams, you can create an async operator factory.

// example from: https://jakearchibald.com/2017/async-iterators-and-generators/
async function* asyncRandomNumbers() {
    const url = "https://www.random.org/integers/?num=1&min=1&max=100&col=1&base=10&format=plain&rnd=new";

   while (true) {
        const response = await fetch(url);
        const text = await response.text();
        yield Number(text);
    }
}

(async function() {
    let i = 0;

    for await (const number of asyncRandomNumbers()) {
        console.log(++i, "=>", number);
        if (i === 10) break;
    }
})();

// 1 "=>" 65
// 2 "=>" 62
// ...

Object Rest/Spread Properties

Like Rest parameter and Spread operator spec from ECMAScript 2015, this proposal introduces object destructuring assignment and spread properties for object literals.

// Rest property
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };  
x; // 1  
y; // 2  
z; // { a: 3, b: 4 }

// Spread property
let n = { x, y, ...z };  
n; // { x: 1, y: 2, a: 3, b: 4 }

The drop of Template Literal syntactic restrictions
The template literal removed restrictions on the use of escape sequences (see “Template Literal Revision”).

A tagged template literal is a function to receive the template and return a modified string. The string passed to the function can be one of the following types:

Cooked: Escape sequence are interpreted
Raw: Escape sequences are normal text. The non-interpreted value in the template string are processed by the String.raw() method.

function tagFunc(str, substs) {  
    return str;
}

const result = tagFunc`\u{4B}`;  
result;  // ["K"]  
result.raw; // ["\u{4B}"]

Previously, if the template had some sequences of characters after backslash, it was treated as illegal and no raw string was returned.

\u: Unicode (e.g. \u004B)
\x: Hex (e.g. \x4B)
\positive: octal (e.g. \141)

ECMAScript 2018 eliminates all of the syntactic restriction related to escape sequences and returns the string in raw form. In this case, the interpreted value returns undefined.

const result = tagFunc`\131`;  
result;  // [undefined]  
result.raw; // ["\131"]

Checkout “ES2018: Template Literal Revision” for more information about the problems and solutions in the template literal.

Promise.prototype.finally

Like the finally syntax of the try...catch statement, this proposal introduces the similarity usage for Promise object.

The finally syntax is the block of code that is executed unconditionally at the end, regardless of the processing state of the Promise object(‘resolve’ or ‘reject’). Once a Promise object is called, this code block will be performed regardless of the result.

let isLoading = true;
fetch("https://www.random.org/integers/?num=1&min=1&max=100&col=1&base=10&format=plain&rnd=new")  
.then(function(res) {
    if(res) {
        return res.text();
    }
    throw new TypeError("Error");
})
.then(function(text) { /* Success */ })
.catch(function(error) { /* Error */ })
.finally(function() {
    // will be performed regardless success or error
    isLoading = false;
});

Checkout more details from MDN’s Promise.prototype.finally documentation.

Regular Expression

Has been added several regular expression proposals.

s (dotAll) flag for regular expressions

The dot(.) matches all characters, but not against for \r nor \n. To solve this problem, introduces the new flag s.

// previous
/./test("a");  // true
/./.test("\n");  // false
// dotAll flag
/./s.test("\n");  // true

RegExp named capture groups

Provides the ability to name a capture group. The(?<name>pattern), will let adds the <name> to the capture group pattern, and then uses the name as a reference the capture.

const rx = /(?<year>[0-9]{4})-(?<month>[0-9]{2})/;  
const match = rx.exec('2018-03');  
match.groups.year; // 2018  
match.groups.month; // 03

RegExp Lookbehind Assertions

In regular expressions, the values of a particular pattern are followed (lookahed) or not followed(negative lookaheds) by a string.
This proposal, by contrast, provides the ability to look for particular pattern to get ahead(lookbehind) or not get ahead(negative lookbehind) of.

// positive lookahead
/aa(?=bb)/.test("aabb"); // true
// negative lookahead
/aa(?!bb)/.test("aac");  // true
// positive lookbehind
/(?<=aa)bb/.test("aabb");  // true
// negative lookbehind
/(?<!=aa)bb/.test("bbbb");  // true

RegExp Unicode Property Escapes

Unicode property escapes are a new type of escape sequence available in regular expressions that have the u flag set.

/^\p{White_Space}+$/u.test('\t \n\r');  // true /^\p{Script=Greek}+$/u.test('μετά');  // true

ECMAScript 2019

ECMAScript 2019 is in the Candidate Draft state. As seeing the previous release dates, the final release is expected to be announced around June 2019.

Array.prototype.flat() / Array.prototype.flatMap()

The Array.prototype.flat() method and the Array.prototype.flatMap() method recursively find sub-array elements to a specified depth and creates a new array concatenated into it.

// Array.prototype.flat
[1, 2, [3, 4]].flat();  // [1, 2, 3, 4]
[1, 2, [3, 4, [5, 6]]].flat(1);  // [1, 2, 3, 4, [5, 6]]
// Array.prototype.flatMap
[1, 2, 3, 4].map(x => [x * 2]);  // [[2], [4], [6], [8]]
[1, 2, 3, 4].flatMap(x => [x * 2]);  // [2, 4, 6, 8]

Short story about naming .flat():

The initial proposed name was “.flatten()”. But, MoTools(widely used legacy library), was already offering a similar functionality under the same name ‘array.prototype.flatten()’. If the name “.flaten()” is accepted as is, it is likely having issue for all those websites that uses MoTools.

To avoid the possibility of conflict, .flatten() was renamed to .flat().

1) The name of ‘.smoosh()’ was one of the candidates.

2) Also some suggested change the behavior of MoTools’ flatten() to work as ECMAScript 2019 (see “Update Array.prototype.flaten to match TC39 proposal”). But, this can make stop working many no longer updated websites, like Tom Dale tweeted(who participated Ember and SproutCore development).

Object.fromEntries()

Object.fromEntries(), transforms a list of key-value pairs into an object.

const entries = new Map([  
    ['foo', 'bar'],
    ['baz', 42]
]);

Object.fromEntries(entries);  // { foo: "bar", baz: 42 }

String.prototype.trimStart() / .trimEnd()

Removes whitespace from the beginning (String.prototype.trimStart() — aliased ‘.trimLeft()’) or from the end(String.prototype.trimEnd() — aliased ‘.trimRight()’) of a string.

const greeting = "   Hello world!   ";

greeting.trimStart();  // "Hello world!   "  
greeting.trimEnd();  // "   Hello world!"

Symbol.prototype.description property

Symbol.prototype.description property returns an optional read-only description of Symbol objects.

// will return 'Test Description'
Symbol("Test Description").description;

Optional catch binding

Optional catch binding proposal, is to allow parameters to be omitted if parameters are not used in the catch syntax in the try...catch statement.

// Traditional way
try { ··· } catch(e) { ··· }

// Optional catch binding
// if don't need the use of parameter, it can be omitted
try { ··· } catch { ··· }

Array.prototype.sort() stability

Array.prototype.sort() method used a unstable quicksort algorithm, when sorting arrays with more than 10 elements. To ensure that the array is aligned correctly, ECMAScript 2019 uses the Timsort algorithm for the Array.prototype.short().

This specification currently works well with all JavaScript engines. However, Microsoft Edge with ChakraCore generates a sort error with array containing 512+ elements.

The below screenshot illustrates the stability test results on Edge and Firefox. As you can see Edge is failing.

Stability test result: (Left) Microsoft Edge 17.17134 / (Right) Firefox 66.0.2

Checkout more detailed discussion from: “Array#sort stability”.

Well-formed JSON.stringify

RFC 8259 specifies JSON text to be encoded as UTF-8 format, for JSON object data exchange. But when JSON.stringify() is used, some UTF-16 codes (characters from 0xD800 to 0xDFFFF, which are classified as ‘surrogate’) aren’t encoded in UTF-8.

The ECMAScript 2019, returns an escape sequence instead of returning an invalid Unicode string, as shown(Edge) in the following illustration.

For more details checkout the proposal documentation.

Subsume JSON

ECMAScript claims JSON as a subset in [JSON.parse](https://tc39.github.io/ecma262/#sec-json.parse), but this is not true because JSON strings can contain unescaped U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR characters.

This proposal suggests ECMA-262 can be extended to allow these characters to not not break the JSON to be subset of ECMAScript.

// if ECMA is superset of JSON, these must be true
eval('"\u2028"') === "\u2028"  // true  
eval('"\u2029"') === "\u2029"  // true

For more details checkout the proposal doc: Subsume JSON (a.k.a. JSON ⊂ ECMAScript)

Function.prototype.toString revision

From the definition in ECMAScript 2016, the result of Function.prototype.toString() can vary depend the engines. ECMAScript 2019 ensures to return the original code as it was defined (see “Function.prototype.toString revision”).

When returning code defined in a function, ECMAScript 2019 uses the following algorithm to return code string defined in a function:

Line breaks: \r\n(Windows) or \n(macOS) all returns as Unix-style \n.
Built-in function: All codes (mainly built-in functions) not defined via ECMAScript, will return as [native code].

isNaN.toString();  // "function isNaN() { [native code] }"

Functions created dynamically via Function and GeneratorFunction:
Engines must create the appropriate source code and attach it to the functions.
In all other cases:
throw a TypeError.

Checkout more details from: ES proposal: Function.prototype.toString revision

ECMAScript 2020

As of March 1, 2019, TC39 repo master branch was updated to point next ECMAScript 2020. (see the commit log).

At this point, finished proposals(Stage 4) for ECMAScript 2020, are String.prototype.matchAll() and import() only, but as times goes these list will include more items.

The String.prototype.matchAll() method works similarly as the String.prototype.match(). The former returns an iterator that contains the matched string and details of match, when it used with the g(global)/y(sticky) flag.

const str = "test1test2";  
const rx = /t(e)(st(\d?))/g;

str.match(rx);  // ["test1", "test2"]

for (const match of str.matchAll(rx)) {  
    // 1: ["test1", "e", "st1", "1", index: 0, input: "test1test2"]
    // 2: ["test2", "e", "st2", "2", index: 5, input: "test1test2"]
    match;
}

Some new or incomplete proposals

Let’s take a look at some interesting proposals were not in the final stage yet.

globalThis

Typically to access the top-level object is through the ‘window’ object in a browser environment.

As of the expansion of execution environment, the way to access top-level object also been changed.

In a Node.js environment, top-level object is accessed through the ‘global’ objects.
From the HTML5 specification, there are ‘Window’ and ‘WindowProxy’ for this, whereas ECMAScript 2015 specification, both objects are treated same way to access top-level object.

Checkout “Inner and outer windows” for the differences between Window and WindowProxy object.

The below code is the simplest way to get the reference of the top-level objects(the “global”) regardless of the environment. But this approach causes Content Security Policy (CSP) violation in Chrome apps. (see “es6-shim Breaks Chrome App CSP”).

var global = Function('return this')();

The well-know ES6 compatibility shims library, ES6 shim, use below function to get the global object and this is the common and best way at this moment.

// https://github.com/paulmillr/es6-shim/blob/003ee5d15ec1b05ae2ad5ddad3c02fcf8c266e2c/es6-shim.js#L176
var getGlobal = function () {  
    /* global self, window, global */
    // the only reliable means to get the global object is
    // `Function('return this')()`
    // However, this causes CSP violations in Chrome apps.
    if (typeof self !== 'undefined') { return self; }
    if (typeof window !== 'undefined') { return window; }
    if (typeof global !== 'undefined') { return global; }
    throw new Error('unable to locate global object');
};

The new proposal ‘globalThis’ is to provide the way to access top-level and get rid the discomfort depending the environment. Currently is staying at ‘Stage 3’. Not finalized yet, but in Chrome 71 and Firefox 65, and Node.js 12, globalThis objects can be used as follows:

globalThis.setTimeout;  // window.setTimeout

About the ‘globalThis’ name:

Similar as the ‘Array.prototype.flat()’ case, the first proposed name was “global”. But the use of this name, reported breaking flickr.com, which let to change the name to ‘globalThis’.

Class field declarations

The use of class field declarations are available starting with Babel 7.1.0 (released September 17, 2018). However, this proposal isn’t reached final stage yet, staying ‘Stage 3’ at this moment.

This proposal introduces declarative syntax for class variables in a more intuitive and easier way.

Initialization

To initialize instance variable is through the constructor.

class MyClass {  
    constructor() {
        this.x = 1;
        this.y = 2;
    }
}

With the class field, the instance variables can be defined as the //Initializer part of the following code and the initialization area runs before the constructor runs.

class MyClass {  
    // Initializer
    x = 1;
    y = 2;
    log = console.log("Initializer");

    constructor() {
        console.log("Constructor:", this.x, this.y);
    }
}

new MyClass();  
// Initializer
// Constructor: 1 2

private declaration

At the time where JavaScript wasn’t providing the way to declare ‘private’, many developers used underscore(‘_’) as prefix as a convention. But this wasn’t making realistically to work as private(well, there is a way to actually make the variable or method work as private).

function MyClass() {  
    this._x = 1;
    this._y = 2;
}

MyClass.prototype.getX = function() {  
    return this._x;
}

The private declarator uses the number symbol(#) as a prefix to explicitly declare that it is a private. Variables or methods starting with ‘#’ can only be accessed within class blocks.

class MyClass {  
    #foo; // private field
    constructor(foo) {
        this.#foo = foo;
    }
    incFoo() {
        this.#foo++;
    }
}

Declaration and access

The following is a simple example of declaring and accessing class fields in various forms.

class MyClass {  
    A = 1;  // (a) instance field
    static B = 2;  // (b) static class field
    #C = 3;  // (c) private field

    getPrivate() {
        return this.#C;
    }
}

new MyClass().A;  // 1
MyClass.B;  // 2
new MyClass().getPrivate();  // 3

Checkout the ES proposal: class fields for more details.

Built-in Module

The current ‘Stage 1’ built-in module specification is same as ESM. The difference of the normal ESM is that these are “built-in” and distributed with the browser itself.

Built-in module, is not directly exposed to global. Only available through the import syntax. If the browser has support on built-in module, these modules are imported with the “std:” prefix + module name, as shown in the following example. In this example, loads KV Storage Module.

import {storage, StorageArea} from "std:kv-storage";

The KV Storage Module and Import maps proposal is closely linked to the build-in module specification. These two are not part of ECMAScript specification and they’re belongs to the WICG(Web Incubator Community Group).

KV Storage Module

Chrome 74, adds the first built-in module, KV Storage. KV Storage solved performance issue that localStorage had, and inheriting the benefits of simple APIs.

In Chrome 74, KV Storage can be enabled with the chrome://flags/#enable-experimental-web-platform-features flag.
See KV Storage demos from “Built-in Modules Demo” page.

KV Storage has similar APIs as the Map object. Strings and serializable data types can be used as key value. It returns a Promise or Async iterators, which are treated asynchronously.

The two named exports are “storage” and “StorageArea”.

storage: Is an instance of the StorageArea class with the name default(the default storage database is ‘kv-storage:default’).
StorageArea: Is provided for cases where additional isolation is needed (e.g. a third-party library that stores data and wants to avoid conflicts with data stored via the default storage instance). StorageArea data is stored in an IndexedDB database with the name kv-storage:${name}, where name is the name of the StorageArea instance.

import {storage} from "std:kv-storage";

const main = async () => {  
  const oldPreferences = await storage.get("preferences");

  document.querySelector("form")
    .addEventListener("submit", async () => {
       const newPreferences = Object.assign({}, oldPreferences, {
         // Updated preferences go here...
       });

       await storage.set("preferences", newPreferences);
  });
};
main();

Import maps

Import maps proposal allows control over what URLs get fetched by JavaScript import statements and import() expressions, and allows this mapping to be reused in non-import contexts.

Import maps provide Polyfill and fallback for built-in modules, enabling them to map currently unavailable module identifiers to URLs(see “Import Maps v0.5 Implementation Design Doc”).

For example, KV Storage, a built-in module, is currently available only in Chrome. In a supported browser, you can load without issue, but for those without the support, you need load polyfill of KV Storage instead.

The following example shows how to use Import maps. Define map for module and use the key URL value for import statement.

In the browsers without support, the import URL is recognized and processed as a normal import URL. If has supports, they will flow according to the mapping information.

<!-- The import map is inlined into your page -->  
<script type="importmap">  
{
  "imports": {
    "/path/to/kv-storage-polyfill.mjs": [
       "std:kv-storage",  // if has native support
       "/path/to/kv-storage-polyfill.mjs" // otherwise load polyfill
    ]
  }
}
</script>
<!-- Then any module scripts with import statements use the above map -->  
<script type="module">  
  import {storage} from '/path/to/kv-storage-polyfill.mjs';
// Use `storage` ...
</script>

Closing

JavaScript is still making steady changes. It is proving that it wasn’t a coincidence being the most popular language for many years. The coverage of new ECMAScript releases for browsers and Node.js is also constantly increasing, and even for some proposals before its completions.

Checkout “ECMAScript compatibility table” for the coverage.
The version of Node.js that supports the ECMAScript specification is as follows (see “Node.js ES2015/ES6, ES2016 and ES2017 support”).
- ES2017: v9.11.2
- ES2018: v10.3.0
- ES2019: v12.0.0
Continued development through transparent and robust standardization process makes JavaScript reliable and strong.

Let’s journey continues for all!.