Linear colors for signs

[karahanarif]

Is there a way to use linear colors for signs?

var settings = { COLORS_SIGNS: ["#A8274C", "#00A19B", "#828FAD", "#005FAD", "#A8274C", "#00A19B", "#828FAD", "#005FAD", "#A8274C", "#00A19B", "#828FAD", "#005FAD"] };

for example;
#A8274C00, #A8274C for #A8274C

or

#A8274C, %0

[afucher]

@karahanarif I'm not sure that I understood what you need. Can you give some link about linear colors, and the difference between what we support today?

[karahanarif]

i'm trying to achieve this visual output.

so far manage to make this after changing output html svg.

I want to make this changes via npm instead of using cheerio after creating chart. So if settings has linear-gradient or radial-gradient param for this visual and color choice for chart's own colors and icon colors settings. It will be perfect for most use cases. Creating defs will allow us to make gradient coloring.

something like this code maybe;

`const svgNamespace = 'http://www.w3.org/2000/svg';

// Create the SVG element
const svg = document.createElementNS(svgNamespace, 'svg');

// Create the element
const defs = document.createElementNS(svgNamespace, 'defs');

// Create the radial gradients and append them to the element
const gradients = [
{ id: 'A8274C-gradient', offset1: '#A8274C00', offset2: '#A8274C' },
{ id: '00A19B-gradient', offset1: '#00A19B00', offset2: '#00A19B' },
// Add more gradients here...
];

gradients.forEach((gradient) => {
const radialGradient = document.createElementNS(svgNamespace, 'radialGradient');
radialGradient.setAttribute('id', gradient.id);

const stop1 = document.createElementNS(svgNamespace, 'stop');
stop1.setAttribute('offset', '0%');
stop1.setAttribute('stop-color', gradient.offset1);

const stop2 = document.createElementNS(svgNamespace, 'stop');
stop2.setAttribute('offset', '100%');
stop2.setAttribute('stop-color', gradient.offset2);

radialGradient.appendChild(stop1);
radialGradient.appendChild(stop2);

defs.appendChild(radialGradient);
});

// Append the element to the SVG
svg.appendChild(defs);

// Add more SVG elements or properties as needed
// ...

// Finally, add the SVG to the DOM or use it as needed
document.body.appendChild(svg);
`

[afucher]

Hmm thanks for the explanation, btw this is a really beautiful chart!

I was thinking if this could be done just using CSS, but seems that SVG fill does not support gradient via CSS and need to use defs :/

I think that add some way to customize the svg by adding your own defs while building the chart will allow this, and make it easier to customize. But I'll need more time to think about API to do this, and check if it will be easy to allow config the gradient def in the sign color settings.

If you want to propose something, I will be glad to review and discuss.