Hilmi
Posts: 9
Joined: Fri Jul 15, 2022 10:06 am

Colour a data series using multiple radial gradient

Hi team,

In Highcharts Maps, I am able to set the colour a state using radial gradient.

Code: Select all

	
series: [{
  name: 'State',	
  data:[{
    color: {
      radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 },
      stops: [
        [0, this.series[0].chart.colorAxis[0].toColor(45)],
        [1, 'rgb(200,200,200)']
      ]
    }
  }]
}]

In CSS, I can configure multiple gradient colour for a single element as in the CSS code below. Is it possible to use multiple radial gradient to colour a state or a data series in Highcharts Maps?

Code: Select all

/* CSS code for multiple radial gradient */
background-image: 
  radial-gradient(circle at top right, red, black 20%, transparent 40%),
  radial-gradient(circle at bottom left, yellow, orange 20%, transparent 40%);
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Colour a data series using multiple radial gradient

Hello Hilmi!
Welcome to our forum and thanks for contacting us with your question!

Highcharts charts are built as SVG elements. Unfortunately, SVG doesn't support multiple paint servers on one element. You have to need to use multiple elements, in our case you have to use two same series with different radial gradients - just like in the demo below.

Demo: http://jsfiddle.net/BlackLabel/5ra4ot8b/

Let me know if you have any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
Hilmi
Posts: 9
Joined: Fri Jul 15, 2022 10:06 am

Re: Colour a data series using multiple radial gradient

Hi Hubert Kozik,

After implementing what you shown in the demo, it works well in my project and I can now have two different colors in my radial gradient.

Thank you very much.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Colour a data series using multiple radial gradient

Hilmi, that's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”