Overlay Property for Donut Chart

6 posts, 0 answers
  1. Cameron
    Cameron avatar
    2 posts
    Member since:
    May 2015

    Posted 22 Feb 2016 Link to this post

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

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 24 Feb 2016 Link to this post

    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!
     
  3. Lucas
    Lucas avatar
    2 posts
    Member since:
    Jan 2015

    Posted 06 Apr in reply to Iliana Nikolova Link to this post

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


                        )

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1786 posts

    Posted 10 Apr Link to this post

    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.
  5. Lucas
    Lucas avatar
    2 posts
    Member since:
    Jan 2015

    Posted 10 Apr in reply to Viktor Tachev Link to this post

    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?
  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1786 posts

    Posted 12 Apr Link to this post

    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.
Back to Top