Skip to content

Commit

Permalink
Updated example
Browse files Browse the repository at this point in the history
  • Loading branch information
J-T-McC committed May 29, 2021
1 parent e548899 commit 7042074
Show file tree
Hide file tree
Showing 5 changed files with 500 additions and 445 deletions.
39 changes: 16 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,9 @@ For ChartJS 2, see [v0.3.0](https://github.com/J-T-McC/vue3-chartjs/tree/0.3.0)
## Installation

```shell script
yarn add chart.js
yarn add @j-t-mcc/vue3-chartjs
yarn add chart.js @j-t-mcc/vue3-chartjs

npm install chart.js
npm install @j-t-mcc/vue3-chartjs
npm install chart.js @j-t-mcc/vue3-chartjs
```

## Configuration
Expand Down Expand Up @@ -340,11 +338,12 @@ Example usage with locally imported chart component:

```vue
<template>
<div style="height:600px;width: 600px; display: flex;flex-direction:column;">
<div style="height:600px;width:600px;">
<vue3-chart-js
:id="lineChart.id"
:type="lineChart.type"
:data="lineChart.data"
:options="lineChart.options"
></vue3-chart-js>
</div>
</template>
Expand All @@ -368,7 +367,7 @@ export default {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
data: [50, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
Expand All @@ -389,26 +388,20 @@ export default {
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'y'
},
zoom: {
enabled: true,
mode: 'y'
}
}
}
}
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "y",
},
},
},
},
}
return {
Expand Down
2 changes: 1 addition & 1 deletion dist/vue3-chartjs.es.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/vue3-chartjs.umd.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@j-t-mcc/vue3-chartjs",
"version": "1.1.1",
"version": "1.1.2",
"author": "Tyson McCarney <info@tysonmccarney.com> (https://tysonmccarney.com)",
"description": "Vue3 wrapper for Chart.js",
"license": "MIT",
Expand Down
Loading

0 comments on commit 7042074

Please sign in to comment.