Changing Pie chart proportions using jChartFX

1.2k views Asked by At

any ideas how to change the chart proportions relative to its parent chart div?

Currently it looks like this

enter image description here

... and it should look something like this enter image description here

The code used as a base for this example can be found here

http://support.softwarefx.com/jChartFX/article/2501235#27182674-0690-e211-84a5-0019b9e6b500


HTML

<!DOCTYPE html>
<html>
<head>
   <title>Customized Tooltips</title>
   <link rel="stylesheet" type="text/css" href="http://www.jchartfx.com/libs/v7/current/styles/jchartfx.css"/>
   <link rel="stylesheet" type="text/css" href="sample.css"/>

   <script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
   <script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
   <script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector3d.js"></script>
   <script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script>
   <script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.animation.js"></script>
   <script type="text/javascript" src="sample.js"></script>

</head>
<body>
    <div id="ChartDiv1" style="width:550px;height:400px;display:inline-block"></div>
</body>
</html>



  var chart1;

  function onLoadDoc() {
        chart1 = new cfx.Chart();
        chart1.setGallery(cfx.Gallery.Pie);
        chart1.getAnimations().getLoad().setEnabled(true);
        var pie = chart1.getGalleryAttributes();
        pie.setExplodingMode(cfx.ExplodingMode.First);

        chart1.getView3D().setEnabled(true);
        chart1.getLegendBox().setVisible(true);

        //...
    }
1

There are 1 answers

0
Dan On

You can use the margin properties:

chart1.getPlotAreaMargin().setTop(0);
chart1.getPlotAreaMargin().setBottom(0);
chart1.getPlotAreaMargin().setRight(0);
chart1.getPlotAreaMargin().setLeft(0);