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

Overlay Property for Donut Chart

6 Answers 675 Views

Chart

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

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

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

)

Anton Mironov

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