cancel
Showing results for
Did you mean:

# Area Chart - Gradient-Fill (Linear/Radial) Area

Sisense Team Member

When creating an area chart you'd sometimes want to use a gradient-fill the area of the chart (linear or radial)

### Linear-Gradient Fill (Top-to-Bottom)

Apply the following widget script:

function hexToRgbA(hex,opacity){
var c;
if (opacity < 0 || opacity > 1) throw new Error('Bad Opacity');
if (!(/^#([A-Fa-f0-9]{3}){1,2}\$/.test(hex))) throw new Error('Bad Hex');

c = hex.substring(1).split('');
if (c.length== 3){ c= [c[0], c[0], c[1], c[1], c[2], c[2]]; }
c = '0x'+c.join('');
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + opacity + ')';
}

widget.on('processresult', function(widget,result) {

for (let i = 0 ; i < seriesCount ; i++) {

result.result.series[i].fillColor = {
linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
]
}
}
})
 Before After

### Linear-Gradient Fill (Side-to-Side)

Apply the following widget script:

function hexToRgbA(hex,opacity){
var c;
if (opacity < 0 || opacity > 1) throw new Error('Bad Opacity');
if (!(/^#([A-Fa-f0-9]{3}){1,2}\$/.test(hex))) throw new Error('Bad Hex');

c = hex.substring(1).split('');
if (c.length== 3) { c= [c[0], c[0], c[1], c[1], c[2], c[2]]; }
c = '0x'+c.join('');
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + opacity + ')';
}

widget.on('processresult', function(widget,result) {

for (let i = 0 ; i < seriesCount ; i++) {

result.result.series[i].fillColor = {
linearGradient: { x1: 1-i%2, y1: 0, x2: i%2, y2: 0 },
stops: [
]
}
}
})
 Before After

Apply the following widget script:

function hexToRgbA(hex,opacity) {
var c;
if (opacity < 0 || opacity > 1) throw new Error('Bad Opacity');
if (!(/^#([A-Fa-f0-9]{3}){1,2}\$/.test(hex))) throw new Error('Bad Hex');

c = hex.substring(1).split('');
if (c.length== 3){ c= [c[0], c[0], c[1], c[1], c[2], c[2]]; }
c = '0x'+c.join('');
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + opacity + ')';
}

widget.on('processresult', function(widget,result) {

for (let i = 0 ; i < seriesCount ; i++) {

result.result.series[i].fillColor = {
radialGradient: {cx: 0.5, cy: 1, r: 0.7},
stops: [
]
}
}
})
 Before After
0 REPLIES 0
Community Toolbox

Recommended links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum: