<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Chart.js</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Graphs</a>
            </li>
            <li class="active">
                <strong>Chart</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight" ng-controller="chartJsCtrl as chart">
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Line Chart Example
                        <small>With custom colors.</small>
                    </h5>
                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                    <div>
                        <canvas linechart options="chart.lineOptions" data="chart.lineData" height="140" responsive=true ></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Bar Chart Example</h5>
                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                        <div>
                            <canvas barchart options="chart.barOptions" data="chart.barData" height="140" responsive=true ></canvas>
                        </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Polar Area</h5>

                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                    <div>
                        <canvas polarchart options="chart.polarOptions" data="chart.polarData" height="140" responsive=true></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Pie </h5>

                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                    <div>
                        <canvas doughnutchart options="chart.doughnutOptions" data="chart.doughnutData" height="140" responsive=true></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Radar Chart Example</h5>
                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                    <div>
                        <canvas radarchart options="chart.radarOptions" data="chart.radarData" responsive=true></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>