# ChartJS

Modern & interactive Javascript charts to create beautiful representation of your data.

Official Documentation

## Usage

### JS

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

    <script src="../../assets/libs/chart.js/dist/Chart.min.js"></script>
    <script src="../../assets/libs/chart.js/extensions/Chart.rounded.js"></script>

### Initialization

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

## Examples

### Tasks

Show code

    <div class="chart">
        <canvas id="chart-tasks" class="chart-canvas"></canvas>
    </div>

### Sales

Show code

    <div class="chart">
        <canvas id="chart-sales" class="chart-canvas"></canvas>
    </div>

### Hours

Show code

    <div class="chart">
        <canvas id="chart-hours" class="chart-canvas"></canvas>
    </div>

### Points

Show code

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

### Line

Show code

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

### Doughnut

Show code

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

### Pie

Show code

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