billboard.js
billboard.js copied to clipboard
Gradient fills in barchart
Are gradient fills possible in barcharts? Something like the following mockup?
or
I have been grappling with code (based on code I found online to do something similar), something like the following...
oninit: function () {
d3.select('svg').append("linearGradient")
.attr("id", "svgGradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0).attr("y1", 0)
.attr("x2", 0).attr("y2", 100)
.selectAll("stop")
.data([
{ offset: "0%", color: "red", opacity: 1},
{ offset: "100%", color: "blue", opacity: 1 }
])
.enter().append("stop")
.attr("offset", function (d) { return d.offset; })
.attr("stop-color", function (d) { return d.color; })
.attr("stop-opacity", function (d) { return d.opacity; });
}
where I would insert the gradient and subsequently use 'svgGradient' as a colour but I can't get it to fill the bars accordingly. Is it possible to have gradient fills in Billboard.js? Thanks
It needs to check on that. Did you tried color.tiles
option?
- https://naver.github.io/billboard.js/demo/#ChartOptions.ColorTiles2
The first image looks like https://naver.github.io/billboard.js/demo/#ChartOptions.ColorTiles3 . However it seems there is a trick in the example to separate positive and negative areas.
Gradient fills in barchart separate positive and negative areas.
There seems to be a way to separate positive and negative areas with gradient fill when chart type is bar
.
https://jsfiddle.net/xLuw6b4e/
https://naver.github.io/billboard.js/release/latest/doc/Options.html#.data%25E2%2580%25A4color
it must return a string that represents color (e.g. '#00ff00').
It seems returned value can be reference to gradient in other svg (e.g. 'url(#idOfGradient)').
However this way will not work when chart type is area
because returned value will be used for not area but data point.
However this issue can be closed because there is a way to gradient fill (separete areas) in barchart.
there is a trick in the example
It may possibly be that gradientTransform
can adjust position of gradient though.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/gradientTransform