AreaChart gradient fill on mobile

Is there a way to use a linear gradient fill on an AreaChart on mobile?


On web you'd put something like this in an unescaped expression:

"<svg style='width:0;height:0;position:absolute;' aria-hidden='true' focusable='false'>
  <linearGradient id='graph-gradient' x2='1' y2='0'>
    <stop offset='0%' stop-color='#0266db' />
    <stop offset='50%' stop-color='#634bd6' />
    <stop offset='100%' stop-color='#634bd6' />
  </linearGradient>
</svg>"

And then put this on the CSS:

g.highcharts-series path:first-of-type{
    fill: url(#graph-gradient);
}


On mobile you can't use unescaped expressions and HTMLElement thinks svg isn't a valid HTML tag so we used Javascript to add those elements to the page and verified that they're present, but the graph doesn't seem to be picking this up. 

Changing the CSS to something like fill:red works so that part seems to be fine.

Can you share the JS you're using to add the elements? Perhaps it's something as simple as a mismatch in your selector?

var svg = document.createElement('svg');

svg.setAttribute('style', 'width:0;height:0;position:absolute;');

svg.setAttribute('aria-hidden', 'false');

svg.setAttribute('focusable', 'false');


var ling = document.createElement('linearGradient');

ling.setAttribute('id', 'graph-gradient');

ling.setAttribute('x2', 1);

ling.setAttribute('y2', 0);

svg.appendChild(ling);


var stop1 = document.createElement('stop');

stop1.setAttribute('offset', '0%');

stop1.setAttribute('stop-color', '#0266db');

ling.appendChild(stop1);


var stop2 = document.createElement('stop');

stop2.setAttribute('offset', '50%');

stop2.setAttribute('stop-color', '#634bd6');

ling.appendChild(stop2);


var stop3 = document.createElement('stop');

stop3.setAttribute('offset', '100%');

stop3.setAttribute('stop-color', '#634bd6');

ling.appendChild(stop3);



document.body.appendChild(svg);

Solution

You should be able to get a gradient fill for an area chart by adding the following to the HighChartsJSON property of the AdvancedFormat structure for the chart:


"
plotOptions: {
        series: {
            fillColor: {
                linearGradient: [0, 0, 0, 300],
                stops: [
                    [0, Highcharts.Color('#0266db').setOpacity(0).get('rgba')],
                    [0.5, Highcharts.Color('#634bd6').setOpacity(0.5).get('rgba')],
                    [1, Highcharts.Color('#0266db').setOpacity(1).get('rgba')]
                ]
            }
    }
}
"

You can play with the values to get the effect you want, but that should allow you to get the gradient without worrying about setting up the SVG manually.

Also, there's a Charts_HowTo sample in the Forge that may be helpful: https://www.outsystems.com/forge/component-versions/713
While it is for an older version of the charts component, it should help with how to do the formatting you're looking for.

Hope that helps!


Solution

Thanks! That's far easier than what we were trying to do.