<body>
<div class="main-container">
<div class="year-stats">
<div class="month-group">
<div class="bar h-100"></div>
<p class="month">Jan</p>
</div>
<div class="month-group">
<div class="bar h-50"></div>
<p class="month">Feb</p>
</div>
<div class="month-group">
<div class="bar h-75"></div>
<p class="month">Mar</p>
</div>
<div class="month-group">
<div class="bar h-25"></div>
<p class="month">Apr</p>
</div>
<div class="month-group selected">
<div class="bar h-100"></div>
<p class="month">May</p>
</div>
<div class="month-group">
<div class="bar h-50"></div>
<p class="month">Jun</p>
</div>
<div class="month-group">
<div class="bar h-75"></div>
<p class="month">Jul</p>
</div>
<div class="month-group">
<div class="bar h-25"></div>
<p class="month">Aug</p>
</div>
<div class="month-group">
<div class="bar h-50"></div>
<p class="month">Sep</p>
</div>
<div class="month-group">
<div class="bar h-75"></div>
<p class="month">Oct</p>
</div>
<div class="month-group">
<div class="bar h-25"></div>
<p class="month">Nov</p>
</div>
<div class="month-group">
<div class="bar h-100"></div>
<p class="month">Dez</p>
</div>
</div>
<div class="stats-info">
<div class="graph-container">
<div class="percent">
<svg viewBox="0 0 36 36" class="circular-chart">
<path class="circle" stroke-dasharray="100, 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="circle" stroke-dasharray="85, 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="circle" stroke-dasharray="60, 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="circle" stroke-dasharray="30, 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
</svg>
</div>
<p>Total: $2075</p>
</div>
<div class="info">
<p>Most expensive category <br /><span>Restaurants & Dining</span></p>
<p>Updated categories <span>2</span></p>
<p>Bonus payments <span>$92</span></p>
</div>
</div>
</div>
</body>@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Roboto", sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.main-container {
background: #444e80;
color: #abafc6;
border-radius: 5px;
padding: 20px;
width: 440px;
height: 350px;
}
.year-stats {
white-space: nowrap;
max-height: 170px;
overflow: hidden;
}
.year-stats:hover {
overflow-x: auto;
}
/* SCROLL BAR STYLE (ONLY WORKS IN CHROME) */
/* Width */
::-webkit-scrollbar {
height: 5px;
width: 100%;
}
/* Track */
::-webkit-scrollbar-track {
background: #444e80;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #abafc6;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #5397d6;
}
.month-group {
cursor: pointer;
max-width: 400px;
height: 110px;
margin: 10px;
display: inline-block;
}
.bar {
background-color: #abafc6;
width: 20px;
border-radius: 5px;
margin-bottom: 10px;
}
.month-group:hover .bar,
.selected .bar {
background: #5397d6;
}
.month-group:hover p,
.selected p {
color: #fff;
}
.h-25 {
height: 25%;
}
.h-50 {
height: 50%;
}
.h-75 {
height: 75%;
}
.h-100 {
height: 100%;
}
.stats-info {
margin-top: 15px;
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
}
.graph-container {
position: relative;
}
.percent {
display: block;
width: 120px;
height: 120px;
}
.circle {
stroke: #915db1;
fill: none;
stroke-width: 3;
}
.circle:nth-child(2) {
stroke: #e59f3c;
}
.circle:nth-child(3) {
stroke: #5397d6;
}
.circle:nth-child(4) {
stroke: #4cc790;
}
.graph-container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: #fff;
text-align: center;
}
.info p {
margin-bottom: 10px;
}
.info span {
color: #fff;
}
// The scroll bar style only works in Google Chrome
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.