Histogram componentAvailable since EcoComposer 2.0

Histogram examples
Default SCSS values
SCSS implementation
HTML implementation

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>