Using KendoUI Pie Chart, How do you remove white space?

Question

I'm using the KendoUI pie chart and I have a lot off white space. What is the best way to remove it. See the image below:

My java script looks like this:

<div id="divGraph1" style="width:250px; height:250px;"/>

jQuery("#divGraph1").kendoChart({ 
     legend:{ 
          position: "bottom", 
          padding: 1, 
          margin: 1 
     }, 
     seriesDefaults:{ 
          labels:{ 
               visible: true, 
               template: "#= kendo.format('{0:P}', percentage)#" 
          }, 
          visible: true 
     }, 
     tooltip:{ 
          visible: true, 
          template: "#= category # - #= kendo.format('{0:P}', percentage)#" 
     }, 
     seriesColors: [ 
          "#004990", "#da7633", "#8a7967", "#8b0f04", "#ead766", "#676200", "78496a"
     ], 
     title: { 
          padding: 1, 
          margin: 1 
     }, 
     chartArea: { margin: 1 }, 
     plotArea: { margin: 1 }, 
     series:[{ 
          type: "pie", 
          data: [
               { category: "Facilities in IDN", value: 3 },
               { category: "Standalone Facilities", value: 4 }
           ] 
      }]
 });

Any Suggestions would be Greatly Appreciated.

Answer 1

Can you provide the width of the container element? I can provide a more exact answer with that.

From your image, I'm showing it's about 475px wide. There is a height configuration option available you can use to shrink it down to size. It takes an integer (in pixels).

jQuery("#divGraph1").kendoChart({ 
 legend:{ 
      position: "bottom", 
      padding: 1, 
      margin: 1 
 }, 
 seriesDefaults:{ 
      labels:{ 
           visible: true, 
           template: "#= kendo.format('{0:P}', percentage)#" 
      }, 
      visible: true 
 }, 
 tooltip:{ 
      visible: true, 
      template: "#= category # - #= kendo.format('{0:P}', percentage)#" 
 }, 
 seriesColors: [ 
      "#004990", "#da7633", "#8a7967", "#8b0f04", "#ead766", "#676200", "78496a"
 ], 
 title: { 
      padding: 1, 
      margin: 1 
 }, 
 chartArea: {
      margin: 1,
      height:300 /* add this option */
 }, 
 plotArea: { margin: 1 }, 
 series:[{ 
      type: "pie", 
      data: [
           { category: "Facilities in IDN", value: 3 },
           { category: "Standalone Facilities", value: 4 }
       ] 
  }]
});

If you don't like passing layout information in options (I don't!), Kendo will inherit the CSS from the div you're using to hold the chart. The following HTML would constrain the chart to 475x300.

<div id='divGraph1' style='width:475px;height300px'></div>