Simplest Charts Ever

Upper half is a collection of barcharts, lower half is a number of corresponding captions.

To make captions easier to be read, they are turned 45%

.wrapper{
border:solid 1px #eee;
height:300px;
width:70%;
margin:50px 20px 0px 20px;
background-image: url("images/grid.png");
background-repeat:no-repeat;
background-size:100% 100%;
min-width:300px;
}
.graph{float:left;
._graph{float:left;
 width:5%;
 margin-left:5%;
 height:50%;
 background:#ddd;
 transition:all 1s;
 cursor:pointer;
 }
._caption{
float:left;
margin-top:30px;

 width:5%;
 height:50%;
 text-align:right;
 margin-left:5%;
 writing-mode: vertical-lr;
 
  font-family:arial;
font-size:16px;
transform:rotate(-135deg);
transform-origin:-90% 45%;
}

To add color and animation, we can use a bit of javascript

It couldn't be simpler, but can work fine for landings and quick presentations

var _graphs=document.getElementsByClassName("_graph");
function setGraphs2(){
for (let i in _graphs) {
if (_graphs[i].style !== undefined) {
_graphs[i].style.clipPath="inset("+Math.round(Math.random()*90)+"% 0% 0% 0%)";
   _graphs[i].style.background="rgb("+Math.round(Math.random()*255)+",
   "+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")";
}
}
}

Pie Chart Made of Border Raduis

To make pie chart , you can use rounded corners as building material

To make a number of segments, you take divs with rounded corners and stack them on top of each other.

After that it leaves only to color and rotate them to the angle required

It is a very quick and easy approach, but it will work fine for simple tasks.

.pieWrap{
position:relative;
width:100px;
height:100px;
margin:100px 20px;

}
.pieGr{
top:0;
left:0;
position:absolute;
width:100px;
height:100px;
border-radius:50%;
border: 100px solid transparent;
border-top: 100px solid #3498db; /* Blue */
transition: all 1s;
cursor:pointer;
}
.pieGr0{
width:100px;
height:100px;
border-radius:50%;
border: 100px solid #ddd;

}

To rotate segments some js will be required

function setAngles(){
var _pieGr=document.getElementsByClassName("pieGr");
let ind=0;
let ang=0;
for (let i in _pieGr) {
if (_pieGr[i].style !== undefined) {
ang+=Math.round(Math.random()*90);
_pieGr[i].style.transform="rotate("+ang+"deg)";
_pieGr[i].style.border="100px solid transparent";
_pieGr[i].style.borderTop="100px solid rgb("+Math.round(Math.random()*255)+",
"+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")";
}
}
}