Highcharts, how to use gradient without setting a color?

Question

I'm looking to set a gradient color for my graph area's where the color goes from it's "default" color to white/transparent.

I'm working how can I "Choose" not set a value and let it auto decide the area color.

This is what my code is producting now: image of my graph now

(I'm looking to match the fill color to the "outline" color that's auto set)

Code that's being used to set this "yellow-ish color" right now

        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, "#ffff00"],
          [
            1,
            Highcharts.color("#DADADA")
              .setOpacity(0)
              .get("rgba")
          ]
        ]
      },

user_8951377 · Answer

You can use getOptions method to get the default color and set it in this way:

series: [{
  ...,
  fillColor: {
    linearGradient: {
      x1: 0,
      y1: 0,
      x2: 0,
      y2: 1
    },
    stops: [
      [0, Highcharts.getOptions().colors[0]],
      [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
    ]
  }
}, ...]

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4910/

API Reference: https://api.highcharts.com/class-reference/Highcharts#.getOptions

Highcharts, how to use gradient without setting a color?

1 Answers