Step 396

' <style> .chart-wrap { margin-left: 50px; font-family: sans-serif; height: 650px; width: 300px; } .chart-wrap .title { font-weight: bold; font-size: 1.62em; padding: 0.5em 0 1.8em 0; text-align: center; white-space: nowrap; } .chart-wrap.vertical .grid {

transform: translateY(-175px) translateX(175px) rotate(-90deg);

} .chart-wrap.vertical .grid .bar::after {

transform: translateY(-50%) rotate(45deg);
display: block;

} .chart-wrap.vertical .grid::before,. chart-wrap.vertical .grid::after {

transform: translateX(-0.2em) rotate(90deg);

} .chart-wrap .grid { position: relative; padding: 5px 0 5px 0; height: 100%; width: 100%; border-left: 2px solid #aaa; background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(170,170,170,0.7) 20%); } .chart-wrap .grid::before { font-size: 0.8em; font-weight: bold; content: "0%"; position: absolute; left: -0.5em; top: -1.5em; } .chart-wrap .grid::after { font-size: 0.8em; font-weight: bold; content: "100%"; position: absolute; right: -1.5em; top: -1.5em; } .chart-wrap .bar { width: var(--bar-value); height: 50px; margin: 30px 0; background-color:#F16335; border-radius: 0 3px 3px 0; } .chart-wrap .bar:hover { opacity: 0.7; } .chart-wrap .bar::after {

content: attr(data-name);
margin-left: 100%;
padding: 10px;display: inline-block;
white-space: nowrap;

}

</style>

'+ '

Bar Chart for Cars and Brands

'+ Car.allInstances->groupby(c|c.BrandofCar)->collect(tuple|tuple.BrandofCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%')

->collect(values|'

'

) ->asSeparatedList( )+ '

'

Step

(Exerpt)