Simple pie chart & doughnut chart with SVG + CSS

You can draw a simple pie chart & doughnut chart with SVG + CSS. This is quite simple and straight forward. But the limitation is that it is able to show 2 sections only.

To change the value of the section, look for stroke-dasharray and change the first value.

.pie2 {

        fill: yellow;

        stroke: green;

        /* max=50 (radius x 2) */

        stroke-width: 50;

        /* 158 = (radius x 2) x 3.142 = 25 x 2 x 3.142 */

        stroke-dasharray: 40 158;

    }

    .chart2 {

        background-color: yellow;

        border-radius: 50%;

        -webkit-transform: rotate(-90deg);

                transform: rotate(-90deg);

    }

    <svg width="100" height="100" class="chart2">    

        <circle r="25" cx="50" cy="50" class="pie2"/>  

    </svg>

To draw a doughnut chart,  

    .doghnut {

        fill: yellow;

        stroke: green;

        stroke-width: 20;

        stroke-dasharray: 180 251;

    }

    .doghnut_chart {

        background-color: yellow;

        border-radius: 50%;

        -webkit-transform: rotate(-90deg);

                transform: rotate(-90deg);

    }

    <svg width="100" height="100" class="doghnut_chart">    

        <circle r="40" cx="50" cy="50" class="doghnut"/>  

    </svg>