Build a Pie, Bar, Line, and Point Chart Using CSS | by Thomas Møller Jørgensen | Jan, 2022

Sometimes you just need a simple outline.

Thomas Muller Jorgensen
Just a simple dashboard with some graphs
Yay:   35%
Nay: 55%
Blank: 10%;

<ul id="votes" style="--count: 3;">
<li style="
--label: 'Yay'; --value: 35%; --value-text: '25%';
--previous-value: 0%; --previous-sum: 0%;
--color: green;"></li>
<li style="
--label: 'Nay'; --value: 55%; --value-text: '55%';
--previous-value: 35%; --previous-sum: 35%;
--color: red;"></li>
<li style="
--label: 'Blank'; --value: 10%; --value-text: '10%';
--previous-value: 55%; --previous-sum: 90%;
--color: blue;"></li>
</ul>
#votes {
padding: 0;
list-style-type: none;
height: 10em;
width: 10em;
}
#votes {
position: relative;
}
#votes > li {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
background: conic-gradient(transparent var(--previous-sum), var(--color) var(--previous-sum));
}
Pie chart from HTML menu
#votes {
display: flex;
align-items: end;
}
#votes > li {
background-color: var(--color);
height: var(--value);
width: calc(100% / var(--count));
}
HTML menu bar chart
#votes {
display: flex;
}
#votes > li {
border-radius: 100%;
background-color: lightgray;
width: calc(20% / var(--count));
height: calc(20% / var(--count));
margin: auto auto var(--value) auto;
}
#votes {
... other styling ...
position: relative;
}
#votes::after {
content: '';
height: 100%;
width: 100%;
position: absolute;
background-size: 100% 20%;
background-image:
linear-gradient(transparent, transparent),
linear-gradient(to top, black 1px, transparent 1px);
}
Point Chart of HTML List
#votes {
display: flex;
}
#votes > li {
background-color: lightgray;
height: 100%;
width: calc(100% / var(--count));
clip-path: polygon(
0 100%,
0 calc(100% - var(--previous-value)),
100% calc(100% - var(--value)),
100% 100%);
}
Line chart filled in from HTML menu
#votes {
display: flex;
}
#votes > li {
background-color: black;
height: 100%;
width: calc(100% / var(--count));
clip-path: polygon(
0 calc(100% - var(--previous-value)),
100% calc(100% - var(--value)),
100% calc(100% - var(--value) + 2px),
0 calc(100% - var(--previous-value) + 2px));
}
Line chart from an HTML menu
#votes {
border: solid 1px black;
height: auto;
}
#votes:before {
content: 'Votes:';
display: inline-block;
width: 9em;
padding-left: 1em;
}
#votes > li::before, #votes > li::after {
border-top: solid 1px black;
display: inline-block;
}
#votes > li::before {
border-right: none;
content: var(--label);
width: 5em;
padding-left: 1em;
}
#votes > li::after {
border-left: none;
content: var(--value-text);
width: 3em;
padding-right: 1em;
text-align: right;
}
A text table from an HTML menu

Leave a Comment