317
Views
3
Comments
How to Fill Column chart with gradient colour
Question

Hello ,

We have a need to fill gradient color in the column chart . Tried using the below script in the HighchartJSON property of AdvancedFormat ,however it did not help .


SyntaxEditor Code Snippet

"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')]
                ]
            }
    }
}
"



2019-09-30 07-35-56
Aurelio Junior

Hi Naga,

You can do it like this:

This assumes that you have a "DataPoints" variable in your screen whose type is "DataPoint List" and serves as the chart source.

And in the "DataPointJSON" attribute:

"
color: {
    linearGradient: {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 1
    },
    stops: [
        [0, '#ffcccc'],
        [1, '#ff0000']
    ]
}
"
2024-02-29 05-27-55
Sanju Singh Rathore

I AM ALSO FACING THE SAME ERROR IN MY PROJECT. I THINK THIS IS A BUG IN HIGH CHART OUTSYSTEMS.

https://sanju-singh.outsystemscloud.com/OrderManagement/DashboardManager

2024-02-29 05-27-55
Sanju Singh Rathore

Hi guys 

I found a solution in Json... you can use this code for border-radius and gradient charts.

"plotOptions: {

},

series: [{

            borderRadius: {

                radius: 10

            },

            color: {

                linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },

                stops: [

                    [0, 'rgb(0, 0, 255)'],

                    [1, 'rgb(200, 0, 0)']

                ]

            },   

       }]"

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.