.png)
5 hours ago
2
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.
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.
Here’s the benchmark in action and can check duration time measured on console log.
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!
