Set Width In Style ¶

For show the percentage in charts, add the value in attribute data-percent

<div class="charts"> <div class="charts__chart" data-percent="100%"></div><!-- /.charts__chart --> <div class="charts__chart" data-percent="60%" style="width: 60%"></div><!-- /.charts__chart --> <div class="charts__chart" style="width: 40%"></div><!-- /.charts__chart --> <div class="charts__chart" style="width: 10%"></div><!-- /.charts__chart --> </div><!-- /.charts -->

Set Width With Classes ¶

Setting up the width of chart with the classes doesn't it necessary put the value in data-percent attribute. Just append the attribute without value

Classes range from chart--p0 to chart--p100

<div class="charts"> <div class="charts__chart chart--p100" data-percent></div><!-- /.charts__chart --> <div class="charts__chart chart--p70" data-percent></div><!-- /.charts__chart --> <div class="charts__chart chart--p40"></div><!-- /.charts__chart --> <div class="charts__chart chart--p20"></div><!-- /.charts__chart --> </div><!-- /.charts -->

Chart Sizing ¶

Classes available for sizing: chart--xs , chart--sm , chart--lg and chart--xl

<div class="charts"> <div class="charts__chart chart--p100 chart--xs" data-percent></div><!-- /.charts__chart --> <div class="charts__chart chart--p80 chart--sm" data-percent></div><!-- /.charts__chart --> <div class="charts__chart chart--p60" data-percent></div><!-- /.charts__chart --> <div class="charts__chart chart--p40 chart--lg" data-percent></div><!-- /.charts__chart --> <div class="charts__chart chart--p20 chart--xl" data-percent></div><!-- /.charts__chart --> </div><!-- /.charts -->

Chart Colors ¶

Colors available: chart--default , chart--blue , chart--green , chart--red , chart--yellow and chart--grey

For titles, just put an < span > tag before the charts__chart

chart--default chart--blue chart--green chart--red chart--yellow chart--grey

<div class="charts"> <span>chart--default</span> <div class="charts__chart chart--p100 chart--default" data-percent></div><!-- /.charts__chart --> <span>chart--blue</span> <div class="charts__chart chart--p80 chart--blue" data-percent></div><!-- /.charts__chart --> <span>chart--green</span> <div class="charts__chart chart--p60 chart--green" data-percent></div><!-- /.charts__chart --> <span>chart--red</span> <div class="charts__chart chart--p40 chart--red" data-percent></div><!-- /.charts__chart --> <span>chart--yellow</span> <div class="charts__chart chart--p20 chart--yellow" data-percent></div><!-- /.charts__chart --> <span>chart--grey</span> <div class="charts__chart chart--p5 chart--grey" data-percent></div><!-- /.charts__chart --> </div><!-- /.charts -->

Chart With Hover ¶

Append the chart--hover in chart

<div class="charts"> <div class="charts__chart chart--p100 chart--hover"></div><!-- /.charts__chart --> <div class="charts__chart chart--p80 chart--blue chart--hover"></div><!-- /.charts__chart --> <div class="charts__chart chart--p60 chart--green chart--hover"></div><!-- /.charts__chart --> <div class="charts__chart chart--p40 chart--red chart--hover"></div><!-- /.charts__chart --> <div class="charts__chart chart--p20 chart--yellow chart--hover"></div><!-- /.charts__chart --> <div class="charts__chart chart--p5 chart--grey chart--hover"></div><!-- /.charts__chart --> </div><!-- /.charts -->

Chart Grouped ¶

Append the class charts--grouped in charts container. After this, hierarchically the charts will be added inside the previous chart, like the example

The chart in top level must be bigger than the inferior level, since that the top level chart is underneath of inferior level chart in page.

The chart in inferior level admits the superior level as your container, therefore never will exceed it

<div class="charts"> <div class="charts__chart chart--p100 chart--sm"> <div class="charts__chart chart--p80 chart--blue"> <div class="charts__chart chart--p60 chart--green"></div><!-- /.charts__chart --> </div><!-- /.charts__chart --> </div><!-- /.charts__chart --> <div class="charts__chart chart--p70"> <div class="charts__chart chart--p80 chart--grey"> <div class="charts__chart chart--p60 chart--yellow"></div><!-- /.charts__chart --> </div><!-- /.charts__chart --> </div><!-- /.charts__chart --> <div class="charts__chart chart--p50 chart--lg"> <div class="charts__chart chart--p80 chart--red"> <div class="charts__chart chart--p60 chart--inverse"></div><!-- /.charts__chart --> </div><!-- /.charts__chart --> </div><!-- /.charts__chart --> </div><!-- /.charts -->

beta Chart Vertical ¶

Append the class charts--vertical in charts container. The operation is equal to charts normal. The sizing classes, colors classes, chart--hover work normally. The height may be changed by style too, changing it in style .

For now, charts--vertical don't support charts--grouped .

In charts--vertical the method to show the percentage it's different from normal charts . In normal charts , append data-percent as attribute. Here, inside of charts__chart inserts <span class=" charts__percent "></span> like in example.

If <span class=" charts__percent "></span> is empty, it assumes the value of class of percentage ( chart--p0-100 ). But, this span may used like a title.

Title

<div class="charts charts--vertical"> <div class="charts__chart"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p80"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p60"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p100 chart--hover"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p80 chart--blue chart--hover"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p60 chart--green chart--hover"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p40 chart--red chart--hover"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p20 chart--yellow chart--hover"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p5 chart--grey chart--hover"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p100 chart--xs"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p80 chart--sm"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p60"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p40 chart--lg"> <span class="charts__percent"></span> </div><!-- /.charts__chart --> <div class="charts__chart chart--p20 chart--xl"> <span class="charts__percent">Title</span> </div><!-- /.charts__chart --> </div><!-- /.charts -->