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

253 lines
8.7 KiB
Vue
Raw Normal View History

All pages added
2022-09-09 20:41:18 +00:00
<template>
<div class="content-section documentation">
<h1>ChartModel</h1>
<p>Chart components are based on <a href="https://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
<h5>Getting Started</h5>
<p>
Chart component is a wrapper around on <a href="https://www.chartjs.org/docs/3.3.2/">Chart.js 3.3.2+</a> so chart.js needs to be included in your project. For a complete documentation and samples please refer to the
<a href="https://www.chartjs.org/">chart.js website</a>.
</p>
<pre v-code.script><code>
npm install chart.js --save
</code></pre>
<h5>Import via Module</h5>
<pre v-code.script><code>
import Chart from 'primevue/chart';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/chart/chart.min.js"&gt;&lt;/script&gt;
</code></pre>
<h5>Chart Types</h5>
<p>Chart type is defined using the <i>type</i> property. Currently there are 6 options available; <b>pie</b>, <b>doughnut</b>, <b>line</b>, <b>bar</b>, <b>radar</b> and <b>polarArea</b>.</p>
<h5>Data</h5>
<p>
Data of a chart is provided using a binding to the <i>data</i> property, each type has its own format of data. Here is an example of a line chart. For more information refer to the
<a href="https://www.chartjs.org/">charts.js</a> documentation.
</p>
<pre v-code><code>
&lt;Chart type="bar" :data="basicData" /&gt;
</code></pre>
<pre v-code.script><code>
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]
}
]
}
}
}
}
</code></pre>
<h5>Options</h5>
<p>
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
<a href="https://www.chartjs.org/">charts.js</a> documentation.
</p>
<pre v-code><code>
&lt;Chart type="line" :data="data" :options="options" /&gt;
</code></pre>
<pre v-code.script><code>
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
}
}]
}
}
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>string</td>
<td>null</td>
<td>Type of the chart.</td>
</tr>
<tr>
<td>data</td>
<td>any</td>
<td>null</td>
<td>Data to display.</td>
</tr>
<tr>
<td>options</td>
<td>any</td>
<td>null</td>
<td>Options to customize the chart.</td>
</tr>
<tr>
<td>plugins</td>
<td>any</td>
<td>null</td>
<td>Used to custom plugins of the chart.</td>
</tr>
<tr>
<td>width</td>
<td>number</td>
<td>300</td>
<td>Width of the chart in non-responsive mode.</td>
</tr>
<tr>
<td>height</td>
<td>number</td>
<td>150</td>
<td>Height of the chart in non-responsive mode.</td>
</tr>
Pages updated v3.21.0
2022-12-08 12:26:57 +00:00
<tr>
<td>canvasProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the CanvasHTMLAttributes to canvas element inside the component.</td>
</tr>
All pages added
2022-09-09 20:41:18 +00:00
</tbody>
</table>
</div>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>refresh</td>
<td>-</td>
<td>Redraws the graph.</td>
</tr>
<tr>
<td>reinit</td>
<td>-</td>
<td>Destroys the graph first and then creates it again.</td>
</tr>
<tr>
<td>generateLegend</td>
<td>-</td>
<td>Returns an HTML string of a legend for that chart. The legend is generated from the legendCallback in the options.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>select</td>
<td>
event: original event<br />
event.dataset: Selected dataset<br />
event.element: Selected element<br />
event.element._datasetIndex = Index of the dataset in data<br />
event.element._index = Index of the data in dataset
</td>
<td>Callback to invoke when a tab gets expanded.</td>
</tr>
<tr>
<td>loaded</td>
<td>chart instance</td>
<td>Callback to invoke when chart is loaded.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chart</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
Pages updated v3.21.0
2022-12-08 12:26:57 +00:00
<h5>Accessibility</h5>
<p>
Chart components internally use <i>canvas</i> element, refer to the <a href="https://www.chartjs.org/docs/latest/general/accessibility.html">Chart.js accessibility</a> guide for more information. The canvas element can be customized with
<i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to provide fallback content like a table.
</p>
<pre v-code><code>
&lt;Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" /&gt;
</code></pre>
All pages added
2022-09-09 20:41:18 +00:00
</div>
</template>