html - Making a pie chart bigger without affecting the doughnut chart

Question

I am making a pie chart and doughnut chart using canvasjs.

I have the pie chart inside a doughnut chart. I am not that good when it comes to CSS. Here the pie chart is at the center, but still it is very small. I don't know how to make it bigger as it is messing up the pie chart if I am attempt to make it bigger.

Is there any way the pie chart can be made bigger so there would not be much space between pie chart and the doughnut chart.

I am posting a picture of my result here.

I am using these properties:

for doughnut

 width="100%" height="250px" top="0px" position="absolute" backgroundColor="transparent" uniqueID ="doughnut"

for pie chart

width="78px" height="100px" top="75px" position="absolute" left="560px"  backgroundColor="transparent" uniqueID=”pie”

EDIT : If I increase height and width of pie chart which results in -

Why white space is coming when I have set background color to transparent??

This is my pie chart properties-

                   type: "pie",
                   backgroundColor: "transparent",
                   indexLabelFontColor: "white",
                   indexLabelFontSize: "14px",
                   markerType: "circle",
                   radius : "100%",
                   innerRadius :"200px",

I want something like this-

Answer 1

You are probably getting smaller pie chart because of the height and the width of the container. Since, the height and the width of container is used by CanvasJS charts in order to determine the height of chart.

width="78px" height="100px" top="75px" position="absolute" left="560px"  backgroundColor="transparent" uniqueID=”pie”

Try varying height and width in above given statement to see the changes and obtain proper size of pie chart as per your requirement.
You should also vary top and left in proportion to height and width of the container containing pie chart.