`. This way, you can change the height and width of the outer container dynamically, which is not the default behaviour of Chart.js. It is best to use computed properties for this.
119 |
120 | ::: warning
121 | You need to set `position: relative`
122 | :::
123 |
124 | ```vue
125 |
126 |
127 |
128 |
129 |
130 |
131 |
150 | ```
151 |
152 | ## Custom / New Charts
153 |
154 | Sometimes you need to extend the default Chart.js charts. There are a lot of [examples](http://www.chartjs.org/docs/latest/developers/charts.html) on how to extend and modify the default charts. Or, you can create your own chart type.
155 |
156 | In `vue-chartjs`, you can do this pretty much the same way:
157 |
158 | ```js
159 | // 1. Import Chart.js so you can use the global Chart object
160 | import { Chart } from 'chart.js'
161 | // 2. Import the `createTypedChart()` method to create the vue component.
162 | import { createTypedChart } from 'vue-chartjs'
163 | // 3. Import needed controller from Chart.js
164 | import { LineController } from 'chart.js'
165 |
166 | // 3. Extend one of the default charts
167 | // http://www.chartjs.org/docs/latest/developers/charts.html
168 | class LineWithLineController extends LineController { /* custom magic here */}
169 |
170 | // 4. Generate the vue-chartjs component
171 | // The first argument is the chart-id, the second the chart type, third is the custom controller
172 | const CustomLine = createTypedChart('line', LineWithLineController)
173 |
174 | // 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.
175 |
176 | export default {
177 | components: { CustomLine }
178 | }
179 | ```
180 |
181 | ## Resources
182 |
183 | Here are some resources, such as tutorials, on how to use `vue-chartjs`:
184 |
185 | - [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
186 | - [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
187 | - [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
188 | - [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
189 | - [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)
190 |
--------------------------------------------------------------------------------
/website/src/de/guide/index.md:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | **vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reuseable chart components.
4 |
5 | Supports Chart.js v4.
6 |
7 | ## Introduction
8 |
9 | `vue-chartjs` lets you use Chart.js without much hassle inside Vue. It's perfect for people who need simple charts up and running as fast as possible.
10 |
11 | It abstracts the basic logic but exposes the Chart.js object to give you maximal flexibility.
12 |
13 | :::tip Need an API to fetch data?
14 | Please consider [Cube](https://cube.dev/?ref=eco-vue-chartjs), an open-source API for data apps.
15 | :::
16 |
17 | ## Installation
18 |
19 | You can install `vue-chartjs` over `yarn` or `npm` or `pnpm`. However, you also need to add `chart.js` as a dependency to your project because `Chart.js` is a peerDependency. This way you can have full control over the versioning of `Chart.js`.
20 |
21 | ```bash
22 | pnpm add vue-chartjs chart.js
23 | # or
24 | yarn add vue-chartjs chart.js
25 | # or
26 | npm i vue-chartjs chart.js
27 | ```
28 |
29 | ## Integration
30 |
31 | Every chart type that is available in Chart.js is exported as a named component and can be imported as such. These components are normal Vue components.
32 |
33 | The idea behind vue-chartjs is to provide easy-to-use components, with maximal flexibility and extensibility.
34 |
35 | ## Creating your first Chart
36 |
37 | First, you need to import the base chart.
38 |
39 | ```javascript
40 | import { Bar } from 'vue-chartjs'
41 | ```
42 |
43 | Check out the official [Chart.js docs](http://www.chartjs.org/docs/latest/#creating-a-chart) to see the object structure you need to provide.
44 |
45 | Just create your own component.
46 |
47 | **BarChart.vue**
48 |
49 | ```vue
50 |
51 |
56 |
57 |
58 |
80 | ```
81 |
82 | Use it in your vue app:
83 |
84 | **App.vue**
85 |
86 | ```vue
87 |
88 |
89 |
90 |
91 |
99 | ```
100 |
101 | ## Updating Charts
102 |
103 | Since v4 charts have data change watcher and options change watcher by default. Wrapper will update or re-render the chart if new data or new options is passed. Mixins have been removed.
104 |
105 | ```vue
106 |
107 |
108 |
109 |
110 |
126 | ```
127 |
128 | You may get Vue's `Target is readonly` warnings when you are updating your `chartData`.
129 |
130 | If your `chartData` is a `read-only` reactive value, you can override this warning by using a clone:
131 |
132 | ```vue
133 |
134 |
135 |
136 | ```
137 |
138 | Unless you have a writable computed `chartData`, you won't be able to use the newer `structuredClone`, as you'll likely hit the `Write operation failed: computed value is readonly` error.
139 |
140 | You don't need to use a clone if your `chartData` is a [writable computed value](https://vuejs.org/guide/essentials/computed#writable-computed).
141 |
142 |
143 |
144 | ## Access to Chart instance
145 |
146 | You can get access to chart instance via template refs.
147 |
148 | ```vue
149 |
150 |
151 |
152 | ```
153 |
154 | In Vue3 projects:
155 |
156 | ```javascript
157 | const chartInstance = this.$refs.bar.chart
158 | ```
159 |
160 | ## Accessibility
161 |
162 | To make your charts accessible to all users, you should label your charts.
163 | Please refer also to the official [Chart.js Accessibility notes](https://www.chartjs.org/docs/latest/general/accessibility.html).
164 |
165 | ### `aria-label`
166 |
167 | You can directly label a chart by passing an `aria-label` prop.
168 |
169 | ```vue
170 |
171 |
172 |
173 | ```
174 |
175 | ### `aria-describedby`
176 |
177 | You can reference to a describing element such as a table which describes the data by using the `aria-describedby` property.
178 |
179 | ```vue
180 |
181 |
182 |
183 | Sales figures for the years 2022 to 2024.
184 |
185 |
186 | | 2022 |
187 | 2023 |
188 | 2024 |
189 |
190 |
191 |
192 |
193 | | 987 |
194 | 1209 |
195 | 825 |
196 |
197 |
198 |
199 |
200 | ```
201 |
202 | ### Fallback-Content
203 |
204 | In case the Browser is not able to render the `canvas` element, you should consider providing fallback content by using the Slot of each component.
205 |
206 | ```vue
207 |
208 | Chart couldn't be loaded.
209 |
210 | ```
211 |
--------------------------------------------------------------------------------
/website/src/de/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: home
3 | hero:
4 | name: 📈 vue-chartjs
5 | tagline: ⚡ Einfache und schöne Diagramme mit Chart.js und Vue.js
6 | actions:
7 | - theme: brand
8 | text: Get Started →
9 | link: /guide/
10 | features:
11 | - icon: 🙌
12 | title: Einfach
13 | details: Einfach für beginner sowie fortgeschrittene
14 | - icon: 💪
15 | title: Erweiterbar
16 | details: Simple to use, easy to extend
17 | - icon: 💯
18 | title: Mächtig
19 | details: With the full power of chart.js 💯
20 | ---
21 |
--------------------------------------------------------------------------------
/website/src/de/migration-guides/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: doc
3 | ---
4 |
5 | # Migration
6 |
7 | Over the time `vue-chartjs` has changed a lot. As the web and frontend technology has changed.
8 | To keep up with the speed of evolution we have iterated and changed a lot. For a smooth transition between version please check the migration guides.
9 |
10 |
11 | - [v4 -> v5](/migration-guides/v5)
12 | - [v3 -> v4](/migration-guides/v4)
13 | - [vue-chart-3](/migration-guides/vue-chart-3)
14 |
--------------------------------------------------------------------------------
/website/src/de/migration-guides/v4.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: doc
3 | ---
4 | # Migration from v3 to v4
5 |
6 | With v4, this library introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.
7 |
8 | v4 is fully compatible with Chart.js v3.
9 |
10 | ## Tree-shaking
11 |
12 | v4 of this library, [just like Chart.js v3](https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#setup-and-installation), is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.
13 |
14 | For a list of all the available items to import, see [Chart.js docs](https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc).
15 |
16 | v3:
17 |
18 | ```javascript
19 | import { Bar } from 'vue-chartjs'
20 | ```
21 |
22 | v4 — lazy way:
23 |
24 | ```javascript
25 | import 'chart.js/auto';
26 | import { Bar } from 'vue-chartjs'
27 | ```
28 |
29 | v4 — tree-shakable way:
30 |
31 | ```javascript
32 | import { Bar } from 'vue-chartjs'
33 | import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
34 |
35 | ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
36 | ```
37 |
38 | Using the "lazy way" is okay to simplify the migration, but please consider using the tree-shakable way to decrease the bundle size.
39 |
40 | Please note that typed chart components register their controllers by default, so you don't need to register them by yourself. For example, when using the Pie component, you don't need to register PieController explicitly.
41 |
42 | ```javascript
43 | import { Pie } from 'vue-chartjs'
44 | import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
45 |
46 | ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
47 | ```
48 |
49 | ## Changing the creation of Charts
50 |
51 | In v3, you needed to import the component, and then either use extends or mixins and add it.
52 |
53 | v3:
54 |
55 | ```javascript
56 | // BarChart.js
57 | import { Bar } from 'vue-chartjs'
58 |
59 | export default {
60 | extends: Bar,
61 | mounted () {
62 | // Overwriting base render method with actual data.
63 | this.renderChart({
64 | labels: ['January', 'February', 'March'],
65 | datasets: [
66 | {
67 | label: 'GitHub Commits',
68 | backgroundColor: '#f87979',
69 | data: [40, 20, 12]
70 | }
71 | ]
72 | })
73 | }
74 | }
75 | ```
76 |
77 | ```vue
78 |
79 |
80 |
81 |
82 |
90 | ```
91 |
92 | In v4, you need to import the component, pass props to it, and use Chart component as a standard Vue component.
93 |
94 | ```vue
95 |
96 |
97 |
98 |
99 |
125 | ```
126 |
127 | ## New reactivity system
128 |
129 | v3 does not update or re-render the chart if new data is passed. You needed to use `reactiveProp` and `reactiveData` mixins for that.
130 |
131 | v3:
132 |
133 | ```javascript
134 | import { Line, mixins } from 'vue-chartjs'
135 |
136 | export default {
137 | extends: Line,
138 | mixins: [mixins.reactiveProp],
139 | props: ['chartData', 'options'],
140 | mounted () {
141 | this.renderChart(this.chartData, this.options)
142 | }
143 | }
144 | ```
145 |
146 | v4 charts have data change watcher by default. v4 will update or re-render the chart if new data is passed. Mixins have been removed.
147 |
148 | v4:
149 |
150 | ```vue
151 |
152 |
153 |
154 |
155 |
170 | ```
171 |
--------------------------------------------------------------------------------
/website/src/de/migration-guides/v5.md:
--------------------------------------------------------------------------------
1 | # Migration from v4 to v5
2 |
3 | With v5, this library introduces a number of breaking changes
4 |
5 | ## ESM
6 |
7 | ### v5.0
8 |
9 | Chart.js v4 and vue-chartjs v5 are [ESM-only packages](https://nodejs.org/api/esm.html). To use them in your project, it also should be ESM:
10 |
11 | ```json
12 | // package.json
13 | {
14 | "type": "module"
15 | }
16 | ```
17 |
18 | If you are experiencing this problem with Jest, you should follow [this doc](https://jestjs.io/docs/ecmascript-modules) to enable ESM support. Or, we can recommend you migrate to [Vitest](https://vitest.dev/). Vitest has ESM support out of the box and [has almost the same API as Jest](https://vitest.dev/guide/migration.html#migrating-from-jest). [Here is our example of migration](https://github.com/reactchartjs/react-chartjs-2/commit/7f3ec96101d21e43cae8cbfe5e09a46a17cff1ef).
19 |
20 |
21 | ### v5.1
22 |
23 | Chart.js v4.1 and vue-chartjs v5.1 have restored the CommonJS support.
24 |
25 | ## API changes
26 |
27 | - `chartData` props were renamed to `data`
28 | - `chartOptions` props were renamed to `options`
29 | - unknown props will fall through to the canvas element.
30 | - `generateChart` were refactored and renamed to `createTypedChart`
31 | - Vue.js < 2.7 is no longer supported. If you want to use vue-chartjs with Vue < 2.7 you have to lock your version to 4.x.
32 |
--------------------------------------------------------------------------------
/website/src/de/migration-guides/vue-chart-3.md:
--------------------------------------------------------------------------------
1 |
2 | # Migration from vue-chart-3
3 |
4 | ## Uninstall vue-chart-3
5 |
6 | ```bash
7 | pnpm rm vue-chart-3
8 | # or
9 | yarn remove vue-chart-3
10 | # or
11 | npm uninstall vue-chart-3
12 | ```
13 |
14 | ## Install vue-chartjs
15 |
16 | ```bash
17 | pnpm add vue-chartjs
18 | # or
19 | yarn add vue-chartjs
20 | # or
21 | npm i vue-chartjs
22 | ```
23 |
24 | ## Change component import path
25 |
26 | For Vue 2.7 and Vue 3 projects:
27 |
28 | ```javascript
29 | import { /* component */ } from 'vue-chartjs'
30 | ```
31 |
32 | For Vue 2 (<2.7) projects:
33 |
34 | ```javascript
35 | import { /* component */ } from 'vue-chartjs/legacy'
36 | ```
37 |
38 | ## Rename components
39 |
40 | - BarChart to Bar
41 | - DoughnutChart to Doughnut
42 | - LineChart to Line
43 | - PieChart to Pie
44 | - PolarAreaChart to PolarArea
45 | - RadarChart to Radar
46 | - BubbleChart to Bubble
47 | - ScatterChart to Scatter
48 |
49 | ## Rename props
50 |
51 | - options to chartOptions
52 |
--------------------------------------------------------------------------------
/website/src/examples/index.md:
--------------------------------------------------------------------------------
1 | # Examples
2 |
3 | ## Vue 3 charts
4 |
5 | - [Bar](https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/bar)
6 | - [Bubble](https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/bubble)
7 | - [Doughnut](https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/doughnut)
8 | - [Line](https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/line)
9 | - [Pie](https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/pie)
10 | - [PolarArea](https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/polar-area)
11 | - [Radar](https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/radar)
12 | - [Scatter](https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/scatter)
13 | - [Bar with reactive data](https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/reactive)
14 | - [Custom chart](https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/custom)
15 | - [Events](https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/events)
16 |
17 | ## Vue 2 charts (vue-chartjs v4)
18 |
19 | - [Bar](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/bar)
20 | - [Bubble](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/bubble)
21 | - [Doughnut](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/doughnut)
22 | - [Line](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/line)
23 | - [Pie](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/pie)
24 | - [PolarArea](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/polar-area)
25 | - [Radar](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/radar)
26 | - [Scatter](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/scatter)
27 |
--------------------------------------------------------------------------------
/website/src/guide/examples.md:
--------------------------------------------------------------------------------
1 |
2 | # Examples
3 |
4 | ## Chart with props
5 |
6 | Your goal should be to create reusable chart components. For this purpose, you should utilize Vue.js props to pass in chart options and chart data. This way, the parent component itself does not hold an opinion about fetching data and is only for presentation.
7 |
8 | ```vue
9 |
10 |
11 |
12 |
13 |
34 | ```
35 |
36 | ## Chart with local data
37 |
38 | You can handle your chart data directly in your parent component.
39 |
40 | ```vue
41 |
42 |
43 |
44 |
45 |
70 | ```
71 |
72 | ## Chart with API data
73 |
74 | A common pattern is to use an API to retrieve your data. However, there are some things to keep in mind. The most common problem is that you mount your chart component directly and pass in data from an asynchronous API call. The problem with this approach is that Chart.js tries to render your chart and access the chart data synchronously, so your chart mounts before the API data arrives.
75 |
76 | To prevent this, a simple `v-if` is the best solution.
77 |
78 | Create your chart component with a data prop and options prop, so we can pass in our data and options from a container component.
79 |
80 | ```vue
81 |
82 |
83 |
84 |
85 |
86 |
87 |
114 | ```
115 |
116 | ## Chart with dynamic styles
117 |
118 | You can set `responsive: true` and pass in a styles object which gets applied as inline styles to the outer `
`. This way, you can change the height and width of the outer container dynamically, which is not the default behaviour of Chart.js. It is best to use computed properties for this.
119 |
120 | ::: warning
121 | You need to set `position: relative`
122 | :::
123 |
124 | ```vue
125 |
126 |
127 |
128 |
129 |
130 |
131 |
150 | ```
151 |
152 | ## Custom / New Charts
153 |
154 | Sometimes you need to extend the default Chart.js charts. There are a lot of [examples](http://www.chartjs.org/docs/latest/developers/charts.html) on how to extend and modify the default charts. Or, you can create your own chart type.
155 |
156 | In `vue-chartjs`, you can do this pretty much the same way:
157 |
158 | ```js
159 | // 1. Import Chart.js so you can use the global Chart object
160 | import { Chart } from 'chart.js'
161 | // 2. Import the `createTypedChart()` method to create the vue component.
162 | import { createTypedChart } from 'vue-chartjs'
163 | // 3. Import needed controller from Chart.js
164 | import { LineController } from 'chart.js'
165 |
166 | // 3. Extend one of the default charts
167 | // http://www.chartjs.org/docs/latest/developers/charts.html
168 | class LineWithLineController extends LineController { /* custom magic here */}
169 |
170 | // 4. Generate the vue-chartjs component
171 | // The first argument is the chart-id, the second the chart type, third is the custom controller
172 | const CustomLine = createTypedChart('line', LineWithLineController)
173 |
174 | // 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.
175 |
176 | export default {
177 | components: { CustomLine }
178 | }
179 | ```
180 |
181 | ## Resources
182 |
183 | Here are some resources, such as tutorials, on how to use `vue-chartjs`:
184 |
185 | - [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
186 | - [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
187 | - [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
188 | - [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
189 | - [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)
190 |
--------------------------------------------------------------------------------
/website/src/guide/index.md:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | **vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reuseable chart components.
4 |
5 | Supports Chart.js v4.
6 |
7 | ## Introduction
8 |
9 | `vue-chartjs` lets you use Chart.js without much hassle inside Vue. It's perfect for people who need simple charts up and running as fast as possible.
10 |
11 | It abstracts the basic logic but exposes the Chart.js object to give you maximal flexibility.
12 |
13 | :::tip Need an API to fetch data?
14 | Please consider [Cube](https://cube.dev/?ref=eco-vue-chartjs), an open-source API for data apps.
15 | :::
16 |
17 | ## Installation
18 |
19 | You can install `vue-chartjs` over `yarn` or `npm` or `pnpm`. However, you also need to add `chart.js` as a dependency to your project because `Chart.js` is a peerDependency. This way you can have full control over the versioning of `Chart.js`.
20 |
21 | ```bash
22 | pnpm add vue-chartjs chart.js
23 | # or
24 | yarn add vue-chartjs chart.js
25 | # or
26 | npm i vue-chartjs chart.js
27 | ```
28 |
29 | ## Integration
30 |
31 | Every chart type that is available in Chart.js is exported as a named component and can be imported as such. These components are normal Vue components.
32 |
33 | The idea behind vue-chartjs is to provide easy-to-use components, with maximal flexibility and extensibility.
34 |
35 | ## Creating your first Chart
36 |
37 | First, you need to import the base chart.
38 |
39 | ```javascript
40 | import { Bar } from 'vue-chartjs'
41 | ```
42 |
43 | Check out the official [Chart.js docs](http://www.chartjs.org/docs/latest/#creating-a-chart) to see the object structure you need to provide.
44 |
45 | Just create your own component.
46 |
47 | **BarChart.vue**
48 |
49 | ```vue
50 |
51 |
56 |
57 |
58 |
80 | ```
81 |
82 | Use it in your vue app:
83 |
84 | **App.vue**
85 |
86 | ```vue
87 |
88 |
89 |
90 |
91 |
99 | ```
100 |
101 | ## Updating Charts
102 |
103 | Since v4 charts have data change watcher and options change watcher by default. Wrapper will update or re-render the chart if new data or new options is passed. Mixins have been removed.
104 |
105 | ```vue
106 |
107 |
108 |
109 |
110 |
126 | ```
127 |
128 | You may get Vue's `Target is readonly` warnings when you are updating your `chartData`.
129 |
130 | If your `chartData` is a `read-only` reactive value, you can override this warning by using a clone:
131 |
132 | ```vue
133 |
134 |
135 |
136 | ```
137 |
138 | Unless you have a writable computed `chartData`, you won't be able to use the newer `structuredClone`, as you'll likely hit the `Write operation failed: computed value is readonly` error.
139 |
140 | You don't need to use a clone if your `chartData` is a [writable computed value](https://vuejs.org/guide/essentials/computed#writable-computed).
141 |
142 |
143 |
144 | ## Access to Chart instance
145 |
146 | You can get access to chart instance via template refs.
147 |
148 | ```vue
149 |
150 |
151 |
152 | ```
153 |
154 | In Vue3 projects:
155 |
156 | ```javascript
157 | const chartInstance = this.$refs.bar.chart
158 | ```
159 |
160 | ## Accessibility
161 |
162 | To make your charts accessible to all users, you should label your charts.
163 | Please refer also to the official [Chart.js Accessibility notes](https://www.chartjs.org/docs/latest/general/accessibility.html).
164 |
165 | ### `aria-label`
166 |
167 | You can directly label a chart by passing an `aria-label` prop.
168 |
169 | ```vue
170 |
171 |
172 |
173 | ```
174 |
175 | ### `aria-describedby`
176 |
177 | You can reference to a describing element such as a table which describes the data by using the `aria-describedby` property.
178 |
179 | ```vue
180 |
181 |
182 |
183 | Sales figures for the years 2022 to 2024.
184 |
185 |
186 | | 2022 |
187 | 2023 |
188 | 2024 |
189 |
190 |
191 |
192 |
193 | | 987 |
194 | 1209 |
195 | 825 |
196 |
197 |
198 |
199 |
200 | ```
201 |
202 | ### Fallback-Content
203 |
204 | In case the Browser is not able to render the `canvas` element, you should consider providing fallback content by using the Slot of each component.
205 |
206 | ```vue
207 |
208 | Chart couldn't be loaded.
209 |
210 | ```
211 |
--------------------------------------------------------------------------------
/website/src/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: home
3 | hero:
4 | name: 📈 vue-chartjs
5 | tagline: ⚡ Easy and beautiful charts with Chart.js and Vue.js
6 | actions:
7 | - theme: brand
8 | text: Get Started →
9 | link: /guide/
10 | features:
11 | - icon: 🙌
12 | title: Easy
13 | details: Easy for both beginners and pros
14 | - icon: 💪
15 | title: Extendable
16 | details: Simple to use, easy to extend
17 | - icon: 💯
18 | title: Powerful
19 | details: With the full power of chart.js 💯
20 | ---
21 |
--------------------------------------------------------------------------------
/website/src/migration-guides/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: doc
3 | ---
4 |
5 | # Migration
6 |
7 | Over the time `vue-chartjs` has changed a lot. As the web and frontend technology has changed.
8 | To keep up with the speed of evolution we have iterated and changed a lot. For a smooth transition between version please check the migration guides.
9 |
10 |
11 | - [v4 -> v5](/migration-guides/v5)
12 | - [v3 -> v4](/migration-guides/v4)
13 | - [vue-chart-3](/migration-guides/vue-chart-3)
14 |
--------------------------------------------------------------------------------
/website/src/migration-guides/v4.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: doc
3 | ---
4 | # Migration from v3 to v4
5 |
6 | With v4, this library introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.
7 |
8 | v4 is fully compatible with Chart.js v3.
9 |
10 | ## Tree-shaking
11 |
12 | v4 of this library, [just like Chart.js v3](https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#setup-and-installation), is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.
13 |
14 | For a list of all the available items to import, see [Chart.js docs](https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc).
15 |
16 | v3:
17 |
18 | ```javascript
19 | import { Bar } from 'vue-chartjs'
20 | ```
21 |
22 | v4 — lazy way:
23 |
24 | ```javascript
25 | import 'chart.js/auto';
26 | import { Bar } from 'vue-chartjs'
27 | ```
28 |
29 | v4 — tree-shakable way:
30 |
31 | ```javascript
32 | import { Bar } from 'vue-chartjs'
33 | import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
34 |
35 | ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
36 | ```
37 |
38 | Using the "lazy way" is okay to simplify the migration, but please consider using the tree-shakable way to decrease the bundle size.
39 |
40 | Please note that typed chart components register their controllers by default, so you don't need to register them by yourself. For example, when using the Pie component, you don't need to register PieController explicitly.
41 |
42 | ```javascript
43 | import { Pie } from 'vue-chartjs'
44 | import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
45 |
46 | ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
47 | ```
48 |
49 | ## Changing the creation of Charts
50 |
51 | In v3, you needed to import the component, and then either use extends or mixins and add it.
52 |
53 | v3:
54 |
55 | ```javascript
56 | // BarChart.js
57 | import { Bar } from 'vue-chartjs'
58 |
59 | export default {
60 | extends: Bar,
61 | mounted () {
62 | // Overwriting base render method with actual data.
63 | this.renderChart({
64 | labels: ['January', 'February', 'March'],
65 | datasets: [
66 | {
67 | label: 'GitHub Commits',
68 | backgroundColor: '#f87979',
69 | data: [40, 20, 12]
70 | }
71 | ]
72 | })
73 | }
74 | }
75 | ```
76 |
77 | ```vue
78 |
79 |
80 |
81 |
82 |
90 | ```
91 |
92 | In v4, you need to import the component, pass props to it, and use Chart component as a standard Vue component.
93 |
94 | ```vue
95 |
96 |
97 |
98 |
99 |
125 | ```
126 |
127 | ## New reactivity system
128 |
129 | v3 does not update or re-render the chart if new data is passed. You needed to use `reactiveProp` and `reactiveData` mixins for that.
130 |
131 | v3:
132 |
133 | ```javascript
134 | import { Line, mixins } from 'vue-chartjs'
135 |
136 | export default {
137 | extends: Line,
138 | mixins: [mixins.reactiveProp],
139 | props: ['chartData', 'options'],
140 | mounted () {
141 | this.renderChart(this.chartData, this.options)
142 | }
143 | }
144 | ```
145 |
146 | v4 charts have data change watcher by default. v4 will update or re-render the chart if new data is passed. Mixins have been removed.
147 |
148 | v4:
149 |
150 | ```vue
151 |
152 |
153 |
154 |
155 |
170 | ```
171 |
--------------------------------------------------------------------------------
/website/src/migration-guides/v5.md:
--------------------------------------------------------------------------------
1 | # Migration from v4 to v5
2 |
3 | With v5, this library introduces a number of breaking changes
4 |
5 | ## ESM
6 |
7 | ### v5.0
8 |
9 | Chart.js v4 and vue-chartjs v5 are [ESM-only packages](https://nodejs.org/api/esm.html). To use them in your project, it also should be ESM:
10 |
11 | ```json
12 | // package.json
13 | {
14 | "type": "module"
15 | }
16 | ```
17 |
18 | If you are experiencing this problem with Jest, you should follow [this doc](https://jestjs.io/docs/ecmascript-modules) to enable ESM support. Or, we can recommend you migrate to [Vitest](https://vitest.dev/). Vitest has ESM support out of the box and [has almost the same API as Jest](https://vitest.dev/guide/migration.html#migrating-from-jest). [Here is our example of migration](https://github.com/reactchartjs/react-chartjs-2/commit/7f3ec96101d21e43cae8cbfe5e09a46a17cff1ef).
19 |
20 |
21 | ### v5.1
22 |
23 | Chart.js v4.1 and vue-chartjs v5.1 have restored the CommonJS support.
24 |
25 | ## API changes
26 |
27 | - `chartData` props were renamed to `data`
28 | - `chartOptions` props were renamed to `options`
29 | - unknown props will fall through to the canvas element.
30 | - `generateChart` were refactored and renamed to `createTypedChart`
31 | - Vue.js < 2.7 is no longer supported. If you want to use vue-chartjs with Vue < 2.7 you have to lock your version to 4.x.
32 |
--------------------------------------------------------------------------------
/website/src/migration-guides/vue-chart-3.md:
--------------------------------------------------------------------------------
1 |
2 | # Migration from vue-chart-3
3 |
4 | ## Uninstall vue-chart-3
5 |
6 | ```bash
7 | pnpm rm vue-chart-3
8 | # or
9 | yarn remove vue-chart-3
10 | # or
11 | npm uninstall vue-chart-3
12 | ```
13 |
14 | ## Install vue-chartjs
15 |
16 | ```bash
17 | pnpm add vue-chartjs
18 | # or
19 | yarn add vue-chartjs
20 | # or
21 | npm i vue-chartjs
22 | ```
23 |
24 | ## Change component import path
25 |
26 | For Vue 2.7 and Vue 3 projects:
27 |
28 | ```javascript
29 | import { /* component */ } from 'vue-chartjs'
30 | ```
31 |
32 | For Vue 2 (<2.7) projects:
33 |
34 | ```javascript
35 | import { /* component */ } from 'vue-chartjs/legacy'
36 | ```
37 |
38 | ## Rename components
39 |
40 | - BarChart to Bar
41 | - DoughnutChart to Doughnut
42 | - LineChart to Line
43 | - PieChart to Pie
44 | - PolarAreaChart to PolarArea
45 | - RadarChart to Radar
46 | - BubbleChart to Bubble
47 | - ScatterChart to Scatter
48 |
49 | ## Rename props
50 |
51 | - options to chartOptions
52 |
--------------------------------------------------------------------------------
/website/src/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-chartjs-docs",
3 | "private": true
4 | }
5 |
--------------------------------------------------------------------------------
/website/src/pnpm-lock.yaml:
--------------------------------------------------------------------------------
1 | lockfileVersion: '9.0'
2 |
3 | settings:
4 | autoInstallPeers: true
5 | excludeLinksFromLockfile: false
6 |
7 | importers:
8 |
9 | .: {}
10 |
--------------------------------------------------------------------------------
/website/src/public/vue-chartjs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apertureless/vue-chartjs/981b1f58141765513bd30b29112664b2a3d13ed8/website/src/public/vue-chartjs.png
--------------------------------------------------------------------------------
4 |
5 | **vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reuseable chart components.
6 |
7 | Supports Chart.js v4.
8 |
9 | [](https://badge.fury.io/js/vue-chartjs)
10 | [](https://codecov.io/gh/apertureless/vue-chartjs)
11 | [](https://github.com/apertureless/vue-chartjs/actions)
12 | [](http://packagequality.com/#?package=vue-chartjs)
13 | [](https://www.npmjs.com/package/vue-chartjs)
14 | [](https://gitter.im/vue-chartjs/Lobby)
15 | [](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
16 | [](https://cdnjs.com/libraries/vue-chartjs)
17 | [](https://snyk.io/test/github/apertureless/vue-chartjs)
18 | [](https://www.paypal.me/apertureless/50eur)
19 | [](https://ko-fi.com/C0C1WP7C)
20 |
21 |