Histogram componentAvailable since EcoComposer 2.0

10 %
8 %
5 %
12 %
65 %
20 €
40 €
50 €
55 €
57 €
58 €

The default values are :

animated : true, border-radius : .5rem * theming.$font-size, font-size : 16px, height : 30rem * theming.$font-size, horizontal : false, histogram--axis--color : 'histogram--axis--color', histogram--bar--text-color : 'histogram--bar--text-color', histogram--bar--text-shadow : 'histogram--bar--text-shadow', histogram--left-axis--border : 'histogram--left-axis--border', histogram--right-axis--border : 'histogram--right-axis--border', container--margin : 3rem * theming.$font-size, margin : .5rem * theming.$font-size, max-value : 100, // later replaced by the highest value print : false, suffix : '', text : 'true', themes : ( light : ( default--histogram--axis--color : #333, default--histogram--bar--text-color : #333, default--histogram--bar--text-shadow : 0 0 2px #fff, default--histogram--left-axis--border : 1px solid #000, default--histogram--right-axis--border : 1px solid #000 ), dark : ( default--histogram--axis--color : #ddd, default--histogram--bar--text-color : #ddd, default--histogram--bar--text-shadow : 0 0 2px #000, default--histogram--left-axis--border : 1px solid #ddd, default--histogram--right-axis--border : 1px solid #ddd ) ), width : 5rem * theming.$font-size

We can implement it that way :

@include histogram.init; @include histogram.create( ( 'slices' : ( (10, utils.linearGradient(10, #AFF)), (8, utils.linearGradient(8, #0A7)), (5, utils.linearGradient(5, #77C)) ) ) ); @include histogram.create( ( 'themes' : $themes, 'max-value' : 65, 'slices' : ( (10, utils.linearGradient(45, #AFF)), (8, utils.linearGradient(45, #0A7)), (5, utils.linearGradient(45, #77C)), (12, utils.linearGradient(45, #555)), (65, utils.linearGradient(45, #A0A)) ) ) );

We can implement it that way :

<div class="histogram suffix"> <div class="histogram--segment suffix">10 %</div> <div class="histogram--segment suffix">8 %</div> <div class="histogram--segment suffix">5 %</div> <div class="histogram--segment suffix">12 %</div> <div class="histogram--segment suffix">65 %</div> </div>
^