I would like to do something like this but I don't know how.

I have an idea but it doesn't work.

<div id="stats">
    <div id="men" class="circle"></div>
    <div id="women" class="circle"></div>
    <div id="white-circle" class="small-circle"></div>
</div>

<style>
#stats {
    width: 100px;
    height: 100px;
    background: white;
    position: relative;
}

.circle {
    border-radius: 100px;
    background: #CCC;
    width: 100px;
    height: 100px;
    position: absolute;
}

.circle#men {
   background: #27ae60; 
}

.circle#women {
   background: #f26646; 
}

.small-circle {
    border-radius: 100px;
    background: white;
    width: 65px;
    height: 65px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}
</style>

I would like to do something like this but I don't know how.

I have an idea but it doesn't work.

<div id="stats">
    <div id="men" class="circle"></div>
    <div id="women" class="circle"></div>
    <div id="white-circle" class="small-circle"></div>
</div>

<style>
#stats {
    width: 100px;
    height: 100px;
    background: white;
    position: relative;
}

.circle {
    border-radius: 100px;
    background: #CCC;
    width: 100px;
    height: 100px;
    position: absolute;
}

.circle#men {
   background: #27ae60; 
}

.circle#women {
   background: #f26646; 
}

.small-circle {
    border-radius: 100px;
    background: white;
    width: 65px;
    height: 65px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}
</style>

• javascript
• html
• css
• statistics

• if you want to do it by your self, you will have to use SVG (generate it with javascript), but there are alot of good chart libraries for javascript out there, you just have to search a bit – x4rf41 Commented Aug 13, 2013 at 8:05
• I provided a plete implementation in my answer, in case you're not fortable writing one in SVG. – AP. Commented Mar 14, 2017 at 17:04

4 Answers 4

It is actually called as donut chart. It will be difficult for you to just use a div tag. Instead use canvas or just use a javascript framework for charting. Here are few examples.

<canvas></canvas>

1. Example1
2. Example2
3. Example3
4. Example4

markup

<canvas width="500px" height="250px"></canvas>

javascript

$(document).ready(function() {

    var context = $("canvas")[0].getContext("2d");

        var values = '24,43,43,45';
        var segments = values.split(",");
        var segmentColor = 50;
        var total = 0;

        //Reset the canvas
        context.restore();
        context.save();
        context.clearRect(0,0,500,250);

        for (i=0;i<segments.length;i++) {
            total = total + parseFloat(segments[i]);
        }

        var parts = 360/total;
        var startAngle=0

        context.translate(100,100)
        context.rotate(270*(Math.PI/180)); //Turn the chart around so the segments start from 12 o'clock

        for (i=0;i<segments.length;i++) {

            //Draw the segments
            context.fillStyle ="rgb(" + segmentColor + "," + segmentColor + "," + segmentColor + ")";
            context.beginPath();
            context.moveTo(0,0);
            context.arc(0,0,100,startAngle*(Math.PI/180),(startAngle + parseFloat(segments[i]*parts))*(Math.PI/180),false);
            context.lineTo(0,0);
            context.closePath();
            context.fill();

            startAngle = startAngle + parseFloat(segments[i]*parts);
            segmentColor = segmentColor + 20;   
        }

            //Turn into a donut!!                   
            context.fillStyle = "White";
            context.beginPath();
            context.arc(0,0,60,0,Math.PI*2,false);
            context.closePath();
            context.fill();                 


});

Notice: var values = '24,43,43,45'; // This will basicall divide the circle into 4 parts Demo: http://jsfiddle/Zgfb6/

One method would be to just use a chart framework which supports donut charts like d3js.

Examples made with d3js:

• http://bl.ocks/mbostock/3887193
• http://bl.ocks/mbostock/3888852
• http://www.visualizing/visualizations/uk-olympic-sentiment-analysis

Here's how to make circles in css:

If you know how to make square in css you only need to add border-radius: 100% in css. That will convert a square into circle. Here is some more code which to address your question:

<html>
    <head>
        <title> Disappering Circles </title>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <div id="red"></div>
        <div id="blue"></div>
        <div id="yellow"></div>
        <script type="text/javascript"></script>
    </body>
</html>

Here is the CSS:

#red {
    width: 100px;
    height: 100px;
    background-color: red;
    display: inline-block;
    border-radius: 100%
}
#blue{
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
}
#yellow{
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block;
}

You could also use Highcharts, and more specifically highcharts-chart (web-ponent of Highcharts) to get a chart like this:

Implementation:

chart.data = [{
  name: 'Clients',
  size: "100%",
  innerSize: "60%",
  showInLegend: true,
  dataLabels: {enabled: false},
  data: [
    {name: "Men", y: 2258, color: '#20ad61'},
    {name: "Women", y: 5023, color: '#f26645'},
  ],
}]

chart.legendOptions = {
  enabled: true,
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'middle',
  labelFormatter: function() {return Math.round(this.y/7281*100)+"% "+this.name},
}

chart.chartOptions = {spacingLeft: 0,}

chart.highchartOptions = {
  title: {
    verticalAlign: 'middle',
    y: -2
  },
  subtitle: {
    verticalAlign: 'middle'
  },
}

#chart {
  width: 23em;
  height: 10em
}

#chart .highcharts-point {rx: initial; ry: initial}

<base href="https://user-content-dot-custom-elements.appspot./avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/">
<link rel="import" href="highcharts-chart.html">

<highcharts-chart id='chart' title='<b>7,281</b>' subtitle='CLIENTS' type="pie" title="" label="Gender" legend height-responsive></highcharts-chart>

Note: Click Run Code Snippet to see the chart.