javascript - Using KendoUI Pie Chart, How do you remove white space? - Stack Overflow

admin管理员组

文章数量:1323715

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.

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.

• javascript
• jquery
• asp
• telerik
• kendo-ui

Share Improve this question Follow edited Apr 16, 2012 at 18:37 Rodney Hickman asked Apr 13, 2012 at 21:36 Rodney HickmanRodney Hickman 3,1331111 gold badges5555 silver badges8383 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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>

本文标签： javascriptUsing KendoUI Pie ChartHow do you remove white spaceStack Overflow