This is a migrated thread and some comments may be shown as answers.

Overlay Property for Donut Chart

6 Answers 186 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Cameron
Top achievements
Rank 1
Cameron asked on 22 Feb 2016, 04:16 PM

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) #")
    )
)

 

6 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 24 Feb 2016, 09:44 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Lucas
Top achievements
Rank 1
answered on 06 Apr 2017, 09:00 PM

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")
                    //)


                    )

0
Viktor Tachev
Telerik team
answered on 10 Apr 2017, 02:33 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lucas
Top achievements
Rank 1
answered on 10 Apr 2017, 02:39 PM
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?
0
Viktor Tachev
Telerik team
answered on 12 Apr 2017, 07:53 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
ITsolution
Top achievements
Rank 1
Iron
answered on 27 Jul 2021, 12:49 PM

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
Telerik team
commented on 29 Jul 2021, 06:50 AM

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
Tags
Chart
Asked by
Cameron
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Lucas
Top achievements
Rank 1
Viktor Tachev
Telerik team
ITsolution
Top achievements
Rank 1
Iron
Share this question
or