full=100%
half=50%
*
    -webkit-box-sizing border-box
    -moz-box-sizing border-box
    box-sizing border-box

.chart
    width 50vw
    height 50vh
    margin 25vh 25vw
    background-color lightgreen
    position relative

.chart-container
    width full
    height full

axis-thick=1em
axis-line-thick=.25em
.axis
    width full
    height full
    position absolute
    z-index 4
    
    .axis-x
    .axis-y
        position absolute
        background-color lightgray

    .axis-y
        width axis-thick
        height full

        .axis-line
            left half

            .axis-line-container
                margin 0 -0.5*axis-line-thick
                height full
                width axis-line-thick


    .axis-x
        height axis-thick
        width full
        bottom 0

        .axis-line
            top 50%

            .axis-line-container
                margin -0.5*axis-line-thick 0
                height axis-line-thick
                width full

.axis-line
    width full
    height full
    position absolute
    z-index 5
.axis-line-container
    background-color black

.scene
    position absolute
    z-index 1
    background-color green
    width full
    height full
    padding-left axis-thick
    padding-bottom axis-thick

    .scene-container
        width full
        height full
        background-color lightblue

count_bar=4
p_empty=50%
p_bar_m=p_empty/count_bar
p_bar_w=(full - p_empty)/count_bar
// p_bar=p_bar/count_bar
.bar
    width p_bar_w
    height full
    margin 0 (p_bar_m/2)
    // background-color lightgreen
    float left
    position relative
    
    .bar-inner
        position absolute
        bottom 0
        width full
        background-color yellow
   
//automate this part     
.part-1
    .bar-inner
        height 40%

.part-2
    .bar-inner
        height 65%

.part-3
    .bar-inner
        height 90%

.part-4
    .bar-inner
        height 75%

.clearfix
    clear both