Apply a Gradient to an Area Chart in KendoReact

Updated on Sep 2, 2026

Environment

Product Version	16.1.0
Product	Progress® KendoReact Chart

Description

I want to apply a vertical gradient to a KendoReact Chart area series, with blue near the line and white near the chart baseline.

This KB also answers the following questions:

• How do I apply a gradient to an area chart in KendoReact?
• How can I render a gradient fill for only one area series?
• How do I use an SVG linear gradient as a KendoReact Chart area series color?

Solution

Set the color of an area series to an SVG paint-server reference in the form url(#gradient-id). Define the matching linearGradient in a hidden SVG <defs> element.

Use a unique gradient ID for each chart instance. The following snippet defines a vertical blue-to-white gradient:

tsx

const gradientId = React.useId().replace(/:/g, '');

<svg aria-hidden="true" width="0" height="0" style={{ position: 'absolute' }}>
    <defs>
        <linearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#3171f4" stopOpacity="0.5" />
            <stop offset="55%" stopColor="#3171f4" stopOpacity="0.16" />
            <stop offset="100%" stopColor="#3171f4" stopOpacity="0" />
        </linearGradient>
    </defs>
</svg>

Apply the gradient and set the area boundary line color:

tsx

<ChartSeriesItem
    type="area"
    data={data}
    color={`url(#${gradientId})`}
    line={{ color: '#3171f4', width: 2 }}
    markers={{ visible: false }}
/>

Do not use overlay={{ gradient: 'glass' }} for this scenario. The glass overlay does not support area series or custom gradient stops.

The following example renders an Area Chart with a vertical blue-to-white gradient:

Example

View Source

Loading ...

See Also

• Area Charts
• ChartSeriesItem API