.chart-wrapper {
max-width: 1150px;
padding: 0 10px;
margin: 0 auto;
}
:root {
–divider: lightgrey;
}
.chart-wrapper .chart-values {
position: relative;
display: flex;
margin-bottom: 20px;
font-weight: bold;
font-size: 1.2rem;
}
.chart-wrapper .chart-values li {
flex: 1;
min-width: 80px;
text-align: center;
}
.chart-wrapper .chart-values li:not(:last-child) {
position: relative;
}
.chart-wrapper .chart-values li:not(:last-child)::before {
content: ”;
position: absolute;
right: 0;
height: 510px;
border-right: 1px solid var(–divider);
}
:root {
–white: #fff;
}
.chart-wrapper .chart-bars li {
position: relative;
color: var(–white);
margin-bottom: 15px;
font-size: 16px;
border-radius: 20px;
padding: 10px 20px;
width: 0;
opacity: 0;
transition: all 0.65s linear 0.2s;
}
@media screen and (max-width: 600px) {
.chart-wrapper .chart-bars li {
padding: 10px;
}
}

Gantt Chart

// Define the createChart function first
function createChart(e) {
const days = document.querySelectorAll(“.chart-values li”);
const tasks = document.querySelectorAll(“.chart-bars li”);
const daysArray = […days];

tasks.forEach(el => {
const duration = el.dataset.duration.split(“-“);
const startDay = duration[0];
const endDay = duration[1];
let left = 0,
width = 0;

if (startDay.endsWith(“½”)) {
const filteredArray = daysArray.filter(day => day.textContent == startDay.slice(0, -1));
left = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth / 2;
} else {
const filteredArray = daysArray.filter(day => day.textContent == startDay);
left = filteredArray[0].offsetLeft;
}

if (endDay.endsWith(“½”)) {
const filteredArray = daysArray.filter(day => day.textContent == endDay.slice(0, -1));
width = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth / 2 – left;
} else {
const filteredArray = daysArray.filter(day => day.textContent == endDay);
width = filteredArray[0].offsetLeft + filteredArray[0].offsetWidth – left;
}

// Apply CSS
el.style.left = `${left}px`;
el.style.width = `${width}px`;

if (e.type == “load”) {
el.style.backgroundColor = el.dataset.color;
el.style.opacity = 1;
}
});
}

// Attach event listeners
window.addEventListener(“load”, createChart);
window.addEventListener(“resize”, createChart);