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:
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
<div class= "chart" >
<line-chart
:height= "350"
:chart-data= "salesChart.chartData"
>
</line-chart>
</div>
Bars Table Example
<div class= "chart" >
<bar-chart :chart-data= "ordersChart.chartData"
:height= "350"
/>
</div>
Points Table Example PRO
<div class= "chart" >
<line-chart
:height= "350"
:chart-data= "dotsChart.chartData"
:extra-options= "dotsChart.extraOptions" >
</line-chart>
</div>
Doughnut Table Example PRO
<div class= "chart-area" >
<doughnut-chart
:height= "350"
:chart-data= "doughnutChart.chartData"
:extra-options= "doughnutChart.extraOptions"
>
</doughnut-chart>
</div>
Pie Table Example PRO
<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
<div class= "chart-area" >
<bar-chart
:height= "350"
:chart-data= "barChartStacked.chartData"
:extra-options= "barChartStacked.extraOptions"
>
</bar-chart>
</div>
Dark card with chart Example
<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
{}