CODEWITHSUNDEEP
c#asp.net-mvcrazorkendo-uikendo-chart
Yuu
Yuu

Reputation: 619

How to apply flat color in Kendo Charts using Razor

I'm having a problem in applying flat color in Kendo Charts. I know how to apply it when using javascript

<script>
$("#PieChartFund").kendoChart({
    series: [{
        type: "pie",
        overlay: {
            gradient: "sharpBevel"
        }
    }]
});
</script>

But I'm using Razor and I want to use that flat one.

@(Html.Kendo().Chart(Model)
    .Name("PieChartFund")
    .Title(title => title
          .Text("Fund")
          .Position(ChartTitlePosition.Top))
    .Legend(legend => legend
        .Visible(true)
        .Position(ChartLegendPosition.Bottom)
    )
    .Series(series =>
    {
        series.Pie(m => m.SourceOfFundsAmount, m => m.LegendSourceOfFunds).Labels(labels => labels
            .Template("#= category #: \n #=kendo.toString(value, 'c2')# ")
            .Background("transparent")
            .Visible(true)

            .Align(ChartPieLabelsAlign.Circle)
        ).Tooltip(tooltip => tooltip.Template("<div> #=kendo.toString(category)# : #=kendo.toString(value, 'c2')#  </div>").Visible(true)).StartAngle(100);
    })
    .DataSource(source => source.Read(read => read.Action("SourceOfFunds", "DashBoard")))
)

Default FlatColor

The current style I'm using right now (LEFT) The new style I want to apply (RIGHT)

Upvotes: 0

Views: 643

Answers (1)

Jonathan
Jonathan

Reputation: 113

In between your .Visible(true) and .Align(ChartPieLabelsAlign.Circle) put this in:

.Overlay(ChartPieSeriesOverlay.None)

I hope this helps,

Jon

Upvotes: 3

Related Questions