diff --git a/src/views/chart/BarChartDemo.vue b/src/views/chart/BarChartDemo.vue
index 73484f85e..059bfcab1 100644
--- a/src/views/chart/BarChartDemo.vue
+++ b/src/views/chart/BarChartDemo.vue
@@ -20,10 +20,14 @@
Stacked
+
+
diff --git a/src/views/chart/BarChartDoc.vue b/src/views/chart/BarChartDoc.vue
new file mode 100644
index 000000000..5800da047
--- /dev/null
+++ b/src/views/chart/BarChartDoc.vue
@@ -0,0 +1,181 @@
+
+
+
+
+
+
+<template>
+ <div>
+ <div class="content-section introduction">
+ <div class="feature-intro">
+ <h1>BarChart</h1>
+ <p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
+ </div>
+ </div>
+
+ <div class="content-section implementation">
+ <h3 class="vertical">Vertical</h3>
+ <Chart type="bar" :data="basicData" />
+
+ <h3>Horizontal</h3>
+ <Chart type="horizontalBar" :data="basicData" />
+
+ <h3>Multi Axis</h3>
+ <Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
+
+ <h3>Stacked</h3>
+ <Chart type="bar" :data="stackedData" :options="stackedOptions"/>
+ </div>
+ </div>
+</template>
+
+
+
+
+export default {
+ data() {
+ return {
+ basicData: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: '#42A5F5',
+ data: [65, 59, 80, 81, 56, 55, 40]
+ },
+ {
+ label: 'My Second dataset',
+ backgroundColor: '#9CCC65',
+ data: [28, 48, 40, 19, 86, 27, 90]
+ }
+ ]
+ },
+ multiAxisData: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'Dataset 1',
+ backgroundColor: [
+ '#EC407A',
+ '#AB47BC',
+ '#42A5F5',
+ '#7E57C2',
+ '#66BB6A',
+ '#FFCA28',
+ '#26A69A'
+ ],
+ yAxisID: 'y-axis-1',
+ data: [65, 59, 80, 81, 56, 55, 10]
+ },
+ {
+ label: 'Dataset 2',
+ backgroundColor: '#78909C',
+ yAxisID: 'y-axis-2',
+ data: [28, 48, 40, 19, 86, 27, 90]
+ }
+ ]
+ },
+ multiAxisOptions: {
+ responsive: true,
+ tooltips: {
+ mode: 'index',
+ intersect: true
+ },
+ scales: {
+ yAxes: [
+ {
+ type: 'linear',
+ display: true,
+ position: 'left',
+ id: 'y-axis-1',
+ ticks: {
+ min: 0,
+ max: 100
+ }
+ },
+ {
+ type: 'linear',
+ display: true,
+ position: 'right',
+ id: 'y-axis-2',
+ gridLines: {
+ drawOnChartArea: false
+ },
+ ticks: {
+ min: 0,
+ max: 100
+ }
+ }
+ ]
+ }
+ },
+ stackedData: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ type: 'bar',
+ label: 'Dataset 1',
+ backgroundColor: '#66BB6A',
+ data: [
+ 50,
+ 25,
+ 12,
+ 48,
+ 90,
+ 76,
+ 42
+ ]
+ },
+ {
+ type: 'bar',
+ label: 'Dataset 2',
+ backgroundColor: '#FFCA28',
+ data: [
+ 21,
+ 84,
+ 24,
+ 75,
+ 37,
+ 65,
+ 34
+ ]
+ },
+ {
+ type: 'bar',
+ label: 'Dataset 3',
+ backgroundColor: '#42A5F5',
+ data: [
+ 41,
+ 52,
+ 24,
+ 74,
+ 23,
+ 21,
+ 32
+ ]
+ }
+ ]
+ },
+ stackedOptions: {
+ tooltips: {
+ mode: 'index',
+ intersect: false
+ },
+ responsive: true,
+ scales: {
+ xAxes: [{
+ stacked: true,
+ }],
+ yAxes: [{
+ stacked: true
+ }]
+ }
+ }
+ }
+ }
+}
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/chart/ChartDemo.vue b/src/views/chart/ChartDemo.vue
index 5b0ccd26c..021d03344 100644
--- a/src/views/chart/ChartDemo.vue
+++ b/src/views/chart/ChartDemo.vue
@@ -7,13 +7,13 @@
-
-
-
+
diff --git a/src/views/chart/ChartDoc.vue b/src/views/chart/ChartDoc.vue
new file mode 100644
index 000000000..71328cf0d
--- /dev/null
+++ b/src/views/chart/ChartDoc.vue
@@ -0,0 +1,138 @@
+
+
+
Import
+
+import Chart from 'primevue/chart';
+
+
+
Chart Types
+
Chart type is defined using the type property. Currently there are 6 options available; "pie", "doughtnut", "line", "bar", "radar" and "polarArea".
+
+
Data
+
Data of a chart is provided using a binding to the data property, each type has its own format of data. Here is an example of a line chart.
+
+<Chart type="bar" :data="basicData" />
+
+
+
+export default {
+ data() {
+ return {
+ basicData: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: '#42A5F5',
+ data: [65, 59, 80, 81, 56, 55, 40]
+ },
+ {
+ label: 'My Second dataset',
+ backgroundColor: '#9CCC65',
+ data: [28, 48, 40, 19, 86, 27, 90]
+ }
+ ]
+ }
+ }
+ }
+}
+
+
+
Options
+
While a series can be customized per dataset, general chart options are defined with options property.
+ Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.
+
+<Chart type="line" :data="data" :options="options" />
+
+
+
+options: {
+ responsive: true,
+ hoverMode: 'index',
+ stacked: false,
+ scales: {
+ yAxes: [{
+ type: 'linear',
+ display: true,
+ position: 'left',
+ id: 'y-axis-1',
+ }, {
+ type: 'linear',
+ display: true,
+ position: 'right',
+ id: 'y-axis-2',
+ gridLines: {
+ drawOnChartArea: false
+ }
+ }]
+ }
+}
+
+
+
Properties
+
+
+
+
+ | Name |
+ Type |
+ Default |
+ Description |
+
+
+
+
+ | type |
+ string |
+ null |
+ Type of the chart. |
+
+
+ | data |
+ any |
+ null |
+ Data to display. |
+
+
+ | options |
+ any |
+ null |
+ Options to customize the chart. |
+
+
+ | width |
+ string |
+ null |
+ Width of the chart in non-responsive mode. |
+
+
+ | height |
+ string |
+ null |
+ Height of the chart in non-responsive mode. |
+
+
+
+
+
+
Methods
+
+
+
+
+ | Name |
+ Parameters |
+ Description |
+
+
+
+
+ | refresh |
+ - |
+ Redraws the graph. |
+
+
+
+
+
+
+
diff --git a/src/views/chart/ComboChartDoc.vue b/src/views/chart/ComboChartDoc.vue
new file mode 100644
index 000000000..cd8439c47
--- /dev/null
+++ b/src/views/chart/ComboChartDoc.vue
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+<template>
+ <div>
+ <div class="content-section introduction">
+ <div class="feature-intro">
+ <h1>Combo Chart</h1>
+ <p>Different chart types can be combined in the same graph.</p>
+ </div>
+ </div>
+
+ <div class="content-section implementation">
+ <Chart type="bar" :data="chartData" :options="chartOptions"/>
+ </div>
+ </div>
+</template>
+
+
+
+
+export default {
+ data() {
+ return {
+ chartData: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ type: 'line',
+ label: 'Dataset 1',
+ borderColor: '#AA5493',
+ borderWidth: 2,
+ fill: false,
+ data: [
+ 50,
+ 25,
+ 12,
+ 48,
+ 56,
+ 76,
+ 42
+ ]
+ },
+ {
+ type: 'bar',
+ label: 'Dataset 2',
+ backgroundColor: '#2f4860',
+ data: [
+ 21,
+ 84,
+ 24,
+ 75,
+ 37,
+ 65,
+ 34
+ ],
+ borderColor: 'white',
+ borderWidth: 2
+ },
+ {
+ type: 'bar',
+ label: 'Dataset 3',
+ backgroundColor: '#00bb7e',
+ data: [
+ 41,
+ 52,
+ 24,
+ 74,
+ 23,
+ 21,
+ 32
+ ]
+ }]
+ },
+ chartOptions: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Combo Bar Line Chart'
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: true
+ }
+ }
+ }
+ }
+}
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/chart/DoughnutChartDemo.vue b/src/views/chart/DoughnutChartDemo.vue
index f5173dbe0..0d906507f 100644
--- a/src/views/chart/DoughnutChartDemo.vue
+++ b/src/views/chart/DoughnutChartDemo.vue
@@ -10,10 +10,14 @@
+
+
diff --git a/src/views/chart/DoughnutChartDoc.vue b/src/views/chart/DoughnutChartDoc.vue
new file mode 100644
index 000000000..7a0c9b298
--- /dev/null
+++ b/src/views/chart/DoughnutChartDoc.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+<template>
+ <div>
+ <div class="content-section introduction">
+ <div class="feature-intro">
+ <h1>DoughnutChart</h1>
+ <p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
+ </div>
+ </div>
+
+ <div class="content-section implementation">
+ <Chart type="doughnut" :data="chartData" />
+ </div>
+ </div>
+</template>
+
+
+
+
+export default {
+ data() {
+ return {
+ chartData: {
+ labels: ['A','B','C'],
+ datasets: [
+ {
+ data: [300, 50, 100],
+ backgroundColor: [
+ "#FF6384",
+ "#36A2EB",
+ "#FFCE56"
+ ],
+ hoverBackgroundColor: [
+ "#FF6384",
+ "#36A2EB",
+ "#FFCE56"
+ ]
+ }
+ ]
+ }
+ }
+ }
+}
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/chart/LineChartDemo.vue b/src/views/chart/LineChartDemo.vue
index 83bc293b6..b461033e6 100644
--- a/src/views/chart/LineChartDemo.vue
+++ b/src/views/chart/LineChartDemo.vue
@@ -17,10 +17,14 @@
Line Styles
+
+
diff --git a/src/views/chart/LineChartDoc.vue b/src/views/chart/LineChartDoc.vue
new file mode 100644
index 000000000..c776b1d8b
--- /dev/null
+++ b/src/views/chart/LineChartDoc.vue
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+<template>
+ <div>
+ <div class="content-section introduction">
+ <div class="feature-intro">
+ <h1>Line Chart</h1>
+ <p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
+ </div>
+ </div>
+
+ <div class="content-section implementation">
+ <h3 class="first">Basic</h3>
+ <Chart type="line" :data="basicData" />
+
+ <h3>Multi Axis</h3>
+ <Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
+
+ <h3>Line Styles</h3>
+ <Chart type="line" :data="lineStylesData" />
+ </div>
+ </div>
+</template>
+
+
+
+
+export default {
+ data() {
+ return {
+ basicData: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'First Dataset',
+ data: [65, 59, 80, 81, 56, 55, 40],
+ fill: false,
+ backgroundColor: '#2f4860',
+ borderColor: '#2f4860'
+ },
+ {
+ label: 'Second Dataset',
+ data: [28, 48, 40, 19, 86, 27, 90],
+ fill: false,
+ backgroundColor: '#00bb7e',
+ borderColor: '#00bb7e'
+ }
+ ]
+ },
+ multiAxisData: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'Dataset 1',
+ fill: false,
+ backgroundColor: '#2f4860',
+ borderColor: '#2f4860',
+ yAxisID: 'y-axis-1',
+ data: [65, 59, 80, 81, 56, 55, 10]
+ },
+ {
+ label: 'Dataset 2',
+ fill: false,
+ backgroundColor: '#00bb7e',
+ borderColor: '#00bb7e',
+ yAxisID: 'y-axis-2',
+ data: [28, 48, 40, 19, 86, 27, 90]
+ }
+ ]
+ },
+ multiAxisOptions: {
+ responsive: true,
+ hoverMode: 'index',
+ stacked: false,
+ scales: {
+ yAxes: [
+ {
+ type: 'linear',
+ display: true,
+ position: 'left',
+ id: 'y-axis-1',
+ },
+ {
+ type: 'linear',
+ display: true,
+ position: 'right',
+ id: 'y-axis-2',
+ gridLines: {
+ drawOnChartArea: false
+ }
+ }
+ ]
+ }
+ },
+ lineStylesData: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'First Dataset',
+ data: [65, 59, 80, 81, 56, 55, 40],
+ fill: false,
+ borderColor: '#42A5F5'
+ },
+ {
+ label: 'Second Dataset',
+ data: [28, 48, 40, 19, 86, 27, 90],
+ fill: false,
+ borderDash: [5, 5],
+ borderColor: '#66BB6A'
+ },
+ {
+ label: 'Third Dataset',
+ data: [12, 51, 62, 33, 21, 62, 45],
+ fill: true,
+ borderColor: '#FFA726',
+ backgroundColor: '#FFCC80'
+ }
+ ]
+ }
+ }
+ }
+}
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/chart/PieChartDemo.vue b/src/views/chart/PieChartDemo.vue
index d53778063..df2aaf1b8 100644
--- a/src/views/chart/PieChartDemo.vue
+++ b/src/views/chart/PieChartDemo.vue
@@ -10,10 +10,14 @@
+
+
diff --git a/src/views/chart/PieChartDoc.vue b/src/views/chart/PieChartDoc.vue
new file mode 100644
index 000000000..3ba68e3d6
--- /dev/null
+++ b/src/views/chart/PieChartDoc.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+<template>
+ <div>
+ <div class="content-section introduction">
+ <div class="feature-intro">
+ <h1>Pie Chart</h1>
+ <p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
+ </div>
+ </div>
+
+ <div class="content-section implementation">
+ <Chart type="pie" :data="chartData" />
+ </div>
+ </div>
+</template>
+
+
+
+
+export default {
+ data() {
+ return {
+ chartData: {
+ labels: ['A','B','C'],
+ datasets: [
+ {
+ data: [300, 50, 100],
+ backgroundColor: [
+ "#FF6384",
+ "#36A2EB",
+ "#FFCE56"
+ ],
+ hoverBackgroundColor: [
+ "#FF6384",
+ "#36A2EB",
+ "#FFCE56"
+ ]
+ }
+ ]
+ }
+ }
+ }
+}
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/chart/PolarAreaChartDemo.vue b/src/views/chart/PolarAreaChartDemo.vue
index d04cc1810..45334069f 100644
--- a/src/views/chart/PolarAreaChartDemo.vue
+++ b/src/views/chart/PolarAreaChartDemo.vue
@@ -10,10 +10,14 @@
+
+
diff --git a/src/views/chart/PolarAreaChartDoc.vue b/src/views/chart/PolarAreaChartDoc.vue
new file mode 100644
index 000000000..e98dbf23a
--- /dev/null
+++ b/src/views/chart/PolarAreaChartDoc.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+<template>
+ <div>
+ <div class="content-section introduction">
+ <div class="feature-intro">
+ <h1>Polar Area Chart</h1>
+ <p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
+ </div>
+ </div>
+
+ <div class="content-section implementation">
+ <Chart type="polarArea" :data="chartData" />
+ </div>
+ </div>
+</template>
+
+
+
+
+export default {
+ data() {
+ return {
+ chartData: {
+ datasets: [{
+ data: [
+ 11,
+ 16,
+ 7,
+ 3,
+ 14
+ ],
+ backgroundColor: [
+ "#FF6384",
+ "#4BC0C0",
+ "#FFCE56",
+ "#E7E9ED",
+ "#36A2EB"
+ ],
+ label: 'My dataset'
+ }],
+ labels: [
+ "Red",
+ "Green",
+ "Yellow",
+ "Grey",
+ "Blue"
+ ]
+ }
+ }
+ }
+}
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/chart/RadarChartDemo.vue b/src/views/chart/RadarChartDemo.vue
index 9fcfd4d90..ca3636cc9 100644
--- a/src/views/chart/RadarChartDemo.vue
+++ b/src/views/chart/RadarChartDemo.vue
@@ -10,10 +10,14 @@
+
+
diff --git a/src/views/chart/RadarChartDoc.vue b/src/views/chart/RadarChartDoc.vue
new file mode 100644
index 000000000..94c45ac53
--- /dev/null
+++ b/src/views/chart/RadarChartDoc.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+<template>
+ <div>
+ <div class="content-section introduction">
+ <div class="feature-intro">
+ <h1>Radar Chart</h1>
+ <p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
+ </div>
+ </div>
+
+ <div class="content-section implementation">
+ <Chart type="radar" :data="chartData" />
+ </div>
+ </div>
+</template>
+
+
+
+
+export default {
+ data() {
+ return {
+ chartData: {
+ labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'rgba(179,181,198,0.2)',
+ borderColor: 'rgba(179,181,198,1)',
+ pointBackgroundColor: 'rgba(179,181,198,1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(179,181,198,1)',
+ data: [65, 59, 90, 81, 56, 55, 40]
+ },
+ {
+ label: 'My Second dataset',
+ backgroundColor: 'rgba(255,99,132,0.2)',
+ borderColor: 'rgba(255,99,132,1)',
+ pointBackgroundColor: 'rgba(255,99,132,1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(255,99,132,1)',
+ data: [28, 48, 40, 19, 96, 27, 100]
+ }
+ ]
+ }
+ }
+ }
+}
+
+
+
+
+
\ No newline at end of file