Creating a static pie chart with CSS

Question

I am attempting to create a pie chart using css and html. I would simply be displaying a few static numbers therefore I am trying to keep it relatively simple and not use any animations.

I'm currently running into a road block on how to create my desired look. The code snippet below works exactly as I would like it to, the issue with this is that conic-gradient is not supported with firefox and internet explorer which will be an issue with this project.

.progress-circle {
  --d: 50px;
  --color: #002F65;
  --progress: 40;
  border-radius: var(--d);
  height: var(--d);
  width: var(--d);
  background: conic-gradient( var(--color) calc(calc(var(--progress) / 100) * 360deg), transparent calc(calc(var(--progress) / 100) * 360deg));
}

I have been searching for an alternative that resembles the example above which had lead me to this article: designing simple pie charts with css

My issue with this is that the way to calculate the percenage growth of the pie chart seems to be not compatible with what I am trying to accomplish. as it is determined by transform: rotate(.1turn);

My main question is it possible to make conic-gradient compatible with other browsers? If not, what would be the best way to approach making a pie chart with css to closely resemble the first example?

For context I will be passing data from an array to determine the percentage of the pie chart.

.pie {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: yellowgreen;
  background-image:
  linear-gradient(to right, transparent 50%, #655 0);
}

.pie::before {
  content: "";
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background: #655;
  transform-origin: left;
  transform: rotate(.1turn);
}

user_8620333 · Answer

Here is an idea based on this previous answer

.box {
  /* percentage to degree
    --s:0 for [0% 50%]
    --s:1 for [50% 100%]
   */
  --v:calc( ((18/5) * var(--p) - 90)*1deg);

  width:100px;
  height:100px;
  display:inline-block;
  border-radius:50%;
  background:
    linear-gradient(var(--v), yellowgreen 50%,transparent 0) 0 /calc((1 - var(--s))*100%),
    linear-gradient(var(--v), transparent 50%,#655        0) 0 /calc(var(--s)*100%),
    linear-gradient(to right, yellowgreen 50%,#655 0);
}

We can optimize the code using min() and keep the use of only one variables but you need to pay attention to the support: https://caniuse.com/#feat=css-math-functions

.box {
  /* percentage to degree  */
  --v:calc( ((18/5) * var(--p) - 90)*1deg);

  width:100px;
  height:100px;
  display:inline-block;
  border-radius:50%;
  background:
    linear-gradient(var(--v), yellowgreen 50%,transparent 0) 0 /min(100%,(50 - var(--p))*100%),
    linear-gradient(var(--v), transparent 50%,#655        0) 0 /min(100%,(var(--p) - 50)*100%),
    linear-gradient(to right, yellowgreen 50%,#655 0);
}

Another idea using pseudo element with more support:

.box {
  /* percentage to degree  */
  --v: calc( ((18/5) * var(--p) - 180)*1deg);
  
  width: 100px;
  display: inline-flex;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(to right, yellowgreen 50%, #655 0);
}

.box::before,
.box::after {
  content: "";
  width: 50%;
  padding-top:100%;
  transform: rotate(var(--v));
}

.box::before {
  background: 
    linear-gradient(yellowgreen 0 0) 
    0 / calc((50 - var(--p))*1%);
  transform-origin: right;
}

.box::after {
  background: 
    linear-gradient(#655 0 0)       
    0 / calc((var(--p) - 50)*1%);
  transform-origin: left;
}

user_7394871 · Answer

CSS solution

Based on changing the parameters of the stroke-dasharray attribute

To set the desired attribute values in accordance with the opening angle of the sector, you need to calculate the total circumference at the selected radius.

Let's say the radius is 50px

let radius = 50;
 let circumference = radius * 2 * Math.PI;
 console.log(circumference );

Full circumference ~= 314px

For example, to draw a segment equal to a quarter of a circle:

calculate the length of the dash: 314 * 0.25 = 78.5px

gap length: 314 * 0.75 = 235.5px

Formula for stroke-dasharray: stroke-dasharray="78.5, 235.5"

Similarly, stroke-dasharray parameters are set for other corners of sectors.

circle {
fill:#665555;
} 
#p15,#p90,#p180,#p270 {
fill:none;
stroke:#9ACD32;
stroke-width:100;
}
#p15 {
stroke-dasharray:15.7,298.3;
}
#p90 {
stroke-dasharray:78.5,235.5;
}
#p180 {
stroke-dasharray:157,157;
}
#p270 {
stroke-dasharray:235.5,78.5;
}

SVG solution

As in the example CSS solution uses changing the stroke-dasharray attributes

An example of interactively changing the angle of a sector

The author's wishes:

For context I will be passing data from an array to determine the percentage of the pie chart.

This process is modeled using input and javascript:

Displaying the percentage of filling the chart

let circumference = 50 * 2 * Math.PI,
 input = document.querySelector("[type='range']"),
 txt = document.querySelector("#txt1");

input.addEventListener("input",()=>{  
  pieChart();  
})

window.addEventListener("load",()=>{  
  pieChart();  
})

function pieChart(){
  let val = Number(input.value);
  let dash = circumference * val / 100;
  let gap = circumference - dash;
  p15.style.strokeDasharray = dash + " " + gap
txt.innerHTML = (val + '%'); 
}

Chart fill angle output

let circumference = 50 * 2 * Math.PI,
 input = document.querySelector("[type='range']"),
 txt = document.querySelector("#txt1");

input.addEventListener("input",()=>{  
  pieChart();  
})

window.addEventListener("load",()=>{  
  pieChart();  
})

function pieChart(){
  let val = Number(input.value);
  let dash = circumference * val / 360;
  let gap = circumference - dash;
  p15.style.strokeDasharray = dash + " " + gap
txt.innerHTML = (val); 
}

Creating a static pie chart with CSS

2 Answers

CSS solution

SVG solution

An example of interactively changing the angle of a sector