<div class="l-section">
<div class="l-container">
<div class="g-row">
<div class="g g-10@md g-9@lg g-8@xl">
<h3 class="u-3">
Lorem ipsum
</h3>
</div>
</div>
</div>
<div class="slider l-container js-slider is-onFirst" data-scroll-amount="4">
<a href="#" data-direction="prev" class="btn btn-round btn-toggle slider_control slider_control-prev js-slider-control">
<i class="i i-arrow-left u-pull-top-4"></i>
</a>
<div class="slider_viewport">
<div class="slider_scroller js-slider-scroller">
<div class="slider_inner barChart js-slider-inner">
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
19
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 35%">
<div class="barChart_val ">
1.56%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
20
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 40%">
<div class="barChart_val ">
2.78%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
21
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 60%">
<div class="barChart_val ">
3%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
22
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 70%">
<div class="barChart_val ">
3.5%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
23
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 80%">
<div class="barChart_val ">
3.89%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
24
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 45%">
<div class="barChart_val ">
1.4%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
25
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 40%">
<div class="barChart_val ">
1.21%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
26
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 15%">
<div class="barChart_val barChart_val-outside">
0.58%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
27
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 35%">
<div class="barChart_val ">
1.56%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
28
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 40%">
<div class="barChart_val ">
2.78%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
29
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 60%">
<div class="barChart_val ">
3%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
30
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 70%">
<div class="barChart_val ">
3.5%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
31
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 80%">
<div class="barChart_val ">
3.89%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
32
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 45%">
<div class="barChart_val ">
1.4%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
33
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 40%">
<div class="barChart_val ">
1.21%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
34
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 15%">
<div class="barChart_val barChart_val-outside">
0.58%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
35
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 35%">
<div class="barChart_val ">
1.56%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
36
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 40%">
<div class="barChart_val ">
2.78%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
37
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 60%">
<div class="barChart_val ">
3%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
38
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 70%">
<div class="barChart_val ">
3.5%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
39
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 80%">
<div class="barChart_val ">
3.89%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
40
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 45%">
<div class="barChart_val ">
1.4%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
41
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 40%">
<div class="barChart_val ">
1.21%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
<div class="slider_item barChart_item js-slider-item">
<div class="barChart_key">
42
</div>
<div class="barChart_bar">
<div class="barChart_barInner u-bg-theme" style="height: 15%">
<div class="barChart_val barChart_val-outside">
0.58%
</div>
</div>
</div>
</div>
<!--
-->
<!--
-->
</div>
</div>
</div>
<a href="#" data-direction="next" class="btn btn-round btn-toggle slider_control slider_control-next js-slider-control">
<i class="i i-arrow-right u-pull-top-4"></i>
</a>
</div>
<div class="l-container">
<p>In feugiat mi vulputate ultricies pharetra. Sed hendrerit fringilla viverra. Morbi bibendum ullamcorper odio sit amet auctor. Curabitur rutrum hendrerit bibendum.</p>
</div>
</div>
<div class="l-section">
<div class="l-container">
<div class="g-row">
<div class="g g-10@md g-9@lg g-8@xl">
<h3 class="u-3">
{{label}}
</h3>
</div>
</div>
</div>
<div class="slider l-container js-slider is-onFirst" data-scroll-amount="4">
<a
href="#"
data-direction="prev"
class="btn btn-round btn-toggle slider_control slider_control-prev js-slider-control">
<i class="i i-arrow-left u-pull-top-4"></i>
</a>
<div class="slider_viewport">
<div class="slider_scroller js-slider-scroller">
{{> '@bar-chart' }}
</div>
</div>
<a
href="#"
data-direction="next"
class="btn btn-round btn-toggle slider_control slider_control-next js-slider-control">
<i class="i i-arrow-right u-pull-top-4"></i>
</a>
</div>
<div class="l-container">
<p>{{text}}</p>
</div>
</div>
{
"label": "Lorem ipsum",
"text": "In feugiat mi vulputate ultricies pharetra. Sed hendrerit fringilla viverra. Morbi bibendum ullamcorper odio sit amet auctor. Curabitur rutrum hendrerit bibendum.",
"items": [
{
"mark": "19",
"high": true,
"height": 35,
"percentage": 1.56
},
{
"mark": "20",
"high": true,
"height": 40,
"percentage": 2.78
},
{
"mark": "21",
"high": true,
"height": 60,
"percentage": 3
},
{
"mark": "22",
"high": true,
"height": 70,
"percentage": 3.5
},
{
"mark": "23",
"high": true,
"height": 80,
"percentage": 3.89
},
{
"mark": "24",
"high": true,
"height": 45,
"percentage": 1.4
},
{
"mark": "25",
"high": true,
"height": 40,
"percentage": 1.21
},
{
"mark": "26",
"high": null,
"height": 15,
"percentage": 0.58
},
{
"mark": "27",
"high": true,
"height": 35,
"percentage": 1.56
},
{
"mark": "28",
"high": true,
"height": 40,
"percentage": 2.78
},
{
"mark": "29",
"high": true,
"height": 60,
"percentage": 3
},
{
"mark": "30",
"high": true,
"height": 70,
"percentage": 3.5
},
{
"mark": "31",
"high": true,
"height": 80,
"percentage": 3.89
},
{
"mark": "32",
"high": true,
"height": 45,
"percentage": 1.4
},
{
"mark": "33",
"high": true,
"height": 40,
"percentage": 1.21
},
{
"mark": "34",
"high": null,
"height": 15,
"percentage": 0.58
},
{
"mark": "35",
"high": true,
"height": 35,
"percentage": 1.56
},
{
"mark": "36",
"high": true,
"height": 40,
"percentage": 2.78
},
{
"mark": "37",
"high": true,
"height": 60,
"percentage": 3
},
{
"mark": "38",
"high": true,
"height": 70,
"percentage": 3.5
},
{
"mark": "39",
"high": true,
"height": 80,
"percentage": 3.89
},
{
"mark": "40",
"high": true,
"height": 45,
"percentage": 1.4
},
{
"mark": "41",
"high": true,
"height": 40,
"percentage": 1.21
},
{
"mark": "42",
"high": null,
"height": 15,
"percentage": 0.58
}
]
}
There are no notes for this item.