Css Only Pie Chart - How to Add Spacing/Padding Between Slices

CSS Only Pie Chart - How to add spacing/padding between slices?

First I would recreate this with less of code relying on clip-path like below:

.palette {  height: 200px;  width: 200px;  position:relative;  overflow:hidden;}.palette > * {  position:absolute;  top:0;  left:0;  right:0;  bottom:0;  border:50px solid var(--c,red);  border-radius:50%;  clip-path:polygon(50% 50%, 50% 0%, 100% 0%,100% 33.745%); }.color1 {  transform:rotate(72deg);  --c:blue;}.color2 {  transform:rotate(144deg);  --c:orange;}.color3 {  transform:rotate(-72deg);  --c:green;}.color4 {  transform:rotate(-144deg);  --c:purple;}

<div class="palette">  <div class="color1"></div>  <div class="color2"></div>  <div class="color3"></div>  <div class="color4"></div>  <div class="color5"></div></div>

How to create a donut ring with 4 equal segment in css?

You can achieve it with this:
skewY is actually not needed.

        document.getElementById('top').onclick = function() {
            document.getElementById("top").style.backgroundColor = "red";
        };

        document.getElementById('bottom').onclick = function() {
            document.getElementById("bottom").style.backgroundColor = "red";
        };

        document.getElementById('right').onclick = function() {
            document.getElementById("right").style.backgroundColor = "red";
        };
        document.getElementById('left').onclick = function() {
            document.getElementById("left").style.backgroundColor = "red";
        };

        document.getElementById('center').onclick = function() {
            document.getElementById("center").style.backgroundColor = "red";
        };

            .container {
                width: 200px;
                height: 200px;
            }

            .pie {
                position: relative;
                margin: 1em auto;
                border: 4px solid black;
                padding: 0;
                width: 15em;
                height: 15em;
                border-radius: 50%;
                list-style: none;
                overflow: hidden;
            }

            .slice {
                overflow: hidden;
                position: absolute;
                top: 0;
                right: 0;
                width: 50%;
                height: 50%;
                transform-origin: 0% 100%;
                border: 2px solid black;
                box-sizing: border-box;
            
            }

            .slice-contents {
                position: absolute;
                left: -100%;
                width: 200%;
                height: 200%;
                border-radius: 50%;
            }

            .slice:nth-child(1) {
                transform: rotate(-45deg) scale(1.2);
            }

            .slice:nth-child(1) .slice-contents {
                transform: skewY(-30deg); /* unskew slice contents */
                background: white;
            }

            .slice:nth-child(2) {
                transform: rotate(45deg) scale(1.2);
            }

            .slice:nth-child(2) .slice-contents {
                transform: skewY(-30deg); /* unskew slice contents */
                background: white;
            }

            .slice:nth-child(3) {
                transform: rotate(135deg) scale(1.2);
            }

            .slice:nth-child(3) .slice-contents {
                transform: skewY(-30deg); /* unskew slice contents */
                background: white;
            }

            .slice:nth-child(4) {
                transform: rotate(225deg) scale(1.2);
            }

            .slice:nth-child(4) .slice-contents {
                transform: skewY(-30deg); /* unskew slice contents */
                background: white;
            }

            .inner-pie {
                position: absolute;
                width: 7em;
                height: 7em;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                border: 4px solid black;
                background: white;
            }

            #top, #bottom, #left, #right, #center { 
                cursor: pointer 
            }

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <div class="container">
            <ul class='pie'>
                <li class='slice'>
                <div id="top" class='slice-contents'>click 1</button>
                </li>
                <li class='slice'>
                <div id="right" class='slice-contents'>click 2</button>
                </li>
                <li class='slice'>
                <div id="left" class='slice-contents'>click 3</button>
                </li>
                <li class='slice'>
                    <div id="bottom" class='slice-contents'>click 4</button>
                </li>
                <li id="center" class='inner-pie'>
                </li>
            </ul>
        </div>    
    </body> 
</html>

How to make a doughnut segment using only CSS

I would go with some linear/radial-gradient like this:

.box {
  width:200px;
  height:200px;
  border-radius:50%;
  background:
   linear-gradient(-30deg, white 50%,transparent 50.5%),
   linear-gradient(30deg,  white 50%,transparent 50.5%),
   radial-gradient(farthest-side at center,transparent 40%,blue 41%);
}

<div class="box">

</div>

Want create this graph using css and html

I'd suggest redrawing the circles in an <SVG>. Adjust the stroke-width, stroke-dasharray, and stroke-dashoffset as necessary.

body {  background-color: darkturquoise;}svg {  width: 200px;  height: 200px;}circle {  fill: none;  stroke-linecap: butt;  transform: rotate(-86deg);  transform-origin: center;    animation-name: drawCircle;  animation-duration: 4s;  animation-iteration-count: 1;  animation-fill-mode: forwards;}.circle1 {  stroke-dasharray: 330;  stroke-dashoffset: 0;    stroke-width: 10px;  stroke: #fff;  z-index: 4;}.circle2 {  stroke-dasharray: 330;  stroke-dashoffset: 250;    stroke-width: 30px;  stroke: #00aaad;  z-index: 3;}.circle3 {  stroke-dasharray: 330;  stroke-dashoffset: 200;;    stroke-width: 30px;  stroke: grey;  z-index: 2;}.circle4 {  stroke-dasharray: 330;  stroke-dashoffset: 150;    stroke-width: 20px;  stroke: black;  z-index: 1;}

<svg>  <circle class="circle1" r="50" cx="100" cy="100"></circle>  <circle class="circle4" r="50" cx="100" cy="100"></circle>  <circle class="circle3" r="50" cx="100" cy="100"></circle>
  <circle class="circle2" r="50" cx="100" cy="100"></circle>

</svg>

Google Pie chart: remove white gap between pie slices

You can get rid of that gap by setting the pieSliceBorderColor to "transparent". Try the following on Google Code Playground:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  // Create and draw the visualization.
  new google.visualization.PieChart(document.getElementById('visualization')).
    draw(data, {title:"So, how was your day?", pieSliceBorderColor:"transparent"});
}

Piechart wedge border styling in Flex

There's two properties:

stroke (the stroke around the circumference)

and

radialStroke (the stroke within the pie chart itself)

If you're successfully setting one then the other is applied in the same manner.

Josh

Css Only Pie Chart - How to Add Spacing/Padding Between Slices