Use of LinearGradient as Fill Color in drawing shapes

[Mike]

I'd like to be able to use a linear gradient as a fill color when generate shapes.  However, the TypeScript definition of color in FillOptions is limited to string.  How can I go about solving this? 

 

const gradient = new LinearGradient({
        name: "LG1",
        stops: [
            new GradientStop({
                color: "gray",
                offset: 0,
                opacity: 0
            }),
            new GradientStop({
                offset: 0.5,
                color: "orange",
                opacity: 0.8
            })]
    });

            const geometry = new GeomRectangle([currentStartPoint, 0], [segmentLength, stackedBarWidth]);
            const rect = new Rect(geometry, {
                stroke: { color: "black", width: 1 },
                fill: { color: disp.color, opacity: 1 }
            });

[Dimiter Topalov]

Hi Mike,

Gradients can indeed be passed as shapes fill options, but we have erroneously documented the GradientStop as a class while it is an interface, and an attempt to create new instances from it via a constructor call will result in an error. Here is an example of using the gradient to fill both a Path, and an Rect:

https://plnkr.co/edit/f6TWdimoz6SNHxpqGKXd?p=preview

I hope this helps, and please accept my apologies for any inconvenience the issue in our documentation have caused. We will make sure to update it as soon as possible.

Regards,
Dimiter Topalov
Progress Telerik