### Install Dependencies for Examples

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

Navigate to the example directory and run npm install to set up the necessary dependencies for running the provided examples.

```bash
cd example
npm install
npm run serve
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

Run npm install in the project's root directory to install all development dependencies.

```bash
npm install
```

--------------------------------

### Install Vue-ApexCharts

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

Install the apexcharts and vue-apexcharts packages using npm.

```bash
npm install --save apexcharts
npm install --save vue-apexcharts
```

--------------------------------

### Basic Bar Chart Example

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

Create a basic bar chart using the apexchart component with minimal configuration.

```vue
<template>
   <div>
     <apexchart width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
   </div>
</template>
```

```javascript
export default {
    data: function() {
      return {
        chartOptions: {
          chart: {
            id: 'vuechart-example'
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
          }
        },
        series: [{
          name: 'series-1',
          data: [30, 40, 35, 50, 49, 60, 70, 91]
        }]
      }
    },
};

```

--------------------------------

### Build Project

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

Execute npm run build to bundle the project for production.

```bash
npm run build
```

--------------------------------

### Updating Chart Options Correctly

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

Demonstrates the correct way to update nested chart options to ensure reactivity. Always update the outermost property.

```javascript
this.chartOptions = {...this.chartOptions, ...{
    xaxis: {
        labels: {
           style: {
             colors: ['red']
           }
        }
    }
}}

```

--------------------------------

### Component Methods

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

Methods that can be called on the Vue ApexCharts component instance to interact with the chart.

```APIDOC
## Methods

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.

| 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. |

### 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 `chart.id` while calling this method

Example
```js
this.$apexcharts.exec('vuechart-example', 'updateSeries', [{
  data: [40, 55, 65, 11, 23, 44, 54, 33]
}])
```
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.

More info on the `.exec()` method can be found <a href="https://apexcharts.com/docs/methods/#exec">here</a>

All other methods of ApexCharts can be called the same way.
```

--------------------------------

### Update Chart Options in Vue

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

Use the ref attribute to access the chart instance and call updateOptions to modify chart configurations. Ensure the chart component has a ref assigned.

```html
<template>
  <div class="example">
    <apexchart ref="demoChart" width="500" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
  functionName: function() {
    this.$refs.demoChart.updateOptions({ colors: newColors })
  },
</script>
```

--------------------------------

### Register Vue-ApexCharts Component

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

Register the VueApexCharts component globally in your Vue application.

```javascript
import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)
```

--------------------------------

### Component Props

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

These are the properties you can pass to the Vue ApexCharts component to configure its behavior and appearance.

```APIDOC
## Props

| Prop        | Type           | Description  |
| ------------- |-------------| -----|
| **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. |
| **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` |
| **height** | Number/String | Possible values for height can be `100%` or `300px` or `300` |
| **options** | Object | The configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/) |
```

--------------------------------

### Execute ApexCharts Methods Globally in Vue

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

Call ApexCharts methods directly on the global $apexcharts object, referencing the chart by its ID. This is useful for updating charts from outside the component. The third parameter is the data payload for the method.

```javascript
this.$apexcharts.exec('vuechart-example', 'updateSeries', [{
  data: [40, 55, 65, 11, 23, 44, 54, 33]
}])
```

--------------------------------

### Update Chart Dynamically

Source: https://github.com/apexcharts/vue-apexcharts/blob/master/README.md

Update chart data and options dynamically by modifying the series or chartOptions properties. Ensure the outermost property is updated to trigger Vue's reactivity.

```vue
<template>
   <div class="app">
     <apexchart width="550" type="bar" :options="chartOptions" :series="series"></apexchart>
     <div>
       <button @click="updateChart">Update!</button>
    </div>
   </div>

</template>
```

```javascript
export default {
    data: function() {
      return {
        chartOptions: {
          chart: {
            id: 'vuechart-example',
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
          },
        },
        series: [{
          name: 'series-1',
          data: [30, 40, 45, 50, 49, 60, 70, 81]
        }]
      }
    },
    methods: {
      updateChart() {
        const max = 90;
        const min = 20;
        const newData = this.series[0].data.map(() => {
          return Math.floor(Math.random() * (max - min + 1)) + min
        })

        const colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']

        // Make sure to update the whole options config and not just a single property to allow the Vue watch catch the change.
        this.chartOptions = {
          colors: [colors[Math.floor(Math.random()*colors.length)]]
        };
        // In the same way, update the series option
        this.series = [{
          data: newData
        }]
      }
    }
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.