<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.