# Charts

Simple yet flexible Javascript charting for designers & developers

## Usage

In order to use this charts on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

    <script src="/argon/vendor/chart.js/dist/Chart.min.js"></script>
    <script src="/argon/vendor/chart.js/dist/Chart.extension.js"></script>

After that, simply copy one of the code examples demonstrated below and include it in your page.

## Examples

##### Line chart

    <!--* Card header *-->

    <!--* Card body *-->

    <!--* Card init *-->
    <div class="card">

        <!-- Card header -->
        <div class="card-header">

    <!-- Title -->

    <h5 class="h3 mb-0">Line chart</h5>

        </div>

        <!-- Card body -->
        <div class="card-body">

    <div class="chart">
        <!-- Chart wrapper -->
        <canvas id="chart-line" class="chart-canvas"></canvas>
    </div>

        </div>

    </div>

### Points

##### Bars chart

    <!--* Card header *-->

    <!--* Card body *-->

    <!--* Card init *-->
    <div class="card">

        <!-- Card header -->
        <div class="card-header">

    <!-- Title -->

    <h5 class="h3 mb-0">Bars chart</h5>

        </div>

        <!-- Card body -->
        <div class="card-body">

    <div class="chart">
        <!-- Chart wrapper -->
        <canvas id="chart-bars" class="chart-canvas"></canvas>
    </div>

        </div>

    </div>

### Points

##### Points chart

    <!--* Card header *-->

    <!--* Card body *-->

    <!--* Card init *-->
    <div class="card">

        <!-- Card header -->
        <div class="card-header">

    <!-- Title -->

    <h5 class="h3 mb-0">Points chart</h5>

        </div>

        <!-- Card body -->
        <div class="card-body">

    <div class="chart">
        <!-- Chart wrapper -->
        <canvas id="chart-points" class="chart-canvas"></canvas>
    </div>

        </div>

    </div>

### Doughnut

##### Doughnut chart

    <!--* Card header *-->

    <!--* Card body *-->

    <!--* Card init *-->
    <div class="card">

        <!-- Card header -->
        <div class="card-header">

    <!-- Title -->

    <h5 class="h3 mb-0">Doughnut chart</h5>

        </div>

        <!-- Card body -->
        <div class="card-body">

    <div class="chart">
        <!-- Chart wrapper -->
        <canvas id="chart-doughnut" class="chart-canvas"></canvas>
    </div>

        </div>

    </div>

### Pie

##### Pie chart

    <!--* Card header *-->

    <!--* Card body *-->

    <!--* Card init *-->
    <div class="card">

        <!-- Card header -->
        <div class="card-header">

    <!-- Title -->

    <h5 class="h3 mb-0">Pie chart</h5>

        </div>

        <!-- Card body -->
        <div class="card-body">

    <div class="chart">
        <!-- Chart wrapper -->
        <canvas id="chart-pie" class="chart-canvas"></canvas>
    </div>

        </div>

    </div>

### Bar stacked

##### Bar stacked chart

    <!--* Card header *-->

    <!--* Card body *-->

    <!--* Card init *-->
    <div class="card">

        <!-- Card header -->
        <div class="card-header">

    <!-- Title -->

    <h5 class="h3 mb-0">Bar stacked chart</h5>

        </div>

        <!-- Card body -->
        <div class="card-body">

    <div class="chart">
        <!-- Chart wrapper -->
        <canvas id="chart-bar-stacked" class="chart-canvas"></canvas>
    </div>

        </div>

    </div>

## Dark card with chart

    <div class="card bg-default">
        <div class="card-body">
            <div class="chart">
                <!-- Chart wrapper -->
                <canvas id="chart-sales" class="chart-canvas"></canvas>
            </div>
        </div>
    </div>