thng17
Posts: 1
Joined: Tue Sep 28, 2021 12:01 pm

multiple gradient in a donut chart

Hello,

and I want to use a donut-chart with gradient for darkmode. For that I need 8 linear gradients with each 5 stops. In each stops are diffrent opaccity. Here an example https://codepen.io/thng17/pen/vYZvQMG.
I was searching for a solution but don't find someting that works. For the stop problem, was a solution with Highcharts.Color(...).setOpacity(), but there was an Error that said that the typeof Color is not callable.
I was searching for that Problem but didn't find a solution for it. Also how can appply more than one linear gradient in one categories?

Side Note: I'm using Angular and Typscript

Thats what I codeing before:

Code: Select all

 series: [
    {
      type: 'pie',
      name: 'VG',
      data: [
        {
          name: 'Example',
          y: 15,
          color:{
            linearGradient: {x1: 123, y1: 0, x2: 123, y2: 1 },
            stops: [
              [0, Highcharts.Color('#adced3').setOpacity(0.7)],
              [0.359375, Highcharts.Color('#ADCED3').setOpacity(0.4)],
              [0.6, Highcharts.Color('#ADCED3').setOpacity(0.33)],
              [0.8, Highcharts.Color('#ADCED3').setOpacity(0.4)],
              [0, Highcharts.Color('#ADCED3').setOpacity(0.7)],
            ]
          }
        },
        {
          name: 'Exampl2',
          y: 20,
          color: "var(--color-donut-chart2)"
        },
        {
          name: 'Example3',
          y: 25,
          color: "var(--color-donut-chart3)"
        },
      ],
      showInLegend: true,
    }
Thank you for your help.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: multiple gradient in a donut chart

Hello thng17,

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

The error was caused by incorrect data type passed to stops array. You passed Highcharts Color object, while you should have passed color string. The fix is easy though, all you have to do is use get() method on Highcharts color object to get color in specified format (string in this case).
Demo: https://jsfiddle.net/BlackLabel/v1ga4dre/
API reference:https://api.highcharts.com/class-refere ... olor#Color,
https://api.highcharts.com/class-refere ... .Color#get

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”