---
layout: app/app-layout
pagename: charts-morris
---
<div class="title-block">
  <h3 class="title">
    Charts Morris 
  </h3>
  <p class="title-description">
    List of sample charts with custom colors
  </p>
</div>

<section class="section">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-block">

          <div class="card-title-block">
            <h3 class="title">
              Area Chart Example
            </h3>
          </div>

          <section class="example">

            <div id="morris-area-chart"></div>

          </section>

        </div>
      </div>
    </div>


    <div class="col-md-6">
      <div class="card">
        <div class="card-block">

          <div class="card-title-block">
            <h3 class="title">
              Bar Chart Example
            </h3>
          </div>

          <section class="example">

            <div id="morris-bar-chart"></div>

          </section>

        </div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="row">

    <div class="col-md-6">
      <div class="card">
        <div class="card-block">

          <div class="card-title-block">
            <h3 class="title">
              Line Chart Example
            </h3>
          </div>

          <section class="example">

            <div id="morris-line-chart"></div>

          </section>

        </div>
      </div>
    </div>


    <div class="col-md-6">
      <div class="card">
        <div class="card-block">

          <div class="card-title-block">
            <h3 class="title">
              Donut Chart Example
            </h3>
          </div>

          <section class="example">
            <div id="morris-donut-chart"></div>
          </section>

        </div>
      </div>
    </div>

  </div>
</section>

<section class="section">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-block">
          <div class="card-title-block">
            <h3 class="title">
              Simple one line Example
            </h3>
          </div>

          <section class="example">

            <div id="morris-one-line-chart"></div>

          </section>
        </div>
      </div>
    </div>
  </div>
</section>