vue-apexcharts - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

dist/vue-apexcharts.js

@@ -96,7 +96,25 @@ (function (global, factory) {
       },
-      updateSeries: function updateSeries() {
-        this.$emit('updateSeries');
+      updateSeries: function updateSeries(newSeries, animate) {
+        this.chart.updateSeries(newSeries, animate);
       },
-      updateOptions: function updateOptions() {
-        this.$emit('updateOptions');
+      updateOptions: function updateOptions(newOptions, redrawPaths, animate) {
+        this.chart.updateOptions(newOptions, redrawPaths, animate);
+      },
+      toggleSeries: function toggleSeries(seriesName) {
+        this.chart.toggleSeries(seriesName);
+      },
+      appendData: function appendData(newData) {
+        this.chart.appendData(newData);
+      },
+      addText: function addText(options) {
+        this.chart.addText(options);
+      },
+      addXaxisAnnotation: function addXaxisAnnotation(options) {
+        this.chart.addXaxisAnnotation(options);
+      },
+      addYaxisAnnotation: function addYaxisAnnotation(options) {
+        this.chart.addYaxisAnnotation(options);
+      },
+      addPointAnnotation: function addPointAnnotation(options) {
+        this.chart.addPointAnnotation(options);
       }
@@ -103,0 +121,0 @@ }

example/package.json

@@ -11,3 +11,3 @@ {
   "dependencies": {
-    "apexcharts": "^2.1.2",
+    "apexcharts": "^2.1.6",
     "vue": "^2.5.17",
@@ -19,3 +19,3 @@ "vue-apexcharts": "^1.1.1",
     "@vue/cli-plugin-babel": "^3.0.0-rc.12",
-    "@vue/cli-plugin-eslint": "^3.0.0-rc.12",
+    "@vue/cli-plugin-eslint": "^3.0.5",
     "@vue/cli-service": "^3.0.0-rc.12",
@@ -22,0 +22,0 @@ "vue-template-compiler": "^2.5.17"

package.json

 {
   "name": "vue-apexcharts",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Vue.js wrapper for ApexCharts",
@@ -26,3 +26,3 @@ "main": "dist/vue-apexcharts.js",
   "peerDependencies": {
-    "apexcharts": "^2.1.4"
+    "apexcharts": "^2.1.6"
   },
@@ -29,0 +29,0 @@ "devDependencies": {

README.md

@@ -69,8 +69,8 @@ <p align="center"><img src="https://apexcharts.com/media/vue-apexcharts.png"></p>
 This will render the following chart
-<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/column-charts/"><img src="https://apexcharts.com/media/first-bar-chart.svg"></a></p>
+<p><a href="https://apexcharts.com/javascript-chart-demos/column-charts/"><img src="https://apexcharts.com/media/first-bar-chart.svg"></a></p>
 
 ### How do I update the chart?
 
-Simple! Just change the `series` or any `option` and it will automatically re-render the chart. Have a look at the below example to see this in action
-<p align="center"><a href="#"><img src="https://apexcharts.com/media/vue-chart-updation.gif"></a></p>
+Simple! Just change the `series` or any `option` and it will automatically re-render the chart. <br/> Click on the below example to see this in action
+<p><a href="https://codesandbox.io/s/voyy36o7y"><img src="https://apexcharts.com/media/vue-chart-updation.gif"></a></p>
 
@@ -136,3 +136,3 @@ ```vue
 | **series***| Array | The series is an array which accepts object in the following format. To know more about the format of dataSeries, checkout [Series](https://apexcharts.com/docs/series/) docs on the website. |
-| **type*** | String  | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar`  |
+| **type*** | String  | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar`, `candlestick`  |
 | **width** | Number/String  | Possible values for width can be `100%` or `400px` or 400 |
@@ -143,6 +143,34 @@ | **height** | Number/String | Possible values for width can be `100%` or `300px` or 300 |
 
-## How to call methods of ApexCharts programatically?
+## Methods
+| Method        | Description    |
+| ------------- | -----|
+| <a href="https://apexcharts.com/docs/methods/#updateSeries">updateSeries</a> | Allows you to update the series array overriding the existing one |
+| <a href="https://apexcharts.com/docs/methods/#updateOptions">updateOptions</a> | Allows you to update the configuration object |
+| <a href="https://apexcharts.com/docs/methods/#toggleSeries">toggleSeries</a> | Allows you to toggle the visibility of series programatically. Useful when you have custom legend. |
+| <a href="https://apexcharts.com/docs/methods/#appendData">appendData</a> | Allows you to append new data to the series array. |
+| <a href="https://apexcharts.com/docs/methods/#addtext">addText</a> | The addText() method can be used to draw text after chart is rendered. |
+| <a href="https://apexcharts.com/docs/methods/#addxaxisannotation">addXaxisAnnotation</a> | Draw x-axis annotations after chart is rendered. |
+| <a href="https://apexcharts.com/docs/methods/#addyaxisannotation">addYaxisAnnotation</a> | Draw y-axis annotations after chart is rendered. |
+| <a href="https://apexcharts.com/docs/methods/#addpointannotation">addPointAnnotation</a> | Draw point (xy) annotations after chart is rendered. |
 
-Sometimes, you may want to call other methods of the core ApexCharts library, and you can do so on `this.$apexcharts` global variable directly
+How to call the methods mentioned above?
 
+```html
+<template>
+  <div class="example">
+    <apexcharts ref="chart" width="500" :options="chartOptions" :series="series"></apexcharts>
+  </div>
+</template>
+
+<script>
+  functionName: function() {
+    this.$refs.chart.updateOptions({ colors: newColors })
+  },
+</script>
+```
+
+## How to call methods of ApexCharts without referencing the chart element?
+
+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 <code>chart.id</code> while calling this method
+
 Example
@@ -199,4 +227,10 @@ ```js
 
+
+## Supporting ApexCharts
+ApexCharts is an open source project. <br /> You can help by becoming a sponsor on <a href="https://patreon.com/junedchhipa">Patreon</a> or doing a one time donation on <a href="https://paypal.me/junedchhipa">PayPal</a> <br />
+
+<a href="https://patreon.com/junedchhipa"><img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become a Patron" /> </a>
+
 ## License
 
 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.

src/ApexCharts.component.js

@@ -88,9 +88,27 @@ import ApexCharts from 'apexcharts'
     },
-    updateSeries() {
-      this.$emit('updateSeries')
+    updateSeries(newSeries, animate) {
+      this.chart.updateSeries(newSeries, animate)
     },
-    updateOptions() {
-      this.$emit('updateOptions')
-    }
+    updateOptions(newOptions, redrawPaths, animate) {
+      this.chart.updateOptions(newOptions, redrawPaths, animate)
+    },
+    toggleSeries(seriesName) {
+      this.chart.toggleSeries(seriesName)
+    },
+    appendData(newData) {
+      this.chart.appendData(newData)
+    },
+    addText(options) {
+      this.chart.addText(options)
+    },
+    addXaxisAnnotation(options) {
+      this.chart.addXaxisAnnotation(options)
+    },
+    addYaxisAnnotation(options) {
+      this.chart.addYaxisAnnotation(options)
+    },
+    addPointAnnotation(options) {
+      this.chart.addPointAnnotation(options)
+    },
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46277

increased by8%

Lines of code

309

increased by13.19%

Number of lines in readme file

233

increased by17.09%

No dependency changes