<div class="metric-chart h-bar-chart" id="chart-1">
<!--
##################################################
AXIS
##################################################
-->
<div class="y-axis"></div>
<div class="x-axis"></div>
<!--
##################################################
Y AXIS BACKGROUND LINES
##################################################
-->
<ul class="y-axis-line-list count-10">
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
</ul><!-- /.y-axis-line-list -->
<!--
##################################################
X AXIS TARGET LINE
##################################################
-->
<div class="x-axis-target">
<span class="x-axis-target-line" style="bottom: 80%;">
<span class="x-axis-target-line-label" data-label="Goal"></span>
</span>
</div>
<!--
##################################################
Y AXIS LABELS
##################################################
-->
<ul class="y-axis-label-list count-10">
<li class="y-axis-label-item">
<span class="y-axis-label">50</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">100</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">150</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">200</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">250</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">300</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">350</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">400</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">450</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">500</span>
</li>
</ul><!-- /.y-axis-label-list -->
<!--
##################################################
X AXIS LABELS
##################################################
-->
<ul class="x-axis-label-list count-10">
<li class="x-axis-label-item">
<span class="x-axis-label">Jan</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">Feb</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">Mar</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">Apr</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">May</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">Jun</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">Jul</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">Aug</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">Sep</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">Oct</span>
</li>
</ul><!-- /.x-axis-label-list -->
<!--
##################################################
X AXIS BARS
##################################################
-->
<ul class="x-axis-bar-list count-10">
<li class="x-axis-bar-item nested-bars">
<span class="x-axis-bar primary" style="top: 50%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar-target-line" style="bottom: 30%;"></span>
</li>
<li class="x-axis-bar-item nested-bars">
<span class="x-axis-bar primary" style="top: 30%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar secondary" style="top: 50%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar-target-line" style="bottom: 20%;"></span>
</li>
<li class="x-axis-bar-item nested-bars">
<span class="x-axis-bar primary" style="top: 10%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar secondary" style="top: 30%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar tertiary" style="top: 50%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar-target-line" style="bottom: 10%;"></span>
</li>
<li class="x-axis-bar-item">
<span class="x-axis-bar primary" style="top: 10%;"></span>
<span class="x-axis-bar secondary" style="top: 30%;"></span>
<span class="x-axis-bar tertiary" style="top: 50%;"></span>
<span class="x-axis-bullet-bar" style="top: 20%;"></span>
<span class="x-axis-bar-target-line" style="bottom: 10%;"></span>
</li>
<li class="x-axis-bar-item">
<span class="x-axis-bar primary" style="top: 30%;"></span>
<span class="x-axis-bar secondary" style="top: 50%;"></span>
<span class="x-axis-bullet-bar" style="top: 40%;"></span>
<span class="x-axis-bar-target-line" style="bottom: 20%;"></span>
</li>
<li class="x-axis-bar-item nested-bars">
<span class="x-axis-bar primary" style="top: 50%;"></span>
<span class="x-axis-bullet-bar" style="top: 60%;"></span>
<span class="x-axis-bar-target-line" style="bottom: 30%;"></span>
</li>
<li class="x-axis-bar-item nested-bars">
<span class="x-axis-bar primary" style="top: 50%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar-target-line" style="bottom: 30%;"></span>
</li>
<li class="x-axis-bar-item nested-bars">
<span class="x-axis-bar primary" style="top: 30%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar secondary" style="top: 50%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar-target-line" style="bottom: 20%;"></span>
</li>
<li class="x-axis-bar-item nested-bars">
<span class="x-axis-bar primary" style="top: 10%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar secondary" style="top: 30%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar tertiary" style="top: 50%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
<span class="x-axis-bar-target-line" style="bottom: 10%;"></span>
</li>
<li class="x-axis-bar-item">
<span class="x-axis-bar primary" style="top: 10%;"></span>
<span class="x-axis-bar secondary" style="top: 30%;"></span>
<span class="x-axis-bar tertiary" style="top: 50%;"></span>
<span class="x-axis-bullet-bar" style="top: 20%;"></span>
<span class="x-axis-bar-target-line" style="bottom: 10%;"></span>
</li>
</ul><!-- /.x-axis-bar-list -->
</div><!-- /.metric-chart -->
<div class="metric-chart v-bar-chart" id="chart-2">
<!--
##################################################
AXIS
##################################################
-->
<div class="y-axis"></div>
<div class="x-axis"></div>
<!--
##################################################
X AXIS BACKGROUND LINES
##################################################
-->
<ul class="x-axis-line-list count-10">
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
</ul><!-- /.x-axis-line-list -->
<!--
##################################################
Y AXIS TARGET LINE
##################################################
-->
<div class="y-axis-target">
<span class="y-axis-target-line" style="left: 80%;">
<span class="y-axis-target-line-label" data-label="Goal"></span>
</span>
</div>
<!--
##################################################
Y AXIS LABELS
##################################################
-->
<ul class="y-axis-label-list count-10">
<li class="y-axis-label-item">
<span class="y-axis-label">Jan</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">Feb</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">Mar</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">Apr</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">May</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">Jun</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">Jul</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">Aug</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">Sep</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">Oct</span>
</li>
</ul><!-- /.y-axis-label-list -->
<!--
##################################################
X AXIS LABELS
##################################################
-->
<ul class="x-axis-label-list count-10">
<li class="x-axis-label-item">
<span class="x-axis-label">50</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">100</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">150</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">200</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">250</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">300</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">350</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">400</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">450</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">500</span>
</li>
</ul><!-- /.x-axis-label-list -->
<!--
##################################################
Y AXIS BARS
##################################################
-->
<ul class="y-axis-bar-list count-10">
<li class="y-axis-bar-item nested-bars">
<span class="y-axis-bar primary" style="right: 50%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar-target-line" style="left: 30%;"></span>
</li>
<li class="y-axis-bar-item nested-bars">
<span class="y-axis-bar primary" style="right: 30%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar secondary" style="right: 50%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar-target-line" style="left: 20%;"></span>
</li>
<li class="y-axis-bar-item nested-bars">
<span class="y-axis-bar primary" style="right: 10%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar secondary" style="right: 30%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar tertiary" style="right: 50%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar-target-line" style="left: 10%;"></span>
</li>
<li class="y-axis-bar-item">
<span class="y-axis-bar primary" style="right: 10%;"></span>
<span class="y-axis-bar secondary" style="right: 30%;"></span>
<span class="y-axis-bar tertiary" style="right: 50%;"></span>
<span class="y-axis-bullet-bar" style="right: 20%;"></span>
<span class="y-axis-bar-target-line" style="left: 10%;"></span>
</li>
<li class="y-axis-bar-item">
<span class="y-axis-bar primary" style="right: 30%;"></span>
<span class="y-axis-bar secondary" style="right: 50%;"></span>
<span class="y-axis-bullet-bar" style="right: 40%;"></span>
<span class="y-axis-bar-target-line" style="left: 20%;"></span>
</li>
<li class="y-axis-bar-item nested-bars">
<span class="y-axis-bar primary" style="right: 50%;"></span>
<span class="y-axis-bullet-bar" style="right: 60%;"></span>
<span class="y-axis-bar-target-line" style="left: 30%;"></span>
</li>
<li class="y-axis-bar-item nested-bars">
<span class="y-axis-bar primary" style="right: 50%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar-target-line" style="left: 30%;"></span>
</li>
<li class="y-axis-bar-item nested-bars">
<span class="y-axis-bar primary" style="right: 30%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar secondary" style="right: 50%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar-target-line" style="left: 20%;"></span>
</li>
<li class="y-axis-bar-item nested-bars">
<span class="y-axis-bar primary" style="right: 10%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar secondary" style="right: 30%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar tertiary" style="right: 50%;">
<span class="y-axis-bar-value" data-value="{123}"></span>
</span>
<span class="y-axis-bar-target-line" style="left: 10%;"></span>
</li>
<li class="y-axis-bar-item">
<span class="y-axis-bar primary" style="right: 10%;"></span>
<span class="y-axis-bar secondary" style="right: 30%;"></span>
<span class="y-axis-bar tertiary" style="right: 50%;"></span>
<span class="y-axis-bullet-bar" style="right: 20%;"></span>
<span class="y-axis-bar-target-line" style="left: 10%;"></span>
</li>
</ul><!-- /.y-axis-bar-list -->
</div><!-- /.metric-chart -->
<div class="metric-chart h-bar-chart" id="chart-5">
<!--
##################################################
AXIS
##################################################
-->
<div class="y-axis"></div>
<div class="x-axis"></div>
<!--
##################################################
Y AXIS BACKGROUND LINES
##################################################
-->
<ul class="y-axis-line-list count-5">
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
</ul><!-- /.y-axis-line-list -->
<!--
##################################################
Y AXIS LABELS
##################################################
-->
<ul class="y-axis-label-list count-5">
<li class="y-axis-label-item">
<span class="y-axis-label">50</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">100</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">150</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">200</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">250</span>
</li>
</ul><!-- /.y-axis-label-list -->
<!--
##################################################
X AXIS LABELS
##################################################
-->
<ul class="x-axis-label-list count-6">
<li class="x-axis-label-item">
<span class="x-axis-label">-30</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">-20</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">-10</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">Now</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">+10</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">+20</span>
</li>
</ul><!-- /.x-axis-label-list -->
<!--
##################################################
X AXIS BARS
##################################################
-->
<ul class="x-axis-bar-list count-6">
<li class="x-axis-bar-item">
<span class="x-axis-bar primary" style="top: 10%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
</li>
<li class="x-axis-bar-item">
<span class="x-axis-bar primary" style="top: 55%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
</li>
<li class="x-axis-bar-item">
<span class="x-axis-bar primary" style="top: 35%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
</li>
<li class="x-axis-bar-item">
<span class="x-axis-bar tertiary" style="top: 45%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
</li>
<li class="x-axis-bar-item">
<span class="x-axis-bar dashed" style="top: 20%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
</li>
<li class="x-axis-bar-item">
<span class="x-axis-bar dashed" style="top: 30%;">
<span class="x-axis-bar-value" data-value="{123}"></span>
</span>
</li>
</ul><!-- /.x-axis-bar-list -->
</div><!-- /.metric-chart -->
<div class="metric-chart v-bar-chart" id="chart-3">
<!--
##################################################
AXIS
##################################################
-->
<div class="y-axis"></div>
<div class="x-axis"></div>
<!--
##################################################
X AXIS BACKGROUND LINES
##################################################
-->
<ul class="x-axis-line-list count-5">
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
<li class="x-axis-line-item">
<span class="x-axis-line"></span>
</li>
</ul><!-- /.x-axis-line-list -->
<!--
##################################################
Y AXIS TARGET LINE
##################################################
-->
<div class="y-axis-target">
<span class="y-axis-target-line" style="left: 80%;">
<span class="y-axis-target-line-label" data-label="Goal"></span>
</span>
</div>
<!--
##################################################
Y AXIS LABELS
##################################################
-->
<ul class="y-axis-label-list count-1">
<li class="y-axis-label-item">
<span class="y-axis-label">Jan</span>
</li>
</ul><!-- /.y-axis-label-list -->
<!--
##################################################
X AXIS LABELS
##################################################
-->
<ul class="x-axis-label-list count-5">
<li class="x-axis-label-item">
<span class="x-axis-label">50</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">100</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">150</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">200</span>
</li>
<li class="x-axis-label-item">
<span class="x-axis-label">250</span>
</li>
</ul><!-- /.x-axis-label-list -->
<!--
##################################################
Y AXIS BARS
##################################################
-->
<ul class="y-axis-bar-list count-1">
<li class="y-axis-bar-item">
<span class="y-axis-bar primary" style="right: 10%;"></span>
<span class="y-axis-bar secondary" style="right: 30%;"></span>
<span class="y-axis-bar tertiary" style="right: 50%;"></span>
<span class="y-axis-bullet-bar" style="right: 20%;"></span>
<span class="y-axis-bar-target-line" style="left: 10%;"></span>
</li>
</ul><!-- /.y-axis-bar-list -->
</div><!-- /.metric-chart -->
<div class="metric-chart h-bar-chart" id="chart-4">
<!--
##################################################
Y & X AXIS
##################################################
-->
<div class="y-axis"></div>
<div class="x-axis"></div>
<!--
##################################################
Y AXIS BACKGROUND LINES
##################################################
-->
<ul class="y-axis-line-list count-5">
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
<li class="y-axis-line-item">
<span class="y-axis-line"></span>
</li>
</ul><!-- /.y-axis-line-list -->
<!--
##################################################
Y AXIS LABELS
##################################################
-->
<ul class="y-axis-label-list count-5">
<li class="y-axis-label-item">
<span class="y-axis-label">50</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">100</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">150</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">200</span>
</li>
<li class="y-axis-label-item">
<span class="y-axis-label">250</span>
</li>
</ul><!-- /.y-axis-label-list -->
<!--
##################################################
X AXIS LABELS
##################################################
-->
<ul class="x-axis-label-list count-1">
<li class="x-axis-label-item">
<span class="x-axis-label">Jan</span>
</li>
</ul><!-- /.x-axis-label-list -->
<!--
##################################################
X AXIS BARS
##################################################
-->
<ul class="x-axis-bar-list count-1">
<li class="x-axis-bar-item">
<span class="x-axis-bar primary" style="top: 10%;"></span>
<span class="x-axis-bar secondary" style="top: 30%;"></span>
<span class="x-axis-bar tertiary" style="top: 50%;"></span>
<span class="x-axis-bullet-bar" style="top: 20%;"></span>
<span class="x-axis-bar-target-line" style="bottom: 10%;"></span>
</li>
</ul><!-- /.x-axis-bar-list -->
</div><!-- /.metric-chart -->//
// Variables
// --------------------------------------------------
@chart-left-space: 50px;
@chart-bottom-space: 50px;
@chart-y-axis-color: #434a54;
@chart-x-axis-color: #434a54;
@chart-y-axis-bar-tagert-line-color: #1f2125;
@chart-x-axis-bar-tagert-line-color: #1f2125;
@chart-y-axis-tagert-line-color: #da4453;
@chart-x-axis-tagert-line-color: #da4453;
@chart-y-axis-tagert-label-color: #da4453;
@chart-x-axis-tagert-label-color: #da4453;
@chart-y-axis-tagert-label-font-size: 12px;
@chart-x-axis-tagert-label-font-size: 12px;
@chart-y-axis-tagert-line-offset: 190px;
@chart-x-axis-tagert-line-offset: 170px;
@chart-y-axis-line-color: #ccd1d9;
@chart-x-axis-line-color: #ccd1d9;
@chart-y-axis-label-color: #656d78;
@chart-x-axis-label-color: #656d78;
@chart-y-axis-label-font-size: 12px;
@chart-x-axis-label-font-size: 12px;
@chart-primary-bar-color: #656d78;
@chart-secondary-bar-color: #967adc;
@chart-tertiary-bar-color: #3bafda;
@chart-dashed-bar-color: #ccd1d9;
//
// Gradient mixin
// --------------------------------------------------
#gradient {
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color));
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent));
background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color)));
}
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color));
background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent);
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent);
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color)));
}
} // #gradient
/**
* Demo
* --------------------------------------------------
*/
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
background-color: #f5f7fa;
font-family: 'Open Sans', 'Arial', sans-serif;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
}
#chart-1 {
width: 600px;
height: 300px;
}
#chart-2 {
width: 400px;
height: 600px;
}
#chart-3 {
width: 600px;
height: 130px;
}
#chart-4 {
width: 130px;
height: 500px;
}
#chart-5 {
width: 300px;
height: 200px;
}
/**
* Chart container
* --------------------------------------------------
*/
.metric-chart {
position: relative;
margin: 40px auto;
}
/**
* Chart list reset
* --------------------------------------------------
*/
.y-axis-line-list,
.x-axis-line-list,
.y-axis-label-list,
.x-axis-label-list,
.y-axis-bar-list,
.x-axis-bar-list {
margin: 0;
padding: 0;
list-style: none;
&:before,
&:after {
display: table;
content: " ";
&:after {
clear: both;
}
}
}
/**
* X & Y lines
* --------------------------------------------------
*
* Recommended usage:
*
* <div class="{ y|x }-axis"></div>
*
*/
.y-axis,
.x-axis {
position: absolute;
bottom: @chart-bottom-space;
left: @chart-left-space;
}
.y-axis {
top: 0;
right: auto;
width: 1px;
background-color: @chart-y-axis-color;
}
.x-axis {
top: auto;
right: 0;
height: 1px;
background-color: @chart-x-axis-color;
}
/**
* X & Y target lines
* --------------------------------------------------
*
* Recommended usage:
*
* <div class="{ y|x }-axis-target">
* <span class="{ y|x }-axis-target-line">
* <span class="{ y|x }-axis-target-line-label" data-label="{ label }"></span>
* </span>
* </div>
*
*/
.y-axis-target,
.x-axis-target {
position: absolute;
top: 0;
right: 0;
bottom: (@chart-bottom-space + 1);
left: (@chart-left-space + 1);
> .y-axis-target-line,
> .x-axis-target-line {
position: absolute;
}
}
.y-axis-target {
> .y-axis-target-line {
top: 0;
right: auto;
bottom: 0;
left: @chart-y-axis-tagert-line-offset;
width: 0;
border-right: 1px dashed @chart-y-axis-tagert-line-color;
}
}
.y-axis-target-line-label {
position: absolute;
top: -18px;
right: 0;
width: 100px;
text-align: right;
&:after {
content: attr(data-label);
color: @chart-y-axis-tagert-label-color;
font-size: @chart-y-axis-tagert-label-font-size;
line-height: 1;
}
}
.x-axis-target {
> .x-axis-target-line {
top: auto;
right: 0;
bottom: @chart-x-axis-tagert-line-offset;
left: 0;
height: 0;
border-bottom: 1px dashed @chart-x-axis-tagert-line-color;
}
}
.x-axis-target-line-label {
position: absolute;
top: -9px;
right: -50px;
width: 40px;
text-align: left;
&:after {
content: attr(data-label);
color: @chart-y-axis-tagert-label-color;
font-size: @chart-y-axis-tagert-label-font-size;
line-height: 1;
}
}
/**
* X axis background lines
* --------------------------------------------------
*
* Recommended usage:
*
* <ul class="x-axis-bar-list count-{ count }">
* <li class="x-axis-bar-item">
* <span class="x-axis-line"></span>
* </li>
* </ul>
*
*/
.x-axis-line-list {
position: absolute;
top: 0;
right: 10px;
bottom: (@chart-bottom-space + 1);
left: @chart-left-space;
}
.x-axis-line-item {
position: absolute;
top: 0;
right: auto;
bottom: 0;
left: 0;
.count-1 & {
&:nth-of-type(1) { right: ((100% / 1) * 0); left: ((100% / 1) * 0); }
} // .count-1
.count-2 & {
&:nth-of-type(1) { right: ((100% / 2) * 1); left: ((100% / 2) * 0); }
&:nth-of-type(2) { right: ((100% / 2) * 0); left: ((100% / 2) * 1); }
} // .count-2
.count-3 & {
&:nth-of-type(1) { right: ((100% / 3) * 2); left: ((100% / 3) * 0); }
&:nth-of-type(2) { right: ((100% / 3) * 1); left: ((100% / 3) * 1); }
&:nth-of-type(3) { right: ((100% / 3) * 0); left: ((100% / 3) * 2); }
} // .count-3
.count-4 & {
&:nth-of-type(1) { right: ((100% / 4) * 3); left: ((100% / 4) * 0); }
&:nth-of-type(2) { right: ((100% / 4) * 2); left: ((100% / 4) * 1); }
&:nth-of-type(3) { right: ((100% / 4) * 1); left: ((100% / 4) * 2); }
&:nth-of-type(4) { right: ((100% / 4) * 0); left: ((100% / 4) * 3); }
} // .count-4
.count-5 & {
&:nth-of-type(1) { right: ((100% / 5) * 4); left: ((100% / 5) * 0); }
&:nth-of-type(2) { right: ((100% / 5) * 3); left: ((100% / 5) * 1); }
&:nth-of-type(3) { right: ((100% / 5) * 2); left: ((100% / 5) * 2); }
&:nth-of-type(4) { right: ((100% / 5) * 1); left: ((100% / 5) * 3); }
&:nth-of-type(5) { right: ((100% / 5) * 0); left: ((100% / 5) * 4); }
} // .count-5
.count-6 & {
&:nth-of-type(1) { right: ((100% / 6) * 5); left: ((100% / 6) * 0); }
&:nth-of-type(2) { right: ((100% / 6) * 4); left: ((100% / 6) * 1); }
&:nth-of-type(3) { right: ((100% / 6) * 3); left: ((100% / 6) * 2); }
&:nth-of-type(4) { right: ((100% / 6) * 2); left: ((100% / 6) * 3); }
&:nth-of-type(5) { right: ((100% / 6) * 1); left: ((100% / 6) * 4); }
&:nth-of-type(6) { right: ((100% / 6) * 0); left: ((100% / 6) * 5); }
} // .count-6
.count-7 & {
&:nth-of-type(1) { right: ((100% / 7) * 6); left: ((100% / 7) * 0); }
&:nth-of-type(2) { right: ((100% / 7) * 5); left: ((100% / 7) * 1); }
&:nth-of-type(3) { right: ((100% / 7) * 4); left: ((100% / 7) * 2); }
&:nth-of-type(4) { right: ((100% / 7) * 3); left: ((100% / 7) * 3); }
&:nth-of-type(5) { right: ((100% / 7) * 2); left: ((100% / 7) * 4); }
&:nth-of-type(6) { right: ((100% / 7) * 1); left: ((100% / 7) * 5); }
&:nth-of-type(7) { right: ((100% / 7) * 0); left: ((100% / 7) * 6); }
} // .count-7
.count-8 & {
&:nth-of-type(1) { right: ((100% / 8) * 7); left: ((100% / 8) * 0); }
&:nth-of-type(2) { right: ((100% / 8) * 6); left: ((100% / 8) * 1); }
&:nth-of-type(3) { right: ((100% / 8) * 5); left: ((100% / 8) * 2); }
&:nth-of-type(4) { right: ((100% / 8) * 4); left: ((100% / 8) * 3); }
&:nth-of-type(5) { right: ((100% / 8) * 3); left: ((100% / 8) * 4); }
&:nth-of-type(6) { right: ((100% / 8) * 2); left: ((100% / 8) * 5); }
&:nth-of-type(7) { right: ((100% / 8) * 1); left: ((100% / 8) * 6); }
&:nth-of-type(8) { right: ((100% / 8) * 0); left: ((100% / 8) * 7); }
} // .count-8
.count-9 & {
&:nth-of-type(1) { right: ((100% / 9) * 8); left: ((100% / 9) * 0); }
&:nth-of-type(2) { right: ((100% / 9) * 7); left: ((100% / 9) * 1); }
&:nth-of-type(3) { right: ((100% / 9) * 6); left: ((100% / 9) * 2); }
&:nth-of-type(4) { right: ((100% / 9) * 5); left: ((100% / 9) * 3); }
&:nth-of-type(5) { right: ((100% / 9) * 4); left: ((100% / 9) * 4); }
&:nth-of-type(6) { right: ((100% / 9) * 3); left: ((100% / 9) * 5); }
&:nth-of-type(7) { right: ((100% / 9) * 2); left: ((100% / 9) * 6); }
&:nth-of-type(8) { right: ((100% / 9) * 1); left: ((100% / 9) * 7); }
&:nth-of-type(9) { right: ((100% / 9) * 0); left: ((100% / 9) * 8); }
} // .count-9
.count-10 & {
&:nth-of-type(1) { right: ((100% / 10) * 9); left: ((100% / 10) * 0); }
&:nth-of-type(2) { right: ((100% / 10) * 8); left: ((100% / 10) * 1); }
&:nth-of-type(3) { right: ((100% / 10) * 7); left: ((100% / 10) * 2); }
&:nth-of-type(4) { right: ((100% / 10) * 6); left: ((100% / 10) * 3); }
&:nth-of-type(5) { right: ((100% / 10) * 5); left: ((100% / 10) * 4); }
&:nth-of-type(6) { right: ((100% / 10) * 4); left: ((100% / 10) * 5); }
&:nth-of-type(7) { right: ((100% / 10) * 3); left: ((100% / 10) * 6); }
&:nth-of-type(8) { right: ((100% / 10) * 2); left: ((100% / 10) * 7); }
&:nth-of-type(9) { right: ((100% / 10) * 1); left: ((100% / 10) * 8); }
&:nth-of-type(10) { right: ((100% / 10) * 0); left: ((100% / 10) * 9); }
} // .count-10
} // .x-axis-line-item
.x-axis-line {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
border-right: 1px solid @chart-x-axis-line-color;
} // .x-axis-line
/**
* Y axis background lines
* --------------------------------------------------
*
* Recommended usage:
*
* <ul class="y-axis-bar-list count-{ count }">
* <li class="y-axis-bar-item">
* <span class="y-axis-line"></span>
* </li>
* </ul>
*
*/
.y-axis-line-list {
position: absolute;
top: 10px;
right: 0;
bottom: @chart-bottom-space;
left: (@chart-left-space + 1);
}
.y-axis-line-item {
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0;
.count-1 & {
&:nth-of-type(1) { bottom: ((100% / 1) * 1); }
}
.count-2 & {
&:nth-of-type(1) { bottom: ((100% / 2) * 1); }
&:nth-of-type(2) { bottom: ((100% / 2) * 2); }
}
.count-3 & {
&:nth-of-type(1) { bottom: ((100% / 3) * 1); }
&:nth-of-type(2) { bottom: ((100% / 3) * 2); }
&:nth-of-type(3) { bottom: ((100% / 3) * 3); }
}
.count-4 & {
&:nth-of-type(1) { bottom: ((100% / 4) * 1); }
&:nth-of-type(2) { bottom: ((100% / 4) * 2); }
&:nth-of-type(3) { bottom: ((100% / 4) * 3); }
&:nth-of-type(4) { bottom: ((100% / 4) * 4); }
}
.count-5 & {
&:nth-of-type(1) { bottom: ((100% / 5) * 1); }
&:nth-of-type(2) { bottom: ((100% / 5) * 2); }
&:nth-of-type(3) { bottom: ((100% / 5) * 3); }
&:nth-of-type(4) { bottom: ((100% / 5) * 4); }
&:nth-of-type(5) { bottom: ((100% / 5) * 5); }
}
.count-6 & {
&:nth-of-type(1) { bottom: ((100% / 6) * 1); }
&:nth-of-type(2) { bottom: ((100% / 6) * 2); }
&:nth-of-type(3) { bottom: ((100% / 6) * 3); }
&:nth-of-type(4) { bottom: ((100% / 6) * 4); }
&:nth-of-type(5) { bottom: ((100% / 6) * 5); }
&:nth-of-type(6) { bottom: ((100% / 6) * 6); }
}
.count-7 & {
&:nth-of-type(1) { bottom: ((100% / 7) * 1); }
&:nth-of-type(2) { bottom: ((100% / 7) * 2); }
&:nth-of-type(3) { bottom: ((100% / 7) * 3); }
&:nth-of-type(4) { bottom: ((100% / 7) * 4); }
&:nth-of-type(5) { bottom: ((100% / 7) * 5); }
&:nth-of-type(6) { bottom: ((100% / 7) * 6); }
&:nth-of-type(7) { bottom: ((100% / 7) * 7); }
}
.count-8 & {
&:nth-of-type(1) { bottom: ((100% / 8) * 1); }
&:nth-of-type(2) { bottom: ((100% / 8) * 2); }
&:nth-of-type(3) { bottom: ((100% / 8) * 3); }
&:nth-of-type(4) { bottom: ((100% / 8) * 4); }
&:nth-of-type(5) { bottom: ((100% / 8) * 5); }
&:nth-of-type(6) { bottom: ((100% / 8) * 6); }
&:nth-of-type(7) { bottom: ((100% / 8) * 7); }
&:nth-of-type(8) { bottom: ((100% / 8) * 8); }
}
.count-9 & {
&:nth-of-type(1) { bottom: ((100% / 9) * 1); }
&:nth-of-type(2) { bottom: ((100% / 9) * 2); }
&:nth-of-type(3) { bottom: ((100% / 9) * 3); }
&:nth-of-type(4) { bottom: ((100% / 9) * 4); }
&:nth-of-type(5) { bottom: ((100% / 9) * 5); }
&:nth-of-type(6) { bottom: ((100% / 9) * 6); }
&:nth-of-type(7) { bottom: ((100% / 9) * 7); }
&:nth-of-type(8) { bottom: ((100% / 9) * 8); }
&:nth-of-type(9) { bottom: ((100% / 9) * 9); }
}
.count-10 & {
&:nth-of-type(1) { bottom: ((100% / 10) * 1); }
&:nth-of-type(2) { bottom: ((100% / 10) * 2); }
&:nth-of-type(3) { bottom: ((100% / 10) * 3); }
&:nth-of-type(4) { bottom: ((100% / 10) * 4); }
&:nth-of-type(5) { bottom: ((100% / 10) * 5); }
&:nth-of-type(6) { bottom: ((100% / 10) * 6); }
&:nth-of-type(7) { bottom: ((100% / 10) * 7); }
&:nth-of-type(8) { bottom: ((100% / 10) * 8); }
&:nth-of-type(9) { bottom: ((100% / 10) * 9); }
&:nth-of-type(10) { bottom: ((100% / 10) * 10); }
}
} // .y-axis-line-item
.y-axis-line {
display: block;
height: 1px;
background-color: @chart-y-axis-line-color;
} // .x-axis-line
/**
* X axis labels
* --------------------------------------------------
*
* Recommended usage:
*
* <ul class="x-axis-label-list count-{ count }">
* <li class="x-axis-label-item">
* <span class="x-axis-label">{ label }</span>
* </li>
* </ul>
*
*/
.x-axis-label-list {
position: absolute;
top: auto;
right: 5px;
bottom: (@chart-bottom-space - 20);
.h-bar-chart & {
right: 5px;
left: (@chart-left-space + 6);
}
.v-bar-chart & {
right: 10px;
left: @chart-left-space;
}
} // .x-axis-label-list
.x-axis-label-item {
display: block;
float: left;
width: 100%;
.count-1 & { width: (100% / 1); }
.count-2 & { width: (100% / 2); }
.count-3 & { width: (100% / 3); }
.count-4 & { width: (100% / 4); }
.count-5 & { width: (100% / 5); }
.count-6 & { width: (100% / 6); }
.count-7 & { width: (100% / 7); }
.count-8 & { width: (100% / 8); }
.count-9 & { width: (100% / 9); }
.count-10 & { width: (100% / 10); }
} // .x-axis-label-item
.x-axis-label {
position: relative;
display: block;
color: @chart-x-axis-label-color;
text-align: center;
font-size: @chart-y-axis-label-font-size;
line-height: 1;
.h-bar-chart & {
text-align: center;
}
.v-bar-chart & {
text-align: right;
}
} // .x-axis-label
/**
* Y axis labels
* --------------------------------------------------
*
* Recommended usage:
*
* <ul class="y-axis-label-list count-{ count }">
* <li class="y-axis-label-item">
* <span class="y-axis-label">{ label }</span>
* </li>
* </ul>
*
*/
.y-axis-label-list {
position: absolute;
top: 10px;
right: auto;
bottom: @chart-bottom-space;
left: 0;
width: (@chart-left-space - 10);
} // .y-axis-label-list
.y-axis-label-item {
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0;
.count-1 & {
&:nth-of-type(1) { bottom: ((100% / 1) * 1); }
} // .count-1
.count-2 & {
&:nth-of-type(1) { bottom: ((100% / 2) * 1); }
&:nth-of-type(2) { bottom: ((100% / 2) * 2); }
} // .count-2
.count-3 & {
&:nth-of-type(1) { bottom: ((100% / 3) * 1); }
&:nth-of-type(2) { bottom: ((100% / 3) * 2); }
&:nth-of-type(3) { bottom: ((100% / 3) * 3); }
} // .count-3
.count-4 & {
&:nth-of-type(1) { bottom: ((100% / 4) * 1); }
&:nth-of-type(2) { bottom: ((100% / 4) * 2); }
&:nth-of-type(3) { bottom: ((100% / 4) * 3); }
&:nth-of-type(4) { bottom: ((100% / 4) * 4); }
} // .count-4
.count-5 & {
&:nth-of-type(1) { bottom: ((100% / 5) * 1); }
&:nth-of-type(2) { bottom: ((100% / 5) * 2); }
&:nth-of-type(3) { bottom: ((100% / 5) * 3); }
&:nth-of-type(4) { bottom: ((100% / 5) * 4); }
&:nth-of-type(5) { bottom: ((100% / 5) * 5); }
} // .count-5
.count-6 & {
&:nth-of-type(1) { bottom: ((100% / 6) * 1); }
&:nth-of-type(2) { bottom: ((100% / 6) * 2); }
&:nth-of-type(3) { bottom: ((100% / 6) * 3); }
&:nth-of-type(4) { bottom: ((100% / 6) * 4); }
&:nth-of-type(5) { bottom: ((100% / 6) * 5); }
&:nth-of-type(6) { bottom: ((100% / 6) * 6); }
} // .count-6
.count-7 & {
&:nth-of-type(1) { bottom: ((100% / 7) * 1); }
&:nth-of-type(2) { bottom: ((100% / 7) * 2); }
&:nth-of-type(3) { bottom: ((100% / 7) * 3); }
&:nth-of-type(4) { bottom: ((100% / 7) * 4); }
&:nth-of-type(5) { bottom: ((100% / 7) * 5); }
&:nth-of-type(6) { bottom: ((100% / 7) * 6); }
&:nth-of-type(7) { bottom: ((100% / 7) * 7); }
} // .count-7
.count-8 & {
&:nth-of-type(1) { bottom: ((100% / 8) * 1); }
&:nth-of-type(2) { bottom: ((100% / 8) * 2); }
&:nth-of-type(3) { bottom: ((100% / 8) * 3); }
&:nth-of-type(4) { bottom: ((100% / 8) * 4); }
&:nth-of-type(5) { bottom: ((100% / 8) * 5); }
&:nth-of-type(6) { bottom: ((100% / 8) * 6); }
&:nth-of-type(7) { bottom: ((100% / 8) * 7); }
&:nth-of-type(8) { bottom: ((100% / 8) * 8); }
} // .count-8
.count-9 & {
&:nth-of-type(1) { bottom: ((100% / 9) * 1); }
&:nth-of-type(2) { bottom: ((100% / 9) * 2); }
&:nth-of-type(3) { bottom: ((100% / 9) * 3); }
&:nth-of-type(4) { bottom: ((100% / 9) * 4); }
&:nth-of-type(5) { bottom: ((100% / 9) * 5); }
&:nth-of-type(6) { bottom: ((100% / 9) * 6); }
&:nth-of-type(7) { bottom: ((100% / 9) * 7); }
&:nth-of-type(8) { bottom: ((100% / 9) * 8); }
&:nth-of-type(9) { bottom: ((100% / 9) * 9); }
} // .count-9
.count-10 & {
&:nth-of-type(1) { bottom: ((100% / 10) * 1); }
&:nth-of-type(2) { bottom: ((100% / 10) * 2); }
&:nth-of-type(3) { bottom: ((100% / 10) * 3); }
&:nth-of-type(4) { bottom: ((100% / 10) * 4); }
&:nth-of-type(5) { bottom: ((100% / 10) * 5); }
&:nth-of-type(6) { bottom: ((100% / 10) * 6); }
&:nth-of-type(7) { bottom: ((100% / 10) * 7); }
&:nth-of-type(8) { bottom: ((100% / 10) * 8); }
&:nth-of-type(9) { bottom: ((100% / 10) * 9); }
&:nth-of-type(10) { bottom: ((100% / 10) * 10); }
} // .count-10
} // .y-axis-label-item
.y-axis-label {
position: relative;
display: block;
color: @chart-y-axis-label-color;
text-align: right;
font-size: @chart-y-axis-label-font-size;
line-height: 1;
.h-bar-chart & {
bottom: (-@chart-y-axis-label-font-size / 2);
}
.v-bar-chart & {
bottom: (-(@chart-y-axis-label-font-size + (@chart-y-axis-label-font-size / 2)) );
}
} // .y-axis-label
/**
* X axis bars
* --------------------------------------------------
*
* Recommended usage:
*
* <ul class="x-axis-bar-list count-{ count }">
* <li class="x-axis-bar-item { nested-bars }">
* <span class="x-axis-bar { primary|secondary|tertiary }" style="top: { value in % };">
* <span class="x-axis-bar-value" data-value="{ value }"></span>
* </span>
* <span class="x-axis-bullet-bar" style="top: { value in % }"></span>
* <span class="x-axis-bar-target-line" style="bottom: { value in % };"></span>
* </li>
* </ul>
*
*/
.x-axis-bar-list {
position: absolute;
top: 0;
right: 5px;
bottom: (@chart-bottom-space + 1);
left: (@chart-left-space + 6);
}
.x-axis-bar-item {
position: absolute;
top: 0;
right: auto;
bottom: 0;
left: 0;
.count-1 & {
&:nth-of-type(1) { right: ((100% / 1) * 0); left: ((100% / 1) * 0); }
} // .count-1
.count-2 & {
&:nth-of-type(1) { right: ((100% / 2) * 1); left: ((100% / 2) * 0); }
&:nth-of-type(2) { right: ((100% / 2) * 0); left: ((100% / 2) * 1); }
} // .count-2
.count-3 & {
&:nth-of-type(1) { right: ((100% / 3) * 2); left: ((100% / 3) * 0); }
&:nth-of-type(2) { right: ((100% / 3) * 1); left: ((100% / 3) * 1); }
&:nth-of-type(3) { right: ((100% / 3) * 0); left: ((100% / 3) * 2); }
} // .count-3
.count-4 & {
&:nth-of-type(1) { right: ((100% / 4) * 3); left: ((100% / 4) * 0); }
&:nth-of-type(2) { right: ((100% / 4) * 2); left: ((100% / 4) * 1); }
&:nth-of-type(3) { right: ((100% / 4) * 1); left: ((100% / 4) * 2); }
&:nth-of-type(4) { right: ((100% / 4) * 0); left: ((100% / 4) * 3); }
} // .count-4
.count-5 & {
&:nth-of-type(1) { right: ((100% / 5) * 4); left: ((100% / 5) * 0); }
&:nth-of-type(2) { right: ((100% / 5) * 3); left: ((100% / 5) * 1); }
&:nth-of-type(3) { right: ((100% / 5) * 2); left: ((100% / 5) * 2); }
&:nth-of-type(4) { right: ((100% / 5) * 1); left: ((100% / 5) * 3); }
&:nth-of-type(5) { right: ((100% / 5) * 0); left: ((100% / 5) * 4); }
} // .count-5
.count-6 & {
&:nth-of-type(1) { right: ((100% / 6) * 5); left: ((100% / 6) * 0); }
&:nth-of-type(2) { right: ((100% / 6) * 4); left: ((100% / 6) * 1); }
&:nth-of-type(3) { right: ((100% / 6) * 3); left: ((100% / 6) * 2); }
&:nth-of-type(4) { right: ((100% / 6) * 2); left: ((100% / 6) * 3); }
&:nth-of-type(5) { right: ((100% / 6) * 1); left: ((100% / 6) * 4); }
&:nth-of-type(6) { right: ((100% / 6) * 0); left: ((100% / 6) * 5); }
} // .count-6
.count-7 & {
&:nth-of-type(1) { right: ((100% / 7) * 6); left: ((100% / 7) * 0); }
&:nth-of-type(2) { right: ((100% / 7) * 5); left: ((100% / 7) * 1); }
&:nth-of-type(3) { right: ((100% / 7) * 4); left: ((100% / 7) * 2); }
&:nth-of-type(4) { right: ((100% / 7) * 3); left: ((100% / 7) * 3); }
&:nth-of-type(5) { right: ((100% / 7) * 2); left: ((100% / 7) * 4); }
&:nth-of-type(6) { right: ((100% / 7) * 1); left: ((100% / 7) * 5); }
&:nth-of-type(7) { right: ((100% / 7) * 0); left: ((100% / 7) * 6); }
} // .count-7
.count-8 & {
&:nth-of-type(1) { right: ((100% / 8) * 7); left: ((100% / 8) * 0); }
&:nth-of-type(2) { right: ((100% / 8) * 6); left: ((100% / 8) * 1); }
&:nth-of-type(3) { right: ((100% / 8) * 5); left: ((100% / 8) * 2); }
&:nth-of-type(4) { right: ((100% / 8) * 4); left: ((100% / 8) * 3); }
&:nth-of-type(5) { right: ((100% / 8) * 3); left: ((100% / 8) * 4); }
&:nth-of-type(6) { right: ((100% / 8) * 2); left: ((100% / 8) * 5); }
&:nth-of-type(7) { right: ((100% / 8) * 1); left: ((100% / 8) * 6); }
&:nth-of-type(8) { right: ((100% / 8) * 0); left: ((100% / 8) * 7); }
} // .count-8
.count-9 & {
&:nth-of-type(1) { right: ((100% / 9) * 8); left: ((100% / 9) * 0); }
&:nth-of-type(2) { right: ((100% / 9) * 7); left: ((100% / 9) * 1); }
&:nth-of-type(3) { right: ((100% / 9) * 6); left: ((100% / 9) * 2); }
&:nth-of-type(4) { right: ((100% / 9) * 5); left: ((100% / 9) * 3); }
&:nth-of-type(5) { right: ((100% / 9) * 4); left: ((100% / 9) * 4); }
&:nth-of-type(6) { right: ((100% / 9) * 3); left: ((100% / 9) * 5); }
&:nth-of-type(7) { right: ((100% / 9) * 2); left: ((100% / 9) * 6); }
&:nth-of-type(8) { right: ((100% / 9) * 1); left: ((100% / 9) * 7); }
&:nth-of-type(9) { right: ((100% / 9) * 0); left: ((100% / 9) * 8); }
} // .count-9
.count-10 & {
&:nth-of-type(1) { right: ((100% / 10) * 9); left: ((100% / 10) * 0); }
&:nth-of-type(2) { right: ((100% / 10) * 8); left: ((100% / 10) * 1); }
&:nth-of-type(3) { right: ((100% / 10) * 7); left: ((100% / 10) * 2); }
&:nth-of-type(4) { right: ((100% / 10) * 6); left: ((100% / 10) * 3); }
&:nth-of-type(5) { right: ((100% / 10) * 5); left: ((100% / 10) * 4); }
&:nth-of-type(6) { right: ((100% / 10) * 4); left: ((100% / 10) * 5); }
&:nth-of-type(7) { right: ((100% / 10) * 3); left: ((100% / 10) * 6); }
&:nth-of-type(8) { right: ((100% / 10) * 2); left: ((100% / 10) * 7); }
&:nth-of-type(9) { right: ((100% / 10) * 1); left: ((100% / 10) * 8); }
&:nth-of-type(10) { right: ((100% / 10) * 0); left: ((100% / 10) * 9); }
} // .count-10
} // .x-axis-bar-item
.x-axis-bar {
position: absolute;
top: auto;
right: 5px;
bottom: 0;
left: 5px;
display: block;
border: 1px solid transparent;
border-bottom: none;
border-radius: 3px 3px 0 0;
background-color: #4fc1e9;
box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.4);
transition: all 0.15s linear;
&.primary {
border-color: darken(@chart-primary-bar-color, 30%);
#gradient > .horizontal(lighten(@chart-primary-bar-color, 10%), @chart-primary-bar-color);
}
&.secondary {
border-color: darken(@chart-secondary-bar-color, 30%);
#gradient > .horizontal(lighten(@chart-secondary-bar-color, 10%), @chart-secondary-bar-color);
}
&.tertiary {
border-color: darken(@chart-tertiary-bar-color, 30%);
#gradient > .horizontal(lighten(@chart-tertiary-bar-color, 7%), @chart-tertiary-bar-color);
}
&.dashed {
border-color: darken(@chart-dashed-bar-color, 30%);
border-style: dashed;
border-bottom: none;
background-color: #fff;
}
.nested-bars & {
&:nth-of-type(1) { right: 5px; left: 5px; }
&:nth-of-type(2) { right: 10px; left: 10px; }
&:nth-of-type(3) { right: 15px; left: 15px; }
}
} // .x-axis-bar
.x-axis-bar-value {
position: absolute;
top: -5px;
left: 50%;
margin-left: -5px;
width: 10px;
height: 10px;
border: 1px solid transparent;
border-radius: 50%;
box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.4);
cursor: pointer;
transition: all 0.15s linear;
.primary & {
border-color: darken(@chart-primary-bar-color, 30%);
#gradient > .horizontal(lighten(@chart-primary-bar-color, 10%), @chart-primary-bar-color);
}
.secondary & {
border-color: darken(@chart-secondary-bar-color, 30%);
#gradient > .horizontal(lighten(@chart-secondary-bar-color, 10%), @chart-secondary-bar-color);
}
.tertiary & {
border-color: darken(@chart-tertiary-bar-color, 30%);
#gradient > .horizontal(lighten(@chart-tertiary-bar-color, 7%), @chart-tertiary-bar-color);
}
.dashed & {
border-color: darken(@chart-dashed-bar-color, 30%);
background-color: #fff;
}
&:hover,
&:focus {
&:after,
&:before {
visibility: visible;
opacity: 1;
transition: all 0.15s linear;
}
}
&:after {
position: absolute;
top: -25px;
left: 50%;
z-index: 200;
visibility: hidden;
margin-left: -20px;
padding: 2px 0;
width: 40px;
border-radius: 3px;
background-color: #434a54;
color: #fff;
content: attr(data-value);
text-align: center;
font-weight: bold;
font-size: 12px;
line-height: (18/12);
opacity: 0;
}
&:before {
position: absolute;
top: -3px;
left: 50%;
z-index: 200;
visibility: hidden;
margin-left: -6px;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #434a54;
content: '';
opacity: 0;
}
} // .x-axis-bar-value
.x-axis-bullet-bar {
position: absolute;
top: 0;
right: 15px;
bottom: 0;
left: 15px;
border: 1px solid rgba(0,0,0,0.8);
border-bottom: none;
border-radius: 3px 3px 0 0;
background-color: rgba(0,0,0,0.6);
box-shadow: inset 0px 0px 6px 1px rgba(0, 0, 0, 0.4);
transition: all 0.15s linear;
} // .x-axis-bullet-bar
.x-axis-bar-target-line {
position: absolute;
top: auto;
right: 2px;
bottom: 0;
left: 2px;
height: 1px;
background-color: @chart-x-axis-bar-tagert-line-color;
} // .x-axis-bar-target-line
/**
* Y axis bars
* --------------------------------------------------
*
* Recommended usage:
*
* <ul class="y-axis-bar-list count-{ count }">
* <li class="y-axis-bar-item { nested-bars }">
* <span class="y-axis-bar { primary|secondary|tertiary }" style="right: { value in % };">
* <span class="y-axis-bar-value" data-value="{ value }"></span>
* </span>
* <span class="y-axis-bullet-bar" style="right: { value in % }"></span>
* <span class="y-axis-bar-target-line" style="left: { value in % };"></span>
* </li>
* </ul>
*
*/
.y-axis-bar-list {
position: absolute;
top: 5px;
right: 0;
bottom: (@chart-bottom-space + 6);
left: (@chart-left-space + 1);
}
.y-axis-bar-item {
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
.count-1 & {
&:nth-of-type(1) { top: ((100% / 1) * 0); bottom: ((100% / 1) * 0); }
} // .count-1
.count-2 & {
&:nth-of-type(1) { top: ((100% / 2) * 0); bottom: ((100% / 2) * 1); }
&:nth-of-type(2) { top: ((100% / 2) * 1); bottom: ((100% / 2) * 0); }
} // .count-2
.count-3 & {
&:nth-of-type(1) { top: ((100% / 3) * 0); bottom: ((100% / 3) * 2); }
&:nth-of-type(2) { top: ((100% / 3) * 1); bottom: ((100% / 3) * 1); }
&:nth-of-type(3) { top: ((100% / 3) * 2); bottom: ((100% / 3) * 0); }
} // .count-3
.count-4 & {
&:nth-of-type(1) { top: ((100% / 4) * 0); bottom: ((100% / 4) * 3); }
&:nth-of-type(2) { top: ((100% / 4) * 1); bottom: ((100% / 4) * 2); }
&:nth-of-type(3) { top: ((100% / 4) * 2); bottom: ((100% / 4) * 1); }
&:nth-of-type(4) { top: ((100% / 4) * 3); bottom: ((100% / 4) * 0); }
} // .count-4
.count-5 & {
&:nth-of-type(1) { top: ((100% / 5) * 0); bottom: ((100% / 5) * 4); }
&:nth-of-type(2) { top: ((100% / 5) * 1); bottom: ((100% / 5) * 3); }
&:nth-of-type(3) { top: ((100% / 5) * 2); bottom: ((100% / 5) * 2); }
&:nth-of-type(4) { top: ((100% / 5) * 3); bottom: ((100% / 5) * 1); }
&:nth-of-type(5) { top: ((100% / 5) * 4); bottom: ((100% / 5) * 0); }
} // .count-5
.count-6 & {
&:nth-of-type(1) { top: ((100% / 6) * 0); bottom: ((100% / 6) * 5); }
&:nth-of-type(2) { top: ((100% / 6) * 1); bottom: ((100% / 6) * 4); }
&:nth-of-type(3) { top: ((100% / 6) * 2); bottom: ((100% / 6) * 3); }
&:nth-of-type(4) { top: ((100% / 6) * 3); bottom: ((100% / 6) * 2); }
&:nth-of-type(5) { top: ((100% / 6) * 4); bottom: ((100% / 6) * 1); }
&:nth-of-type(6) { top: ((100% / 6) * 5); bottom: ((100% / 6) * 0); }
} // .count-6
.count-7 & {
&:nth-of-type(1) { top: ((100% / 7) * 0); bottom: ((100% / 7) * 6); }
&:nth-of-type(2) { top: ((100% / 7) * 1); bottom: ((100% / 7) * 5); }
&:nth-of-type(3) { top: ((100% / 7) * 2); bottom: ((100% / 7) * 4); }
&:nth-of-type(4) { top: ((100% / 7) * 3); bottom: ((100% / 7) * 3); }
&:nth-of-type(5) { top: ((100% / 7) * 4); bottom: ((100% / 7) * 2); }
&:nth-of-type(6) { top: ((100% / 7) * 5); bottom: ((100% / 7) * 1); }
&:nth-of-type(7) { top: ((100% / 7) * 6); bottom: ((100% / 7) * 0); }
} // .count-7
.count-8 & {
&:nth-of-type(1) { top: ((100% / 8) * 0); bottom: ((100% / 8) * 7); }
&:nth-of-type(2) { top: ((100% / 8) * 1); bottom: ((100% / 8) * 6); }
&:nth-of-type(3) { top: ((100% / 8) * 2); bottom: ((100% / 8) * 5); }
&:nth-of-type(4) { top: ((100% / 8) * 3); bottom: ((100% / 8) * 4); }
&:nth-of-type(5) { top: ((100% / 8) * 4); bottom: ((100% / 8) * 3); }
&:nth-of-type(6) { top: ((100% / 8) * 5); bottom: ((100% / 8) * 2); }
&:nth-of-type(7) { top: ((100% / 8) * 6); bottom: ((100% / 8) * 1); }
&:nth-of-type(8) { top: ((100% / 8) * 7); bottom: ((100% / 8) * 0); }
} // .count-8
.count-9 & {
&:nth-of-type(1) { top: ((100% / 9) * 0); bottom: ((100% / 9) * 8); }
&:nth-of-type(2) { top: ((100% / 9) * 1); bottom: ((100% / 9) * 7); }
&:nth-of-type(3) { top: ((100% / 9) * 2); bottom: ((100% / 9) * 6); }
&:nth-of-type(4) { top: ((100% / 9) * 3); bottom: ((100% / 9) * 5); }
&:nth-of-type(5) { top: ((100% / 9) * 4); bottom: ((100% / 9) * 4); }
&:nth-of-type(6) { top: ((100% / 9) * 5); bottom: ((100% / 9) * 3); }
&:nth-of-type(7) { top: ((100% / 9) * 6); bottom: ((100% / 9) * 2); }
&:nth-of-type(8) { top: ((100% / 9) * 7); bottom: ((100% / 9) * 1); }
&:nth-of-type(9) { top: ((100% / 9) * 8); bottom: ((100% / 9) * 0); }
} // .count-9
.count-10 & {
&:nth-of-type(1) { top: ((100% / 10) * 0); bottom: ((100% / 10) * 9); }
&:nth-of-type(2) { top: ((100% / 10) * 1); bottom: ((100% / 10) * 8); }
&:nth-of-type(3) { top: ((100% / 10) * 2); bottom: ((100% / 10) * 7); }
&:nth-of-type(4) { top: ((100% / 10) * 3); bottom: ((100% / 10) * 6); }
&:nth-of-type(5) { top: ((100% / 10) * 4); bottom: ((100% / 10) * 5); }
&:nth-of-type(6) { top: ((100% / 10) * 5); bottom: ((100% / 10) * 4); }
&:nth-of-type(7) { top: ((100% / 10) * 6); bottom: ((100% / 10) * 3); }
&:nth-of-type(8) { top: ((100% / 10) * 7); bottom: ((100% / 10) * 2); }
&:nth-of-type(9) { top: ((100% / 10) * 8); bottom: ((100% / 10) * 1); }
&:nth-of-type(10) { top: ((100% / 10) * 9); bottom: ((100% / 10) * 0); }
} // .count-10
} // .y-axis-bar-item
.y-axis-bar {
position: absolute;
top: 5px;
right: auto;
bottom: 5px;
left: 0;
display: block;
border: 1px solid transparent;
border-left: none;
border-radius: 0 3px 3px 0;
background-color: #4fc1e9;
box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.4);
transition: all 0.15s linear;
&.primary {
border-color: darken(@chart-primary-bar-color, 30%);
#gradient > .vertical(lighten(#656d78, 10%), @chart-primary-bar-color);
}
&.secondary {
border-color: darken(@chart-secondary-bar-color, 30%);
#gradient > .vertical(lighten(@chart-secondary-bar-color, 10%), @chart-secondary-bar-color);
}
&.tertiary {
border-color: darken(@chart-tertiary-bar-color, 30%);
#gradient > .vertical(lighten(@chart-tertiary-bar-color, 7%), @chart-tertiary-bar-color);
}
&.dashed {
border-color: darken(@chart-dashed-bar-color, 30%);
border-style: dashed;
border-left: none;
background-color: #fff;
}
.nested-bars & {
&:nth-of-type(1) { top: 5px; bottom: 5px; }
&:nth-of-type(2) { top: 10px; bottom: 10px; }
&:nth-of-type(3) { top: 15px; bottom: 15px; }
}
} // .y-axis-bar
.y-axis-bar-value {
position: absolute;
top: 50%;
right: -5px;
margin-top: -5px;
width: 10px;
height: 10px;
border: 1px solid transparent;
border-radius: 50%;
box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.4);
cursor: pointer;
transition: all 0.15s linear;
.primary & {
border-color: darken(@chart-primary-bar-color, 30%);
#gradient > .vertical(lighten(@chart-primary-bar-color, 10%), @chart-primary-bar-color);
}
.secondary > & {
border-color: darken(@chart-secondary-bar-color, 30%);
#gradient > .vertical(lighten(@chart-secondary-bar-color, 10%), @chart-secondary-bar-color);
}
.tertiary > & {
border-color: darken(@chart-tertiary-bar-color, 30%);
#gradient > .vertical(lighten(@chart-tertiary-bar-color, 7%), @chart-tertiary-bar-color);
}
.dashed & {
border-color: darken(@chart-dashed-bar-color, 30%);
background-color: #fff;
}
&:hover,
&:focus {
&:after,
&:before {
visibility: visible;
opacity: 1;
transition: all 0.15s linear;
}
}
&:after {
position: absolute;
top: 50%;
right: -43px;
z-index: 200;
visibility: hidden;
margin-top: -11px;
padding: 2px 0;
width: 40px;
border-radius: 3px;
background-color: #434a54;
color: #fff;
content: attr(data-value);
text-align: center;
font-weight: bold;
font-size: 12px;
line-height: (18/12);
opacity: 0;
}
&:before {
position: absolute;
top: 50%;
right: -3px;
z-index: 200;
visibility: hidden;
margin-top: -6px;
width: 0;
height: 0;
border: 6px solid transparent;
border-right-color: #434a54;
content: '';
opacity: 0;
}
} // .y-axis-bar-value
.y-axis-bullet-bar {
position: absolute;
top: 15px;
right: 0;
bottom: 15px;
left: 0;
border: 1px solid rgba(0,0,0,0.8);
border-left: none;
border-radius: 0 3px 3px 0;
background-color: rgba(0,0,0,0.6);
box-shadow:
inset 0 3px 5px rgba(0,0,0,0.3),
0 1px 0 0 rgba(255,255,255,0.3);
transition: all 0.15s linear;
} // .y-axis-bar-target-line
.y-axis-bar-target-line {
position: absolute;
top: 2px;
right: auto;
bottom: 2px;
left: 0;
width: 1px;
background-color: @chart-y-axis-bar-tagert-line-color;
} // .y-axis-bar-target-line
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.