---
metaTitle: Chart component | AwesCode UI
meta:
  - name: description
    content: The <AwChart /> component is used to render Chart - UI Vue component for AwesCode UI.
title: Chart
---

# AwChart

**Category:** Organism | **Import:** Dynamic

The `AwChart` component is a wrapper for ApexCharts.js that provides interactive charts and graphs. It dynamically loads the ApexCharts library and renders charts based on configuration options.

## Overview

`AwChart` provides a charting solution with:
- ApexCharts.js integration
- Dynamic library loading
- Reactive chart updates
- Multiple chart types support
- Customizable options

## Usage

### Basic Example

```markup
<AwChart :options="chartOptions" />
```

### Line Chart

```markup
<AwChart 
    :options="{
        series: [{
            name: 'Sales',
            data: [30, 40, 35, 50, 49, 60, 70]
        }],
        chart: {
            type: 'line'
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
        }
    }"
/>
```

### Bar Chart

```markup
<AwChart 
    :options="{
        series: [{
            name: 'Revenue',
            data: [400, 430, 448, 470, 540, 580, 690]
        }],
        chart: {
            type: 'bar'
        },
        xaxis: {
            categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
    }"
/>
```

### Pie Chart

```markup
<AwChart 
    :options="{
        series: [44, 55, 13, 43, 22],
        chart: {
            type: 'pie'
        },
        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
    }"
/>
```

### With Custom Library Version

```markup
<AwChart 
    :options="chartOptions"
    lib-version="3.35.0"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| options | ApexCharts configuration object | `Object` | `true` | - |
| libVersion | ApexCharts library version | `String` | `false` | `'latest'` |

**Options Object:**
See [ApexCharts Documentation](https://apexcharts.com/docs/) for complete options reference.

**Required Options:**
```javascript
{
  series: [{        // Required: data series
    name: 'Series 1',
    data: [1, 2, 3, 4, 5]
  }],
  chart: {
    type: 'line'    // Chart type: line, bar, pie, etc.
  }
}
```

### Slots

This component does not have slots.

### Events

This component does not emit custom events.

### Config Options

The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:

```javascript
export default {
  AwChart: {
    libVersion: 'latest'  // ApexCharts library version
  }
}
```

## Related Components

- Dashboard components (AwDashboardLine, AwDashboardDonut, etc.) - Pre-configured chart components

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Uses ApexCharts.js library (not Chart.js)
- Library is loaded dynamically from CDN (jsdelivr)
- Chart automatically updates when `options` prop changes
- Chart is destroyed on component destroy
- Chart is destroyed on route navigation
- `series` property is required in options
- See [ApexCharts documentation](https://apexcharts.com/docs/) for all chart types and options
- Library version can be specified (defaults to 'latest')
- Uses `loadjs` for dynamic script loading
- Chart instance is stored internally and can be accessed via ref (not recommended)