ApexCharts Vue

Setup

Compatible with Vue >=3 Apexcharts is required to be installed in your project.

1# yarn
2yarn install apexcharts @damilaredev/apexcharts-vue
3
4# npm
5npm i apexcharts @damilaredev/apexcharts-vue
6
7# pnpm
8pnpm i apexcharts @damilaredev/apexcharts-vue

Usage

1import { createApp } from 'vue'
2import ApexChartsVue from '@damilaredev/apexcharts-vue'
3import App from './App.vue'
4
5createApp(App).use(ApexChartsVue).mount('#app')

Props

1type Props = {
2  /**
3   * Graph type prop
4   *
5   * @default 'line'
6   *
7   * @property
8   * @name type
9   * @type {string | undefined}
10   */
11  type?:
12    | 'line'
13    | 'area'
14    | 'bar'
15    | 'pie'
16    | 'donut'
17    | 'radialBar'
18    | 'scatter'
19    | 'bubble'
20    | 'heatmap'
21    | 'candlestick'
22    | 'boxPlot'
23    | 'radar'
24    | 'polarArea'
25    | 'rangeBar'
26    | 'rangeArea'
27    | 'treemap'
28
29  /**
30   * Graph config options
31   *
32   * @default '100%'
33   *
34   * @property
35   * @name options
36   * @type {ApexOptions | undefined}
37   */
38  options?: ApexOptions
39
40  /**
41   * Graph data prop
42   *
43   * @default '[]'
44   *
45   * @property
46   * @name series
47   * @type {ApexAxisChartSeries | ApexNonAxisChartSeries | undefined}
48   */
49  series?: ApexAxisChartSeries | ApexNonAxisChartSeries
50
51  /**
52   * Graph width
53   *
54   * @default '100%'
55   *
56   * @property
57   * @name width
58   * @type {string | number | undefined}
59   */
60  width?: string | number
61
62  /**
63   * Graph height
64   *
65   * @default '100%'
66   *
67   * @property
68   * @name height
69   * @type {string | number | undefined}
70   */
71  height?: string | number
72}

Example

Check out the GitHub example repo for sample usage.