Histogram componentAvailable since EcoComposer 2.0

The defaults 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 :