vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Chart docs

pull/12/head
cagataycivici 2019-05-23 12:28:49 +03:00
parent ef47f67a52
commit c08ef854a4
1 changed files with 68 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/views/chart/ChartDoc.vue
View File

@ -1,6 +1,12 @@
<template> <template>
<div class="content-section documentation"> <div class="content-section documentation">
<h3>Import</h3> <h3>Getting Started</h3>
<p>To begin with, charts.js package needs to be installed in your project.</p>
<CodeHighlight lang="javascript">
npm install chart.js --save
</CodeHighlight>
<h3 style="margin-top: 0">Import</h3>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import Chart from 'primevue/chart'; import Chart from 'primevue/chart';
</CodeHighlight> </CodeHighlight>
@ -52,19 +58,21 @@ options: {
stacked: false, stacked: false,
scales: { scales: {
yAxes: [{ yAxes: [{
type: 'linear', type: 'linear',
display: true, display: true,
position: 'left', position: 'left',
id: 'y-axis-1', id: 'y-axis-1',
}, { },
type: 'linear', {
display: true, type: 'linear',
position: 'right', display: true,
id: 'y-axis-2', position: 'right',
gridLines: { id: 'y-axis-2',
drawOnChartArea: false gridLines: {
} drawOnChartArea: false
}] }
}
]
} }
} }
</CodeHighlight> </CodeHighlight>
@ -73,44 +81,44 @@ options: {
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>type</td> <td>type</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Type of the chart.</td> <td>Type of the chart.</td>
</tr> </tr>
<tr> <tr>
<td>data</td> <td>data</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Data to display.</td> <td>Data to display.</td>
</tr> </tr>
<tr> <tr>
<td>options</td> <td>options</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Options to customize the chart.</td> <td>Options to customize the chart.</td>
</tr> </tr>
<tr> <tr>
<td>width</td> <td>width</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Width of the chart in non-responsive mode.</td> <td>Width of the chart in non-responsive mode.</td>
</tr> </tr>
<tr> <tr>
<td>height</td> <td>height</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Height of the chart in non-responsive mode.</td> <td>Height of the chart in non-responsive mode.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -119,18 +127,18 @@ options: {
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>refresh</td> <td>refresh</td>
<td>-</td> <td>-</td>
<td>Redraws the graph.</td> <td>Redraws the graph.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>