Highcharts donut ring coloring only selective part

Question

I have created a highcharts ring using donut visualization. The jsfiddle is here Now, I want to color 25% of the grey arc with same blue color as that of other 2 arcs. How can I do that ?

The code that would essentially need to be changed is here :

data: [{
                name: 'fire',
                x: "Firefox",
                y: 33,
                color: 'grey'
            }

Answer 1

Edited with more information from OP.

To do this you can use the color.linearGradient approach. See this example .

{
            name: 'Browsers',
            data: [{
                name: 'fire',
                x: "Firefox",
                y: 33,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0
                    },
                    stops: [
                        [0, 'rgb(124, 181, 236)'],
                        [0.25, 'rgb(124, 181, 236)'],
                        [0.50, 'gray'],
                        [0.75, 'gray'],
                        [1, 'gray']
                    ]
                }
            }

I am setting the linearGradient and removing the usual x2 and y2 as to me this looks better. Notice that it is still kind of fuzzy, however. You can play around with these settings to figure out what works best for your use case.

Old answer: If you just want it to have the same color as the other 2 items do:

data: [{
                name: 'fire',
                x: "Firefox",
                y: 33,
                color: 'rgb(124, 181, 236)'
            }

The question is not very clear but this is how you would statically set it.