<app-page-header title="ECharts" title1="ECharts" activeitem="ECharts"></app-page-header>

     <!-- Start::row-1 -->
     <div class="grid grid-cols-12 gap-x-6">
      <div class="col-span-12 xl:col-span-6">
        <div class="box">
          <div class="box-header">
            <h5 class="box-title">
              Basic Line Chart
            </h5>
          </div>
          <div class="box-body">
            <div id="echart-basic-line" class="echart-charts">
              <div echarts class="ht-300" [options]="echartHorizontalLineBarChart"></div>

            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 xl:col-span-6">
        <div class="box">
          <div class="box-header">
            <h5 class="box-title">
              Smoothed Line Chart
            </h5>
          </div>
          <div class="box-body">
            <div id="echart-smoothed-line" class="echart-charts">
              <div echarts class="ht-300" [options]="dataAttributes2"></div>

            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 xl:col-span-6">
        <div class="box">
          <div class="box-header">
            <h5 class="box-title">
              Bar Chart
            </h5>
          </div>
          <div class="box-body">
            <div id="echart-basic-area" class="echart-charts">
              <div echarts class="ht-100" [options]="echartHorizontalLineChart"></div>

            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 xl:col-span-6">
        <div class="box">
          <div class="box-header">
            <h5 class="box-title">
              Horizontal Bar Chart
            </h5>
          </div>
          <div class="box-body">
            <div id="echart-stacked-line" class="echart-charts">
              <div echarts class="ht-100" [options]="echartStackedBarChart"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 xl:col-span-6">
        <div class="box">
          <div class="box-header">
            <h5 class="box-title">
              Stacked Bar Chart
            </h5>
          </div>
          <div class="box-body">
            <div id="echart-stacked-area" class="echart-charts">
              <div echarts class="ht-100" [options]="echartLineOption"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 xl:col-span-6">
        <div class="box">
          <div class="box-header">
            <h5 class="box-title">
              Step Line Chart
            </h5>
          </div>
          <div class="box-body">
            <div id="echart-step-line" class="echart-charts">
              <div echarts class="ht-300" [options]=" echartHoriStackedBarChart"></div>

            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 xl:col-span-6">
        <div class="box">
          <div class="box-header">
            <h5 class="box-title">
              Basic Bar Chart
            </h5>
          </div>
          <div class="box-body">
            <div id="echart-bar-basic" class="echart-charts">
              <div echarts class="ht-400" [options]="dataAttributes3"></div>
            </div>
          </div>
        </div>
      </div>
   
    </div>
    <!-- End::row-1 -->