Solid Gauge with linear gradient

Hi,


I need to display a solid gauge with a dial and a linear gradient.


The dial is done but still didn't had success with the gradient.


I'm checking the Highcharts documentation but didn't find any solution yet.


Any ideas?


Thanks.

Hi Pedro,

This may be of interest. Not that if it doesn't work in OS, it may be a version problem (OS uses a pretty old version of Highcharts).


Solution

Hi Pedro,

I also had this issue.

Try using this code below on your Y-axis inside the advanced format init.

It will fill your gauge from red to green.


"plotBands: [{

            from: 0,

            to: 100,

            visible: true,

            color: {

                linearGradient: [0, 0, 300, 0],

                stops: [

                    [0.2, '#c7002b'], // green

                    [0.55, '#fdff00'], // yellow

                    [0.99, '#03a100'] // red

                ]

            },

            innerRadius: '70%',

            outerRadius: '100%'

        }]"


Regards,

Silvia Sendim

Solution

Kilian Hekhuis wrote:

Hi Pedro,

This may be of interest. Not that if it doesn't work in OS, it may be a version problem (OS uses a pretty old version of Highcharts).


Hi Kilian,

Thanks for the help!

I'm using OS 10 and importing the library Highcharts-more.js.

However, still not able to work with the stops.

Regards,
Pedro


Sílvia Sendim wrote:

Hi Pedro,

I also had this issue.

Try using this code below on your Y-axis inside the advanced format init.

It will fill your gauge from red to green.


"plotBands: [{

            from: 0,

            to: 100,

            visible: true,

            color: {

                linearGradient: [0, 0, 300, 0],

                stops: [

                    [0.2, '#c7002b'], // green

                    [0.55, '#fdff00'], // yellow

                    [0.99, '#03a100'] // red

                ]

            },

            innerRadius: '70%',

            outerRadius: '100%'

        }]"


Regards,

Silvia Sendim

Hi Silvia,


It is exactly what I needed!!

Thank you so much!

Regards,
Pedro