3 |
5 |
6 |
7 |
111 |
--------------------------------------------------------------------------------
/example/src/charts/ScatterExample.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
135 |
--------------------------------------------------------------------------------
/src/ApexCharts.component.js:
--------------------------------------------------------------------------------
1 | import ApexCharts from "apexcharts/dist/apexcharts.min";
2 |
3 | export default {
4 | props: {
5 | options: {
6 | type: Object
7 | },
8 | type: {
9 | type: String
10 | },
11 | series: {
12 | type: Array,
13 | required: true,
14 | default: () => []
15 | },
16 | width: {
17 | default: "100%"
18 | },
19 | height: {
20 | default: "auto"
21 | }
22 | },
23 | data() {
24 | return {
25 | chart: null
26 | };
27 | },
28 | beforeMount() {
29 | window.ApexCharts = ApexCharts;
30 | },
31 | mounted() {
32 | this.init();
33 | },
34 | created() {
35 | let watched = ["type", "width", "height"];
36 | watched.forEach(prop => {
37 | this.$watch(prop, () => {
38 | this.refresh();
39 | });
40 | });
41 |
42 | this.$watch("options", options => {
43 | if (!this.chart && options) {
44 | this.init();
45 | } else {
46 | this.chart.updateOptions(this.options);
47 | }
48 | });
49 |
50 | this.$watch("series", series => {
51 | if (!this.chart && series) {
52 | this.init();
53 | } else {
54 | this.chart.updateSeries(this.series);
55 | }
56 | });
57 | },
58 | beforeUnmount() {
59 | if (!this.chart) {
60 | return;
61 | }
62 | this.destroy();
63 | },
64 | render(createElement) {
65 | return createElement("div");
66 | },
67 | methods: {
68 | init() {
69 | const newOptions = {
70 | chart: {
71 | type: this.type || this.options.chart.type || "line",
72 | height: this.height,
73 | width: this.width,
74 | events: {}
75 | },
76 | series: this.series
77 | };
78 |
79 | Object.keys(this.$listeners).forEach(evt => {
80 | newOptions.chart.events[evt] = this.$listeners[evt];
81 | });
82 |
83 | const config = this.extend(this.options, newOptions);
84 | this.chart = new ApexCharts(this.$el, config);
85 | return this.chart.render();
86 | },
87 | isObject(item) {
88 | return (
89 | item && typeof item === "object" && !Array.isArray(item) && item != null
90 | );
91 | },
92 | extend(target, source) {
93 | if (typeof Object.assign !== "function") {
94 | (function() {
95 | Object.assign = function(target) {
96 | // We must check against these specific cases.
97 | if (target === undefined || target === null) {
98 | throw new TypeError("Cannot convert undefined or null to object");
99 | }
100 |
101 | let output = Object(target);
102 | for (let index = 1; index < arguments.length; index++) {
103 | let source = arguments[index];
104 | if (source !== undefined && source !== null) {
105 | for (let nextKey in source) {
106 | if (source.hasOwnProperty(nextKey)) {
107 | output[nextKey] = source[nextKey];
108 | }
109 | }
110 | }
111 | }
112 | return output;
113 | };
114 | })();
115 | }
116 |
117 | let output = Object.assign({}, target);
118 | if (this.isObject(target) && this.isObject(source)) {
119 | Object.keys(source).forEach(key => {
120 | if (this.isObject(source[key])) {
121 | if (!(key in target)) {
122 | Object.assign(output, {
123 | [key]: source[key]
124 | });
125 | } else {
126 | output[key] = this.extend(target[key], source[key]);
127 | }
128 | } else {
129 | Object.assign(output, {
130 | [key]: source[key]
131 | });
132 | }
133 | });
134 | }
135 | return output;
136 | },
137 | refresh() {
138 | this.destroy();
139 | return this.init();
140 | },
141 | destroy() {
142 | this.chart.destroy();
143 | },
144 | updateSeries(newSeries, animate) {
145 | return this.chart.updateSeries(newSeries, animate);
146 | },
147 | updateOptions(newOptions, redrawPaths, animate, updateSyncedCharts) {
148 | return this.chart.updateOptions(
149 | newOptions,
150 | redrawPaths,
151 | animate,
152 | updateSyncedCharts
153 | );
154 | },
155 | toggleSeries(seriesName) {
156 | return this.chart.toggleSeries(seriesName);
157 | },
158 | showSeries(seriesName) {
159 | this.chart.showSeries(seriesName);
160 | },
161 | hideSeries(seriesName) {
162 | this.chart.hideSeries(seriesName);
163 | },
164 | appendSeries(newSeries, animate) {
165 | return this.chart.appendSeries(newSeries, animate);
166 | },
167 | resetSeries() {
168 | this.chart.resetSeries();
169 | },
170 | zoomX(min, max) {
171 | this.chart.zoomX(min, max)
172 | },
173 | toggleDataPointSelection(seriesIndex, dataPointIndex) {
174 | this.chart.toggleDataPointSelection(seriesIndex, dataPointIndex);
175 | },
176 | appendData(newData) {
177 | return this.chart.appendData(newData);
178 | },
179 | addText(options) {
180 | this.chart.addText(options);
181 | },
182 | addImage(options) {
183 | this.chart.addImage(options);
184 | },
185 | addShape(options) {
186 | this.chart.addShape(options);
187 | },
188 | dataURI(options) {
189 | return this.chart.dataURI(options);
190 | },
191 | setLocale(localeName) {
192 | return this.chart.setLocale(localeName);
193 | },
194 | addXaxisAnnotation(options, pushToMemory) {
195 | this.chart.addXaxisAnnotation(options, pushToMemory);
196 | },
197 | addYaxisAnnotation(options, pushToMemory) {
198 | this.chart.addYaxisAnnotation(options, pushToMemory);
199 | },
200 | addPointAnnotation(options, pushToMemory) {
201 | this.chart.addPointAnnotation(options, pushToMemory);
202 | },
203 | removeAnnotation(id, options) {
204 | this.chart.removeAnnotation(id, options);
205 | },
206 | clearAnnotations() {
207 | this.chart.clearAnnotations();
208 | }
209 | }
210 | };
211 |
--------------------------------------------------------------------------------
/dist/vue-apexcharts.js:
--------------------------------------------------------------------------------
1 | (function (global, factory) {
2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('apexcharts/dist/apexcharts.min')) :
3 | typeof define === 'function' && define.amd ? define(['apexcharts/dist/apexcharts.min'], factory) :
4 | (global.VueApexCharts = factory(global.ApexCharts));
5 | }(this, (function (ApexCharts) { 'use strict';
6 |
7 | ApexCharts = ApexCharts && ApexCharts.hasOwnProperty('default') ? ApexCharts['default'] : ApexCharts;
8 |
9 | function _typeof(obj) {
10 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
11 | _typeof = function (obj) {
12 | return typeof obj;
13 | };
14 | } else {
15 | _typeof = function (obj) {
16 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
17 | };
18 | }
19 |
20 | return _typeof(obj);
21 | }
22 |
23 | function _defineProperty(obj, key, value) {
24 | if (key in obj) {
25 | Object.defineProperty(obj, key, {
26 | value: value,
27 | enumerable: true,
28 | configurable: true,
29 | writable: true
30 | });
31 | } else {
32 | obj[key] = value;
33 | }
34 |
35 | return obj;
36 | }
37 |
38 | var ApexChartsComponent = {
39 | props: {
40 | options: {
41 | type: Object
42 | },
43 | type: {
44 | type: String
45 | },
46 | series: {
47 | type: Array,
48 | required: true,
49 | default: function _default() {
50 | return [];
51 | }
52 | },
53 | width: {
54 | default: "100%"
55 | },
56 | height: {
57 | default: "auto"
58 | }
59 | },
60 | data: function data() {
61 | return {
62 | chart: null
63 | };
64 | },
65 | beforeMount: function beforeMount() {
66 | window.ApexCharts = ApexCharts;
67 | },
68 | mounted: function mounted() {
69 | this.init();
70 | },
71 | created: function created() {
72 | var _this = this;
73 |
74 | this.$watch("options", function (options) {
75 | if (!_this.chart && options) {
76 | _this.init();
77 | } else {
78 | _this.chart.updateOptions(_this.options);
79 | }
80 | });
81 | this.$watch("series", function (series) {
82 | if (!_this.chart && series) {
83 | _this.init();
84 | } else {
85 | _this.chart.updateSeries(_this.series);
86 | }
87 | });
88 | var watched = ["type", "width", "height"];
89 | watched.forEach(function (prop) {
90 | _this.$watch(prop, function () {
91 | _this.refresh();
92 | });
93 | });
94 | },
95 | beforeDestroy: function beforeDestroy() {
96 | if (!this.chart) {
97 | return;
98 | }
99 |
100 | this.destroy();
101 | },
102 | render: function render(createElement) {
103 | return createElement("div");
104 | },
105 | methods: {
106 | init: function init() {
107 | var _this2 = this;
108 |
109 | var newOptions = {
110 | chart: {
111 | type: this.type || this.options.chart.type || "line",
112 | height: this.height,
113 | width: this.width,
114 | events: {}
115 | },
116 | series: this.series
117 | };
118 | Object.keys(this.$listeners).forEach(function (evt) {
119 | newOptions.chart.events[evt] = _this2.$listeners[evt];
120 | });
121 | var config = this.extend(this.options, newOptions);
122 | this.chart = new ApexCharts(this.$el, config);
123 | return this.chart.render();
124 | },
125 | isObject: function isObject(item) {
126 | return item && _typeof(item) === "object" && !Array.isArray(item) && item != null;
127 | },
128 | extend: function extend(target, source) {
129 | var _this3 = this;
130 |
131 | if (typeof Object.assign !== "function") {
132 | (function () {
133 | Object.assign = function (target) {
134 | // We must check against these specific cases.
135 | if (target === undefined || target === null) {
136 | throw new TypeError("Cannot convert undefined or null to object");
137 | }
138 |
139 | var output = Object(target);
140 |
141 | for (var index = 1; index < arguments.length; index++) {
142 | var _source = arguments[index];
143 |
144 | if (_source !== undefined && _source !== null) {
145 | for (var nextKey in _source) {
146 | if (_source.hasOwnProperty(nextKey)) {
147 | output[nextKey] = _source[nextKey];
148 | }
149 | }
150 | }
151 | }
152 |
153 | return output;
154 | };
155 | })();
156 | }
157 |
158 | var output = Object.assign({}, target);
159 |
160 | if (this.isObject(target) && this.isObject(source)) {
161 | Object.keys(source).forEach(function (key) {
162 | if (_this3.isObject(source[key])) {
163 | if (!(key in target)) {
164 | Object.assign(output, _defineProperty({}, key, source[key]));
165 | } else {
166 | output[key] = _this3.extend(target[key], source[key]);
167 | }
168 | } else {
169 | Object.assign(output, _defineProperty({}, key, source[key]));
170 | }
171 | });
172 | }
173 |
174 | return output;
175 | },
176 | refresh: function refresh() {
177 | this.destroy();
178 | return this.init();
179 | },
180 | destroy: function destroy() {
181 | this.chart.destroy();
182 | },
183 | updateSeries: function updateSeries(newSeries, animate) {
184 | return this.chart.updateSeries(newSeries, animate);
185 | },
186 | updateOptions: function updateOptions(newOptions, redrawPaths, animate, updateSyncedCharts) {
187 | return this.chart.updateOptions(newOptions, redrawPaths, animate, updateSyncedCharts);
188 | },
189 | toggleSeries: function toggleSeries(seriesName) {
190 | return this.chart.toggleSeries(seriesName);
191 | },
192 | showSeries: function showSeries(seriesName) {
193 | this.chart.showSeries(seriesName);
194 | },
195 | hideSeries: function hideSeries(seriesName) {
196 | this.chart.hideSeries(seriesName);
197 | },
198 | appendSeries: function appendSeries(newSeries, animate) {
199 | return this.chart.appendSeries(newSeries, animate);
200 | },
201 | resetSeries: function resetSeries() {
202 | this.chart.resetSeries();
203 | },
204 | zoomX: function zoomX(min, max) {
205 | this.chart.zoomX(min, max);
206 | },
207 | toggleDataPointSelection: function toggleDataPointSelection(seriesIndex, dataPointIndex) {
208 | this.chart.toggleDataPointSelection(seriesIndex, dataPointIndex);
209 | },
210 | appendData: function appendData(newData) {
211 | return this.chart.appendData(newData);
212 | },
213 | addText: function addText(options) {
214 | this.chart.addText(options);
215 | },
216 | addImage: function addImage(options) {
217 | this.chart.addImage(options);
218 | },
219 | addShape: function addShape(options) {
220 | this.chart.addShape(options);
221 | },
222 | dataURI: function dataURI(options) {
223 | return this.chart.dataURI(options);
224 | },
225 | setLocale: function setLocale(localeName) {
226 | return this.chart.setLocale(localeName);
227 | },
228 | addXaxisAnnotation: function addXaxisAnnotation(options, pushToMemory) {
229 | this.chart.addXaxisAnnotation(options, pushToMemory);
230 | },
231 | addYaxisAnnotation: function addYaxisAnnotation(options, pushToMemory) {
232 | this.chart.addYaxisAnnotation(options, pushToMemory);
233 | },
234 | addPointAnnotation: function addPointAnnotation(options, pushToMemory) {
235 | this.chart.addPointAnnotation(options, pushToMemory);
236 | },
237 | removeAnnotation: function removeAnnotation(id, options) {
238 | this.chart.removeAnnotation(id, options);
239 | },
240 | clearAnnotations: function clearAnnotations() {
241 | this.chart.clearAnnotations();
242 | }
243 | }
244 | };
245 |
246 | var VueApexCharts = ApexChartsComponent;
247 | window.ApexCharts = ApexCharts;
248 |
249 | VueApexCharts.install = function (Vue) {
250 | //adding a global method or property
251 | Vue.ApexCharts = ApexCharts;
252 | window.ApexCharts = ApexCharts; // add the instance method
253 |
254 | Object.defineProperty(Vue.prototype, '$apexcharts', {
255 | get: function get() {
256 | return ApexCharts;
257 | }
258 | });
259 | };
260 |
261 | return VueApexCharts;
262 |
263 | })));
264 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
4 | 
5 | 
6 | 
7 |
10 | 
11 |
Vue.js wrapper for ApexCharts to build interactive visualizations in vue.
14 | 15 |
40 |
42 |
43 | ```
44 |
45 | ```js
46 |
47 | export default {
48 | data: function() {
49 | return {
50 | chartOptions: {
51 | chart: {
52 | id: 'vuechart-example'
53 | },
54 | xaxis: {
55 | categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
56 | }
57 | },
58 | series: [{
59 | name: 'series-1',
60 | data: [30, 40, 35, 50, 49, 60, 70, 91]
61 | }]
62 | }
63 | },
64 | };
65 | ```
66 |
67 | This will render the following chart
68 | 
Click on the below example to see this in action 73 |
78 |
83 |
84 |
85 | ```
86 |
87 | ```js
88 | export default {
89 | data: function() {
90 | return {
91 | chartOptions: {
92 | chart: {
93 | id: 'vuechart-example',
94 | },
95 | xaxis: {
96 | categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
97 | },
98 | },
99 | series: [{
100 | name: 'series-1',
101 | data: [30, 40, 45, 50, 49, 60, 70, 81]
102 | }]
103 | }
104 | },
105 | methods: {
106 | updateChart() {
107 | const max = 90;
108 | const min = 20;
109 | const newData = this.series[0].data.map(() => {
110 | return Math.floor(Math.random() * (max - min + 1)) + min
111 | })
112 |
113 | const colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']
114 |
115 | // Make sure to update the whole options config and not just a single property to allow the Vue watch catch the change.
116 | this.chartOptions = {
117 | colors: [colors[Math.floor(Math.random()*colors.length)]]
118 | };
119 | // In the same way, update the series option
120 | this.series = [{
121 | data: newData
122 | }]
123 | }
124 | }
125 | };
126 | ```
127 |
128 |
129 | **Important:** While updating the options, make sure to update the outermost property even when you need to update the nested property.
130 |
131 | ✅ Do this
132 | ```javascript
133 | this.chartOptions = {...this.chartOptions, ...{
134 | xaxis: {
135 | labels: {
136 | style: {
137 | colors: ['red']
138 | }
139 | }
140 | }
141 | }}
142 | ```
143 |
144 | ❌ Not this
145 | ```javascript
146 | this.chartOptions.xaxis = {
147 | labels: {
148 | style: {
149 | colors: ['red']
150 | }
151 | }
152 | }}
153 | ```
154 |
155 | ## Props
156 |
157 | | Prop | Type | Description |
158 | | ------------- |-------------| -----|
159 | | **series***| Array | The series is an array which accepts an object in the following format. To know more about the format of dataSeries, checkout [Series](https://apexcharts.com/docs/series/) docs on the website. |
160 | | **type*** | String | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar`, `candlestick` |
161 | | **width** | Number/String | Possible values for width can be `100%` or `400px` or `400` |
162 | | **height** | Number/String | Possible values for height can be `100%` or `300px` or `300` |
163 | | **options** | Object | The configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/) |
164 |
165 |
166 | ## Methods
167 |
168 | You don't actually need to call updateSeries() or updateOptions() manually. Changing the props will automatically update the chart. You only need to call these methods to update the chart forcefully.
169 |
170 | | Method | Description |
171 | | ------------- | -----|
172 | | updateSeries | Allows you to update the series array overriding the existing one |
173 | | updateOptions | Allows you to update the configuration object |
174 | | toggleSeries | Allows you to toggle the visibility of series programatically. Useful when you have custom legend. |
175 | | appendData | Allows you to append new data to the series array. |
176 | | addText | The addText() method can be used to draw text after chart is rendered. |
177 | | addXaxisAnnotation | Draw x-axis annotations after chart is rendered. |
178 | | addYaxisAnnotation | Draw y-axis annotations after chart is rendered. |
179 | | addPointAnnotation | Draw point (xy) annotations after chart is rendered. |
180 |
181 | How to call the methods mentioned above?
182 |
183 | ```html
184 |
185 |
80 |
81 |
82 |
186 |
188 |
189 |
190 |
195 | ```
196 |
197 | ## How to call methods of ApexCharts without referencing the chart element?
198 |
199 | Sometimes, you may want to call methods of the core ApexCharts library from some other place, and you can do so on `this.$apexcharts` global variable directly. You need to target the chart by chart.id while calling this method
200 |
201 | Example
202 | ```js
203 | this.$apexcharts.exec('vuechart-example', 'updateSeries', [{
204 | data: [40, 55, 65, 11, 23, 44, 54, 33]
205 | }])
206 | ```
207 | In the above method, `vuechart-example` is the ID of chart, `updateSeries` is the name of the method you want to call and the third parameter is the new Series you want to update.
208 |
209 | More info on the `.exec()` method can be found here
210 |
211 | All other methods of ApexCharts can be called the same way.
212 |
213 | ## What's included
214 |
215 | The repository includes the following files and directories.
216 |
217 | ```
218 | vue-apexcharts/
219 | ├── dist/
220 | │ └── vue-apexcharts.js
221 | └── src/
222 | ├── ApexCharts.component.js
223 | ├── Utils.js
224 | └── index.js
225 | ```
226 |
227 | ## Running the examples
228 |
229 | Basic Examples are included to show how to get started using ApexCharts with Vue easily.
230 |
231 | To run the examples,
232 | ```bash
233 | cd example
234 | npm install
235 | npm run serve
236 | ```
237 |
238 | ## Development
239 |
240 | #### Install dependencies
241 |
242 | ```bash
243 | npm install
244 | ```
245 |
246 | #### Bundling
247 |
248 | ```bash
249 | npm run build
250 | ```
251 |
252 |
253 | ## Supporting ApexCharts
254 | ApexCharts is an open source project. You can help by becoming a sponsor on Patreon or doing a one time donation on PayPal
255 | 256 |
257 |
258 | ## License
259 |
260 | Vue-ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.
261 |
--------------------------------------------------------------------------------