• Home
• Rotapie
• Responsive pie chart

Responsive pie chart

You can create a fully responsive animated pie chart by setting some properties to percentages of the pie charts' container width, i.e. '50%' or '20%'. The properties maxRadius, minRadius, maxInnerRadius, minInnerRadius, maxFontSize, minFontSize and fontYOffset can be set to a percentage string. Try resizing the browser window to see the effect. The code to generate this pie chart is shown below the chart.

<script>
$(function(){
   $('#pie').rotapie({
      slices: [
         { color: '#ffbb89', percentage: 10 },
         { color: '#ff6e04', percentage: 23 },
         { color: '#d575f9', percentage: 5 },
         { color: '#8000b0', percentage: 38 },
         { color: '#91bb00', percentage: 24 }
      ],
      maxRadius: '50%',
      minRadius: '47%',
      maxInnerRadius: '35%',
      minInnerRadius: '30%',
      maxFontSize: '20%',
      minFontSize: '10%'
   });
});
</script>