Gradient fills in barchart

[flipcode1973]

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

[netil]

It needs to check on that. Did you tried color.tiles option?

• https://naver.github.io/billboard.js/demo/#ChartOptions.ColorTiles2

[watnab]

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.

[watnab]

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.

[watnab]

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