.graph {
    width: 100%;
    height: 120px;
    position: relative;
    border-bottom: 1px solid #000;
    margin-bottom: 40px;
}

.area {
    position: absolute;
    opacity: 0.5;
    background-color: rgb(123, 123, 123);
    border-left: 1px solid rgb(0, 0, 0);
    transition: transform 0.3s ease;
}

.area:hover {
    transform: scale(1.1);
}

.area:nth-of-type(1) {
    background-color: red;
}

.area:nth-of-type(2) {
    background-color: blue;
}

.area:nth-of-type(3) {
    background-color: green;
}

.area:nth-of-type(4) {
    background-color: rgb(216, 36, 201);
}

.area:nth-of-type(5) {
    background-color: orange;
}

.area:nth-of-type(6) {
    background-color: rgb(0, 255, 187);
}

.area:nth-of-type(7) {
    background-color: rgb(255, 0, 144);
}

.area:nth-of-type(8) {
    background-color: rgb(140, 255, 0);
}

.area p {
    position: absolute;
    top: -30px;
    left: -0.5px;
    height: 31px;
    font-size: 10px;
    white-space: nowrap;
    text-indent: 1px;
    border-left: 1px solid rgb(0, 0, 0);
}

.tick,
.year {
    position: absolute;
    font-size: 8px !important;
    text-align: center;
    bottom: -15px;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

.tick {
    height: 15px;
    border-left: 1px solid #000;
}

.year {
    color: #bbb;
    text-indent: 8px;
}

@media print {
    .area {
        opacity: 1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .area:nth-of-type(1) {
        background-color: rgb(255, 113, 113);
    }

    .area:nth-of-type(2) {
        background-color: rgb(119, 119, 253);
    }

    .area:nth-of-type(3) {
        background-color: rgb(95, 199, 95);
    }

    .area:nth-of-type(4) {
        background-color: rgb(211, 100, 202);
    }

    .area:nth-of-type(5) {
        background-color: rgb(230, 186, 105);
    }
}