Making A Pie Chart Bigger Without Affecting The Doughnut Chart

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 cente

Solution 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.

Solution 2:

Try using this layout:

<divclass="parent"><divclass="doughnut"></div><divclass="pie"></div></div>

And apply this CSS:

.parent {
  position: relative;
}

.doughnut, .pie {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Solution 3:

I am able to figure out how to do this-

I am using these property

#parent {
  position: relative;
}

#doughnutContainer, #pieContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
#doughnutContainer {
  width:800px;
  height:250px;
}
#pieContainer {
  transform: translate(-50%, 28%);
  width:200px; 
  height:160px;
}