billboard.js 3.4 release: new polar chart! | by Jae Sung Park | Mar, 2022

0
60
billboard.js 3.4 release: new polar chart! | by Jae Sung Park | Mar, 2022


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

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

polar type in action
data: {
columns: [
["data1", 60],
["data2", 120],
["data3", 75]
],
type: "polar"
},
// Customizable options for polar type
polar: {
label: {
format: function(value, ratio, id) {
return `${value}\n(${(ratio * 100).toFixed(0)}%)`;
},
ratio: 1.07
},
level: {
depth: 5,
max: 150,
text: {
backgroundColor: "yellow"
}
}
}
Dynamically update axes min/max value and reset
chart.axis.min({
x: false,
y: false,
y2: false
});

// shorthand
chart.axis.min(-100); // will set min of y/y2 as -100
chart.axis.min(false); // will unset min of y/y2

chart.axis.max({
x: false,
y: false,
y2: false
});

// shorthand
chart.axis.max(1000); // will set max of y/y2 as 1000
chart.axis.max(false); // will unset max of y/y2

chart.axis.range({
min: {
x: false,
y: false,
y2: false
},
max: {
x: false,
y: false,
y2: false
},
});

// shorthand
chart.axis.range({
// shorthand, which sets min of y/y2 as -100, max of y/y2 as 10000
min: -100,
max: 10000,

// shorthand, which unset min & max of y/y2
min: false,
max: false
});

onclick handler triggered from the user click interaction
bb.generate({
...,
// will be called when chart area
// (somewhere of entire svg element) is clicked
onclick: function(event) {
this; // chart instance itself
event; // native event object
}
});
GitLens: Visual File History



Source link

Leave a reply

Please enter your comment!
Please enter your name here