.chartImage{
       position: relative;
   }
.chartImage .value {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 3px;
    background: red;
}
.chartImage .value {
    position: absolute;
    bottom: 17px;
    height: 40px;
    width: 2px;
    background:
            black;
}
.chartImage .value::before {

    content: attr(data-value);
    color: white;
    background: black;
    font-size: 11px;
    padding: 5px;
    border-radius: 35px;
    width: 24px;
    height: 24px;
    position: absolute;
    top: -17px;
    text-align: center;
    left: -11px;

}


@media only screen and (max-width: 768px) {
    .chartImage .value {
        bottom: 6px;
        height: 40px;
        width: 1px;
    }
    .chartImage .value::before {
        content: attr(data-value);
        color: white;
        background: black;
        font-size: 9px;
        padding: 5px;
        border-radius: 35px;
        width: 20px;
        height: 20px;
        position: absolute;
        top: -12px;
        text-align: center;
        left: -10px;
    }
    .chartImage .value::before {
        content: attr(data-value);
        color: white;
        background: black;
        font-size: 9px;
        padding: 5px;
        border-radius: 35px;
        width: 21px;
        height: 22px;
        position: absolute;
        top: -17px;
        text-align: center;
        left: -10px;
    }
}