Set linear gradient color for each category in single series chart

[Cherish]

I have the same data structure as the original poster here (https://www.telerik.com/forums/set-color-for-each-category-in-single-series-chart#1405418), except I need to use a linear gradient as color for each category. How do I define a linear gradient as color for each category in asp.net core? I have a ColorFrom and ColorTo (hex, string) in my data model, and this is the sample chart I am trying to create:

[Mihaela]

Hello Cherish,

The described functionality is not available out-of-the-box for the column Chart because the Chart is rendered as SVG, and each column series is rendered as a single segment in a Path. However, I would suggest the following custom solution:

@(Html.Kendo().Chart<ChartViewModel>()
                .Name("chart")
                ...
                .SeriesDefaults(seriesDefaults =>
                    seriesDefaults.Column()
                )
                .Series(series => {
                    series.Column(model => model.SeriesField1).CategoryField("CategoryName").Overlay( o => o.Gradient(ChartSeriesGradient.None));
                    series.Column(model => model.SeriesField2).CategoryField("CategoryName").Overlay( o => o.Gradient(ChartSeriesGradient.None));
                })
                .Events(ev => ev.DataBound("onDataBound")) //Handle the "DataBound" event of the Chart
)

<script>
    function onDataBound(e) {
        var chartData = e.sender.dataSource.data(); //get the Chart's data
        var options = e.sender.options;
        var series = options.series; //get the Series options

        kendo.dataviz.Gradients.series1Gradient = { // define the gradients
            type: "linear",
            stops: [{
                offset: 0,
                color: `${chartData[0].ColorFrom}`, //set the color based on the Model field "ColorFrom"
                opacity: 0.5
            }, {
                offset: 1,
                color: `${chartData[0].ColorTo}`, //set the color based on the Model field "ColorTo"
            }]
        };

        kendo.dataviz.Gradients.series2Gradient = {
            type: "linear",
            stops: [{
                offset: 0,
                color: `${chartData[1].ColorFrom}`,
                opacity: 0.5
            }, {
                offset: 1,
                color: `${chartData[1].ColorTo}`,
            }]
        };
        // override gradients for each series
        series[0].overlay.gradient = "series1Gradient";
        series[0].overlay.gradient.start = [0.5, 0];
        series[0].overlay.gradient.end = [0.5, 1];

        series[0].overlay.gradient = "series2Gradient";
        series[0].overlay.gradient.start = [0.5, 0];
        series[0].overlay.gradient.end = [0.5, 1];
    }
</script>

Also, check out similar examples in the following KBs:

https://docs.telerik.com/kendo-ui/knowledge-base/create-left-to-right-gradient-multi-color-values

https://docs.telerik.com/kendo-ui/knowledge-base/chart-area-gradient-effect

I hope these examples will help you to achieve the desired result.

 

Regards, Mihaela Progress Telerik