billboard.js 1.2.0 release!

New Features

Bubble Type Chart
bb.generate({
data: {
columns: [
["data1", 30, 350, 200, 380]
],
type: "bubble"
}
});
bubble: {
maxR: 50
}
Data area filled with different patterns
The usage is simple, but you need to create own pattern type. If you don’t know about svg’s pattern, check the link below.
- https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial/Patterns
color: {
pattern: ["red", "blue", "cyan"],
tiles: function() {
var pattern = d3.select(document.createElementNS(d3.namespaces.svg, "pattern"))
.attr("patternUnits", "userSpaceOnUse")
.attr("width", "6")
.attr("height", "6");
var g = pattern
.append("g")
.attr("fill-rule", "evenodd")
.attr("stroke-width", 1)
.append("g")
.attr("fill", "rgb(255, 127, 14)");
g.append("polygon").attr("points", "5 0 6 0 0 6 0 5");
g.append("polygon").attr("points", "6 5 6 6 5 6");
// Should return an array of SVGPatternElement
return [
pattern.node()
];
}
}
‘rectangle’ data point
bb.generate({
data: {
columns: [
['data1', 100, 200, 1000, 900, 500],
['data2', 20, 40, 500, 300, 200]
]
},
point: {
type: "rectangle"
}
});
user defined ‘triangle’ data point shape
point: {
pattern: [
"<polygon points='2.5 0 0 5 5 5'></polygon>"
]
}

Bear in mind:
This is an ‘experimental’ feature and can have some unexpected behaviors in different occasions. This will be stabilized in the future release :)

chart.generate(...);chart.export();
// --> "data:image/svg+xml;base64,PHN..."
// Initialize the download automatically
chart.export("image/png", dataUrl => {
const link = document.createElement("a");
link.download = `${Date.now()}.png`;
link.href = dataUrl;
link.innerHTML = "Download chart as image";
document.body.appendChild(link);
});
line: {
classes: [
'line-class-data1',
'line-class-data2'
]
}
class applied directly to line path element

We’re growing

Closing

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store