Chart.js - v2.9.3

The Chart.js charts refer to a graphical representation of data.
Keep reading these 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:

Copy

import DoughnutChart from '@/components/Charts/DoughnutChart';
import LineChart from '@/components/Charts/LineChart';
import BarChart from '@/components/Charts/BarChart';
import PieChart from '@/components/Charts/PieChart';
import * as chartConfigs from '@/components/Charts/config';


export default {
  components: {
    DoughnutChart,
    LineChart,
    BarChart,
    PieChart
  }
}

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

Examples

Line chart

Copy

<div class="chart">
  <line-chart
    :height="350"
    :chart-data="salesChart.chartData"
  >
  </line-chart>
</div>

Bars Table Example

Bars chart

Copy

<div class="chart">
  <bar-chart :chart-data="ordersChart.chartData"
             :height="350"
  />
</div>

Points Table Example PRO

Points chart

Copy

<div class="chart">
  <line-chart
    :height="350"
    :chart-data="dotsChart.chartData"
    :extra-options="dotsChart.extraOptions">
  </line-chart>
</div>

Doughnut Table Example PRO

Doughnut chart

Copy

<div class="chart-area">
  <doughnut-chart
    :height="350"
    :chart-data="doughnutChart.chartData"
    :extra-options="doughnutChart.extraOptions"
  >
  </doughnut-chart>
</div>

Pie Table Example PRO

Pie chart

Copy

<div class="chart">
  <pie-chart
    id="pie-chart"
    :height="350"
    :chart-data="pieChart.chartData"
    :extra-options="pieChart.extraOptions"
  >
  </pie-chart>
</div>

Bar stacked Table Example PRO

Bar stacked chart

Copy

<div class="chart-area">
  <bar-chart
    :height="350"
    :chart-data="barChartStacked.chartData"
    :extra-options="barChartStacked.extraOptions"
  >
  </bar-chart>
</div>

Dark card with chart Example

Copy

<b-card class="bg-default">
  <div class="chart">
    <line-chart
      :height="350"
      :chart-data="salesChart.chartData"
    >
    </line-chart>
  </div>
</b-card>

LineChart Props

PROP NAME	TYPE	DEFAULT	DESCRIPTION
extraOptions	Object	{}

BarChart Props

PROP NAME	TYPE	DEFAULT	DESCRIPTION
extraOptions	Object	{}

PieCharts Props

PROP NAME	TYPE	DEFAULT	DESCRIPTION
extraOptions	Object	{}

DoughnutChart Props

PROP NAME	TYPE	DEFAULT	DESCRIPTION
extraOptions	Object	{}