Gradient color for area fill on time series chart

Ignition
1

I am trying to build a time series chart that has a similar look and feel to a tool our customer is already familiar with. They have a fill area under the line on a time series chart but it has a gradient effect. Is this possible in perspective?

2

The Perspective charts are based on AM Charts. Check their documentation for what you want.
https://www.amcharts.com/docs/v4/concepts/colors/

If you find what you want you may need assistance in adding it to the right property so report back.

3

The Standard Gradients section from that link you sent seems appropriate for what I'm trying to do. It says the fill property can accept a gradient object so I'm trying to apply that to the fill properties of the normal/highlighted/selected groups under defaultStyles. I'm not sure if that's the right place but it doesn't appear to work as I'd expect.

{
  "stroke": {
    "color": "#FFFF00",
    "width": 3,
    "opacity": 0.8,
    "dashArray": 0
  },
  "fill": {
    "type": "LinearGradient",
    "stops": [
      {
        "color": "#FFFF00"
      },
      {
        "color": "#000000"
      }
    ]
  }
}
4

I have had issues in the past with gradients in styles.

Below is my working fill property, this was working on an element in an SVG, but is CSS using some deprecated tricks from CSS2.

The real issue is that the AM charts are generating the gradient using the methods in JS or Typescript, which generates a URL link to the gradient that is defined in the section of the SVG. There is limited support for inline definition of SVG gradients.

              "fill": { 
                "opacity": 1,
                "paint": { 
                  "type": "linear",
                  "x1": 0,
                  "y1": 100,
                  "x2": 0,
                  "y2": 100,
                  "gradientUnits": "userSpaceOnUse",
                  "stops": [
                    { 
                      "offset": 0,
                      "style": { 
                        "stopColor": "#0b0b0b"
                      } 
                    } ,
                    { 
                      "offset": 0.45,
                      "style": { 
                        "stopColor": "#c0c0c0"
                      } 
                    } ,
                    { 
                      "offset": 2,
                      "style": { 
                        "stopColor": "#000000"
                      } 
                    } 
                  ]
                } 
              }