Question on how to add lines for 3D effects in the bar chart

[HyukCheolShin]

Description

There was a request to express the 3D effect by adding a line to the right of the bar chart.
I couldn't find an option on the Billboard chart, so I made it as below.

I wonder if it is a function that is supported on the Billboard chart, and if not, I hope you will add it.

Steps to check or reproduce

https://jsfiddle.net/s0215/o54wrx3k/

[watnab]

#397 looks like this a bit.

[HyukCheolShin]

#397 looks like this a bit.
The customer wants both Gradient and 3D effect. T-T
#1337 Gradient has already received help here.

[watnab]

The customer wants both Gradient and 3D effect. T-T

I could not find the right way.

The svg element has a defs element.
The defs element can have linearGradient elements and pattern elements.
The pattern element can use linearGradient element if the pattern knows the id of the gradient.

After rendering, I modified the defs element manually.

[HyukCheolShin]

Thank you, watnab.

I did make what I wanted.
But to do this, I had to make it using setTimeout.
I want to apply this easily and use it together.
That's why I'm asking here.

https://jsfiddle.net/s0215/u3okj2vL/

[watnab]

https://jsfiddle.net/t9rpgnLs/4/

The id of the elements returned from tiles function will be modified.
However the id of children of the elements (linearGradient or pattern) will be preserved.

It will be easy if the library preserves the id.

[HyukCheolShin]

https://jsfiddle.net/t9rpgnLs/4/

The id of the elements returned from tiles function will be modified.
However the id of children of the elements (linearGradient or pattern) will be preserved.

It will be easy if the library preserves the id.

When there was only one data group, you applied Gradient to each data similar to your method.
I think I can make it easier if I use your example.
Thank you very much.

[watnab]

https://jsfiddle.net/t9rpgnLs/4/

setTimeout can be replaced with onrendered.

---

It will be easy if the library preserves the id.

billboard.js/src/internals/color.js

Lines 92 to 100 in c9906e1

	const tiles = config.color_tiles();
	// Add background color to patterns
	const colorizedPatterns = pattern.map((p, index) => {
	const color = p.replace(/[#\(\)\s,]/g, "");
	const id = `${$$.datetimeId}-pattern-${color}-${index}`;
	return colorizePattern(tiles[index % tiles.length], p, id);
	});

Suggestion:

const allTiles = config.color_tiles(); 
const tiles = allTiles.filter(node => ! node.id); //ignore node if it has id.
const colorizedPatterns = pattern.map((p, index) => { 
	const color = p.replace(/[#\(\)\s,]/g, ""); 
	const id = `${$$.datetimeId}-pattern-${color}-${index}`; 
	return colorizePattern(tiles[index % tiles.length], p, id); 
});
allTiles.forEach((node, index) => { //append node if it has id.
	const color = "red"; //dummy
	if (node.id) colorizedPatterns.push( colorizePattern(node, color, node.id) );
});

[watnab]

I could not find the right way.

Suggestion:
I think it can be good that the library has the way to preserve(ignore) tile(gradient) having id rather than to add right border.
It will make defining tile pattern depending on gradient(other elements) easier.

The reason why the library overwrites id of tile(gradient) may be that the number of color patterns can be greater than the number of tiles.
It can be that the gradient (having id) should be used to define tile, not color pettern.

https://github.com/naver/billboard.js/wiki/Migration-Guide-to-v2

Migration Guide to v2
All callback-ish options' context has been updated to bound to the current chart instance by default.

this(chart).internal.datetimeId may work if tiles function is bound to chart though.

[watnab]

Suggestion:
I think it can be good that the library has the way

The way already exists to preserve(ignore) tile(gradient) having id.

#225
It seems the tile pattern can use the gradient (having id) defined in other svg.
https://jsfiddle.net/b5pz8vfa/1/

[watnab]

I will withdraw my suggestion to preserve tile having id.
It seems this issue can be closed because the way exists to define tile pattern having right border (and depending on gradient in other svg).