CODEWITHSUNDEEP
c#razorkendo-ui
AstroSharp
AstroSharp

Reputation: 1902

Controlling size of KENDO UI Donut Chart

I am having difficulties controlling the size of Donut component in Kendo-UI (Here). Here is my code:

   <div class="analytic-block">
    <h4>Sources</h4>
        <span class="text-muted">Recent activity</span>

     @(Html.Kendo()
          .Chart<ActivityModel>()
          .Name("donutChart")
          .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
          .DataSource(ds => ds
                              .Read(read => read.Action("Sources", "Statistics"))
                              .Group(group => group.Add(item => item.SliceLayer))
                              .Sort(sort => sort.Add(item => Guid.NewGuid().ToString())))
          .Series(series =>
          {
              series.Donut(model => model.Share, model => model.Label, model => model.Color, model => true, mode => true)
                    .Border(b =>
                    {
                        b.Color("white");
                        b.Width(2);
                    })
                    .StartAngle(0)
                    .Labels(labels => labels.Visible(true)
                                            .Position(ChartPieLabelsPosition.OutsideEnd)
                                            .Template(" #=dataItem.Label #")//.Template("<span style=\"color:#=dataItem.Color#;\">  #=dataItem.Label # </span>")
                                            .Background("transparent")
                                            .Border(1, "grey", ChartDashType.Solid)
                                            .Padding(2))
              .Padding(120);
          })
          .Tooltip(tooltip => tooltip
                                     .Template("  #=dataItem.Label # ")
                                     .Visible(true)))
</div>

and here is the result it produces:

image with unwanted white gaps

I am able to adjust the size of the chart by changing .Padding(120) but this leaves two large spaces just above and below the chart. I could not find any reference on how to manipulate the size of the area to draw this chart on.

If anyone could suggest a solution, that would be greatly appreciated.

Upvotes: 2

Views: 6292

Answers (2)

AstroSharp
AstroSharp

Reputation: 1902

I found my mistake. The div-container must be related to the chart ID:

<div id="donutChart" class="analytic-block">

 @(Html.Kendo()
      .Chart<ActivityModel>()
      .Name("donutChart")
</div>

Upvotes: 4

Petur Subev
Petur Subev

Reputation: 20213

You should simply set width/height to the div chart element that you turn into a chart.

Here is an example.

Upvotes: 3

Related Questions