We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Pie graph wasting a lot of space

This is the code I'm using to initiate my pie chart
pieGraph.ejChart(
        {
            series: [{
                points: [{ x: 'Campaign 1', y: 13, text: '13% - Campaign 1', interior: 'rgb(4,57,91)' },
                        { x: 'Campaign 2', y: 25, text: '25% - Campaign 2', interior: 'rgb(3,97,167)' },
                        { x: 'Campaign 3', y: 12, text: '12% - Campaign 3', interior: 'rgb(0,134,187)' },
                        { x: 'Campaign 4', y: 7, text: '7% - Campaign 4', interior: 'rgb(59,187,237)' },
                        { x: 'Campaign 5', y: 10, text: '10% - Campaign 5', interior: 'rgb(130,205,237)' },
                        { x: 'Campaign 6', y: 14, text: '14% - Campaign 6', interior: 'rgb(193,227,239)' },
                        { x: 'Campaign 7', y: 10, text: '10% - Campaign 7', interior: 'rgb(179,222,202)' },
                        { x: 'Campaign 8', y: 10, text: '10% - Campaign 8', interior: 'rgb(113,198,167)' }
                ],
                labelPosition: 'outside',
                marker: { textOffset: 40 },
                name: 'pie', type: 'pie', explode: true,
                pieOptions: { text: { font: { size: '12px'} } }
            }],
            pointRegionClick: function (sender) {
                alert(sender.Data.Region.Region.PointIndex);
            },
            size: { height: scrollH },
            legend: { visible: false }
});

Now scrollH in this instance is 480
And with this, the graph renders like this
https://www.dropbox.com/s/0bz57e235tz9n25/question_9_1_pie.jpg

As you can see from firebug, the rect is indeed 480px
in height, and 759px in width.
https://www.dropbox.com/s/5auxu0b3yvh9flg/question_9_2_pie.jpg

But the graph seems to render exactly at the center.
with a height of 275px, and a width of 446px.
https://www.dropbox.com/s/5auxu0b3yvh9flg/question_9_2_pie.jpg

How do I prevent this, and make the graph use up the entire width and height
This is a waste of useful space ?, the graph is too small.



2 Replies

PR Pradeep October 8, 2013 05:20 AM UTC

Ok so I added this into my code :
margin: { top: 0, bottom: 0, left: 0, right: 0 },
size: { height: scrollH },
legend: { visible: false }

It's better but the rect is 759x480 ( as before )
and graph is  still 518x344, how do I close out the
remaining space!!?



GS Gowrimathi S Syncfusion Team October 14, 2013 09:24 AM UTC

Hi Pradeep,

Thanks for sharing detail with us.

We have tested the reported issues based on the data you have given. We are able to reproduce the issue. We have fixed the issue and this fix will be included in version 1 of JS Essential studio release.

Please let us know, if you have any further assistance.

Thanks

Gowri

 


Loader.
Live Chat Icon For mobile
Up arrow icon