Overlay Property for Donut Chart

[Cameron]

Good morning,

I'm currently trying to get my donut charts to look flat with a bootstrap theme through the use of the kendo widget.  I've been taking a look at your documentation and came across the following property, and was hoping that it would be as simple as adding this to the end of the series object in the mvc widget ".Overlay.Gradient("none")"

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.overlay

But to no avail, there is no such property, not according to the syntax highlighting, and it doesn't work when I try brute forcing the thing.  So I was wondering how to go about this using the syntax below.

@(Html.Kendo().Chart(Model)
    .Name("chart")
    .Title("Chart Data")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
    )
    .Series(series =>
    {
        series.Donut(
            model => model.Value,  // The data to use
            model => model.Category, // The category Name
            model => model.Color, // The color to use for the category
            null // How far out the donut section should pop out
        ).Padding(10)
        .Overlay.Gradient("none")
        ;
        //.Labels(labels => labels
        //    .Visible(true)
        //    .Position(ChartPieLabelsPosition.OutsideEnd)
        //    .Template("#= category # - #= kendo.format('{0:P}', percentage)#")
        //    .Background("transparent")
        //);
    })
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= category # - #= kendo.format('{0:P}', percentage) #")
    )
)

 

[Iliana Dyankova]

Hi Cameron,

The correct syntax for removing the gradient in Kendo UI Chart for ASP.NET MVC is as follows:

//....
.Overlay(ChartPieSeriesOverlay.None)

Regards,
Iliana Nikolova
Telerik

 

 

[Lucas]

Hello - 

This doesn't appear to be working, could you check this syntax and/or clarify? VS says that ChartPieSeriesOverlay does not exist in this context. Thanks.

 @(Html.Kendo().Chart<RemainingHours>()
                        .Name("myHoursRemainingChart")
                            .AutoBind(false)
                            .ChartArea(chartArea => chartArea
                                .Background("transparent")
                                .Height(310)
                            )
                            .DataSource(dataSource => dataSource
                                .Read(read => read.Action("MyHoursRemainingChart_Read", "TimeOff").Data("myRequestsParams"))
                            )
                            .SeriesDefaults(defaults => defaults.Donut().HoleSize(80))
                            .SeriesColors(new string[] { "#666666", "#999999", "#2199e8", "#cccccc" })
                            .Series(series =>
                            {
                                series.Donut("remainingDays", "Hours")
                                .Labels(labels => labels
                                    .Visible(true)
                                    .Position(ChartPieLabelsPosition.OutsideEnd)
                                    .Template("#= dataItem.typeName # - #= dataItem.remainingDays # days")
                                    .Background("transparent")
                                )
                                .Overlay(ChartPieSeriesOverlay.None);
                            })

                    //.Tooltip(tooltip => tooltip
                    //    .Visible(true)
                    //    .Template("#= dataItem.typeName # - #= dataItem.remainingDays # days")
                    //)


                    )

[Viktor Tachev]

Hello Lucas,

The overlay setting should be applied as expected to the chart series. Please ensure that you are using the latest version of the components and see how the behavior changes. The current release is 2017.1.223. Give it a try and let me know how it works for you.

Regards,
Viktor Tachev
Telerik by Progress

[Lucas]

Currently not working, but using 2016.3.914 and updating to 100% current is not entirely likely. According to the date of Iliana's (Feb. 2016) post, this should be working in the release we are using. Is this not the case?

[Viktor Tachev]

Hi Lucas,

I understand your point. However, I tested the behavior with the latest version of the components and the Overlay setting was working as expected on my end. Please give it a try and let me know how it works for you.

Regards,
Viktor Tachev
Telerik by Progress

[ITsolution]

Hello Lucas,

 

I know it's a little bit late but I had the same problem and found solution:

.Overlay(o => o.Gradient(ChartSeriesGradient.None)

[Anton Mironov]

Hi John,

Thank you for sharing your solution with the community.

If assistance for anything else is needed, do not hesitate to contact me and the team.

Kind Regards,
Anton Mironov