billboard.js 1.6.0 released today!
--
Happy to announce the new release of the billboard.js!
This release includes biggest changes since its creation, with the 10 new features. Also 19 bug fixes which is making more stable than ever.
For the detailed release note, checkout: https://github.com/naver/billboard.js/releases/tag/1.6.0
What’s New?
Themes
One of the benefits of SVG based chart is the ability and flexibility on styling via CSS.
To take this advantage, we’re introducing the new ‘theme’ feature. This is an initiative to provide easy way on chart design styling.
You don’t need to do any extra work. Just load different CSS theme file provided, and boom! You’ll get totally different look of your chart instantly.
Let’s check how this is looks like.
The first screenshot is when you’re applying the default css file. And the second is when you’re using ‘insight’ theme. Can you notice the differences?
The use of theme is really simple. Just load the desired theme css file.
- Default theme: https://naver.github.io/billboard.js/release/latest/dist/billboard.css
- Insight theme: https://naver.github.io/billboard.js/release/latest/dist/theme/insight.css
There’re plans on adding more different themes in the future. If you want add your own? Don’t hesitate sending us PR :)
bar.radius
Normally, bars corners are interpreted as square. With the new ‘bar.radius’ option, you can give some changes on that.
Demo: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarRadius
Simply indicate the radius value and the bar corners will turn to be rounded.
bar: {
radius: {
ratio: 0.5
}
}Zoom by dragging
This is the wonderful contribution by @lorgan3, which gives a great usability on zooming.
Drag the zoom area right from the chart area, and you’ll get zoomed chart. Very intuitive and simple approach on zoom interaction.
Demo: https://naver.github.io/billboard.js/demo/#Interaction.DragZoom
In addition of the traditional way, mouse wheel, just indicate zoom type as “drag”. And to facilitate for unzoom, it will be displaying the reset button, which you can customize also if you want.
zoom: {
enabled: {
type: "drag" // or 'wheel' (default value)
},
// control 'reset button' display
resetButton: true,
// customize reset button's text value
resetButton: {
text: "unzoom"
}
}Dasharray for regions
With the new dasharray option, you’re able to style differently regions of same data series.
As you can notice from the screenshot below, there’re two different regions for the ‘data1’ series.
Demo: https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions
Applying is really simple. Just indicates the dashed array style for each region.
regions: {
data1: [
{
start: 1,
end: 2,
style: {
// The first number specifies a distance for the filled area, and the second a distance for the unfilled area
dasharray: "6 2"
}
},
...
]
}line.point
To control data points showing, point.show option could be used. But the limitation was, you can turn on/off entire data points not allowing to control specific data series only.
Aside of programmatic solution, there’s way on doing that by defining CSS rule.
.bb-circles-data2 circle {
visibility: hidden;
}
To give more freedom on display control, @lorgan3 contributed an excellent solution. With the new ‘line.point’ option, you can indicate which data series will have data points.
Demo: https://naver.github.io/billboard.js/demo/#LineChartOptions.LinePoint
line: {
// indicate, what data will be showing points
point: ["data1", "data3"]
},radar.direction.clockwise
The ‘radar’ type was introduced from the last release. As being new implementation, it wasn’t reflecting all user necessities sufficiently.
The new ‘radar.direction.clockwise’ is one of the new option to fulfill that. You can control the direction of the radar data to be drawn.
Demo: https://naver.github.io/billboard.js/demo/#Chart.RadarChart
radar: {
direction: {
clockwise: true
}
}Enhancement on custom data point
Custom data point was introduced from v1.2.0. This feature was giving a lots of usability differentiating data series.
Previously it was only accepting a single node for the data point definition. Is obvious having limitation on defining custom data points with single node.
"<polygon points='2.5 0 0 5 5 5'></polygon>"To break this limitation, it is allowed defined grouped node with child nodes within. The example below, is the combination of <circle> and <rect> elements together.
Demo: https://naver.github.io/billboard.js/demo/#Point.CustomPointsGrouped
"<g><circle cx='10' cy='10' r='10'></circle><rect x='5' y='5' width='10' height='10' style='fill:#fff'></rect></g>"
From this enhancement, you’re able define more complex data point.
point: {
pattern: [
...
"<polygon points='2.5 0 0 5 5 5'></polygon>",
"<g><circle cx='10' cy='10' r='10'></circle><rect x='5' y='5' width='10' height='10' style='fill:#fff'></rect></g>"
]
}Multiline for gauge label text
Multilining is a tedious job, as lack of SVG support on efficient way.
To facilitate these, billboard.js was adding the support of multiline text values using ‘\n’ character in different options.
In addition with that, added the new multiline support for gauge’s text label.
From the label.format callback function, return the value with the ‘\n’ character where line break should be happen.
gauge: {
label: {
format: function(value) {
return value +"%\nTest\nValue";
}
}
}Exposing primary node elements
If you’re old billboard.js user, there’re situations to manipulate chart elements directly.
In many cases, you do a direct selection or via undocumented private property ‘chart.internal’.
The use of private properties aren’t recommended in any situations, but the use of direct access on elements are needed.
From this release, we’re introducing new ‘$’ property. It’s providing easy way to access primary elements within chart and they’re wrapped as d3 selection.
So, you can take the advantage of d3’s selection API directly.
const chart = bb.generate(...);chart.$;// main element '<g transform="translate(50.5, 4.5)">'
// wrapped with d3
chart.$.main;
The new .config() API
This is another enhancement on private property usecase. To approach the configuration option value, there was no option for that.
So, accessing the private property ‘chart.internal.config’ was used for those are needed.
To break that, introducing the new ‘.config()’ method. The basic usage on this is getting the configuration value, and also you can change if you need.
Note: Changing configuration option doesn’t guaranteeing reflecting the option spontaneously. The correct and guaranteed way is from the generation.
const chart = bb.generate({
data: {
columns: [
["data", 91.4]
],
type: "gauge"
},
gauge: {
max: 1000
}
});chart.config("data.type"); // will return 'gauge'
And what is the usecase for this? For example, you generated a gauge chart having some max value and later then want to update max value with different number.
Let’s check how this works in action. You can notice the gauge max value and the percentage is updating.
Demo: https://naver.github.io/billboard.js/demo/#API.UpdateConfig
setTimeout(() => {
// update gauge.max to 100, and redraw with changed option
chart.config("gauge.max", 100, true);
}, 1000);With the last parameter, you can make to redraw to reflect updated option value. But as quoted earlier, not every options are guaranteed to be reflected.
Closing
The mission of billboard.js is to provide a better and easy way for data visualization for the web.
To fulfill this mission, your feedback and attention are absolutely necessary. So, do not hesitate to approach us, and tell us what is your opinion. Any kind of contribution are welcoming. :)
Stay well, and see you on next release!
