### Vue.js Setup for ApexCharts

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vue/line/syncing-charts.html

Initializes Vue.js and registers the ApexCharts component. This setup is required for all subsequent chart examples.

```javascript
new Vue({
  el: '#app',
  components: {
    apexchart: VueApexCharts,
  },
  data: {
    // ... chart data and options ...
  },
})

```

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

### Quick start ApexCharts bar chart

Source: https://github.com/apexcharts/apexcharts.js/blob/main/README.md

This example demonstrates how to initialize a basic bar chart using ApexCharts. Ensure you have an HTML element with the ID 'chart' to render the chart.

```javascript
import ApexCharts from 'apexCharts'

const chart = new ApexCharts(document.querySelector('#chart'), {
  chart: { type: 'bar' },
  series: [{ name: 'Sales', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }],
  xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }
})

chart.render()
```

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

### Install Project Dependencies

Source: https://github.com/apexcharts/apexcharts.js/blob/main/CONTRIBUTING.md

Run this command in the project root to install all necessary development dependencies.

```sh
npm install
```

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

### Install ApexCharts using npm

Source: https://github.com/apexcharts/apexcharts.js/blob/main/README.md

Use this command to install ApexCharts.js via npm. This is the recommended method for project integration.

```bash
npm install apexcharts
```

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

### Serve Samples with BrowserSync

Source: https://github.com/apexcharts/apexcharts.js/blob/main/CONTRIBUTING.md

Starts an HTTP server in the apexcharts.js directory to view included samples and automatically reloads the browser on file changes.

```sh
cd apexcharts.js
npx browser-sync start --server --files "." --directory --startPath "/samples"
```

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

### React Application Setup with ApexChart

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/react/sparklines/sparklines.html

Sets up a React application to render an ApexChart component. Requires ReactDOM for rendering.

```javascript
const domContainer = document.querySelector('#app')
ReactDOM.render(<ApexChart />, domContainer)
```

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

### Basic Bar Chart Configuration

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/react/bar/basic-bar.html

This snippet shows the React component setup for a basic bar chart, including series data and chart options. Ensure you have React and ApexCharts installed.

```javascript
const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
      }
    ],
    options: {
      chart: {
        type: 'bar',
        height: 350
      },
      plotOptions: {
        bar: {
          borderRadius: 4,
          borderRadiusApplication: 'end',
          horizontal: true
        }
      },
      dataLabels: {
        enabled: false
      },
      xaxis: {
        categories: [
          'South Korea',
          'Canada',
          'United Kingdom',
          'Netherlands',
          'Italy',
          'France',
          'Japan',
          'United States',
          'China',
          'Germany'
        ]
      }
    }
  });

  return (
    <div>
      <div id="chart">
        <ReactApexChart options={state.options} series={state.series} type="bar" height={350} />
      </div>
      <div id="html-dist"></div>
    </div>
  );
};

const domContainer = document.querySelector('#app');
ReactDOM.render(<ApexChart />, domContainer);
```

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

### Vue Component Setup for Basic Column Chart

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vue/column/basic-column.html

This snippet shows the Vue.js component setup, including data for chart series and options. It uses ApexCharts for rendering the chart.

```javascript
new Vue({
  el: '#app',
  components: {
    apexchart: VueApexCharts,
  },
  data: {
    series: [
      {
        name: 'Net Profit',
        data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
      },
      {
        name: 'Revenue',
        data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
      },
      {
        name: 'Free Cash Flow',
        data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
      },
    ],
    chartOptions: {
      chart: {
        type: 'bar',
        height: 350,
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 5,
          borderRadiusApplication: 'end',
        },
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent'],
      },
      xaxis: {
        categories: [
          'Feb',
          'Mar',
          'Apr',
          'May',
          'Jun',
          'Jul',
          'Aug',
          'Sep',
          'Oct',
        ],
      },
      yaxis: {
        title: {
          text: '$ (thousands)',
        },
      },
      fill: {
        opacity: 1,
      },
      tooltip: {
        y: {
          formatter: function (val) {
            return '$ ' + val + ' thousands';
          },
        },
      },
    },
  },
})
```

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

### Initialize Donut Chart

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vanilla-js/pie/donut-update.html

Initializes a donut chart with predefined series data and configuration options. This is the base setup for dynamic updates.

```javascript
var options = {
  series: [44, 55, 13, 33],
  chart: {
    width: 380,
    type: 'donut',
  },
  dataLabels: {
    enabled: false,
  },
  responsive: [
    {
      breakpoint: 480,
      options: {
        chart: {
          width: 200
        },
        legend: {
          show: false
        }
      }
    }
  ],
  legend: {
    position: 'right',
    offsetY: 0,
    height: 230,
  }
};

var chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
```

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

### Build Development Version (CJS)

Source: https://github.com/apexcharts/apexcharts.js/blob/main/CONTRIBUTING.md

Starts a development build specifically for CommonJS modules. Leave this running in a terminal.

```sh
npm run dev:cjs
```

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

### Initialize New Project

Source: https://github.com/apexcharts/apexcharts.js/blob/main/CONTRIBUTING.md

Creates a new project directory and initializes it with npm, preparing it to link ApexCharts as a dependency.

```sh
mkdir ~/new-project && cd ~/new-project &&
npm init -y
```

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

### Vue Radial Bar Gauge Chart Setup

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vue/radialBar/stroked-gauge.html

This snippet shows the Vue component setup for a radial bar chart, including data series and chart options. Ensure you have Vue and VueApexCharts installed.

```html
<div id="chart"> <apexchart type="radialBar" height="350" :options="chartOptions" :series="series"></apexchart> </div>

new Vue({
  el: '#app',
  components: {
    apexchart: VueApexCharts,
  },
  data: {
    series: [67],
    chartOptions: {
      chart: {
        height: 350,
        type: 'radialBar',
        offsetY: -10,
      },
      plotOptions: {
        radialBar: {
          startAngle: -135,
          endAngle: 135,
          dataLabels: {
            name: {
              fontSize: '16px',
              color: undefined,
              offsetY: 120,
            },
            value: {
              offsetY: 76,
              fontSize: '22px',
              color: undefined,
              formatter: function (val) {
                return val + '%'
              },
            },
          },
        },
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'dark',
          shadeIntensity: 0.15,
          inverseColors: false,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 50, 65, 91],
        },
      },
      stroke: {
        dashArray: 4,
      },
      labels: ['Median Ratio'],
    },
  },
})
```

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

### Vue Component Setup for Treemap

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vue/treemap/multi-dimensional.html

Sets up the Vue component with data series and chart options for a multi-dimensional treemap. Ensure Vue and VueApexCharts are properly installed and registered.

```javascript
new Vue({
  el: '#app',
  components: {
    apexchart: VueApexCharts,
  },
  data: {
    series: [
      {
        name: 'Desktops',
        data: [
          { x: 'Apple', y: 50 },
          { x: 'Acer', y: 30 },
          { x: 'Asus', y: 21 },
        ],
      },
      {
        name: 'Laptops',
        data: [
          { x: 'Dell', y: 21 },
          { x: 'HP', y: 16 },
          { x: 'Lenovo', y: 20 },
        ],
      },
      {
        name: 'Tablets',
        data: [
          { x: 'Samsung', y: 4 },
          { x: 'Huawei', y: 7 },
          { x: 'Microsoft', y: 11 },
          { x: 'Amazon', y: 31 },
          { x: 'Lenovo', y: 13 },
        ],
      },
      {
        name: 'Mobile',
        data: [
          { x: 'Apple', y: 10 },
          { x: 'Samsung', y: 20 },
          { x: 'Huawei', y: 51 },
          { x: 'Xiaomi', y: 30 },
        ],
      },
    ],
    chartOptions: {
      legend: {
        show: true,
        offsetY: 10,
        height: 30,
      },
      chart: {
        height: 350,
        type: 'treemap',
      },
      title: {
        text: 'Multi-dimensional Treemap',
        align: 'center',
      },
      plotOptions: {
        treemap: {},
      },
    },
  },
})
```

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

### ApexCharts Bar Chart Configuration

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vanilla-js/tests/position-top-text-anchor-start-series-pos.html

Configuration for a horizontal bar chart with data labels positioned at the top and anchored to the start. Includes setup for reproducible random number generation.

```javascript
var _seed = 42;
Math.random = function () {
  _seed = (_seed * 16807) % 2147483647;
  return (_seed - 1) / 2147483646;
};

var options = {
  series: [
    {
      data: [400, 430, 1, 470, 540, 580, 690, 1100, 1200, 1380]
    }
  ],
  chart: {
    type: 'bar',
    height: 380
  },
  plotOptions: {
    bar: {
      horizontal: true,
      dataLabels: {
        position: 'top'
      }
    }
  },
  dataLabels: {
    enabled: true,
    textAnchor: 'start',
    style: {
      colors: ['#333']
    },
    formatter: function (val, opt) {
      return opt.w.globals.labels[opt.dataPointIndex] + ': ' + val;
    }
  },
  fill: {
    opacity: 0.5
  },
  xaxis: {
    categories: [
      'South Korea',
      'Canada',
      'United Kingdom',
      'Netherlands',
      'Italy',
      'France',
      'Japan',
      'United States',
      'China',
      'India'
    ]
  },
  yaxis: {
    labels: {
      show: false
    }
  }
};

var chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
```

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

### Serve Samples with CSP Headers

Source: https://github.com/apexcharts/apexcharts.js/blob/main/CONTRIBUTING.md

Starts an HTTP server with a specific browser-sync configuration file to test Content Security Policy (CSP) related features.

```sh
npx browser-sync start --config browser-sync-config.js
```

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

### ApexCharts Bar Chart Configuration

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vanilla-js/tests/position-bottom-text-anchor-start-series-pos.html

Configure a bar chart with data labels positioned at the bottom and anchored to the start. This setup is useful for displaying categorical data with clear labels.

```javascript
var options = { series: [
  {
    data: [400, 430, 1, 470, 540, 580, 690, 1100, 1200, 1380]
  }
], chart: {
  type: 'bar',
  height: 380
},
plotOptions: {
  bar: {
    horizontal: true,
    dataLabels: {
      position: 'bottom'
    }
  }
},
dataLabels: {
  enabled: true,
  textAnchor: 'start',
  style: {
    colors: ['#333']
  },
  formatter: function (val, opt) {
    return opt.w.globals.labels[opt.dataPointIndex] + ': ' + val
  }
},
fill: {
  opacity: 0.5
},
xaxis: {
  categories: [
    'South Korea',
    'Canada',
    'United Kingdom',
    'Netherlands',
    'Italy',
    'France',
    'Japan',
    'United States',
    'China',
    'India'
  ]
},
yaxis: {
  labels: {
    show: false
  }
}}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
```

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

### Development Commands

Source: https://github.com/apexcharts/apexcharts.js/blob/main/README.md

Commands for setting up the development environment, running the development server with hot-reloading, and executing tests.

```bash
npm install
npm run dev     # vite build --watch
npm test        # e2e + unit
```

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

### Real-time Line Chart Setup and Update

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vanilla-js/line/realtime.html

This snippet initializes a real-time line chart and updates it at regular intervals. It includes data generation and chart update logic.

```javascript
var _seed = 42;
Math.random = function () {
  _seed = (_seed * 16807) % 2147483647;
  return (_seed - 1) / 2147483646;
};

var lastDate = 0;
var data = [];
var TICKINTERVAL = 86400000;
let XAXISRANGE = 777600000;

function getDayWiseTimeSeries(baseval, count, yrange) {
  var i = 0;
  while (i < count) {
    var x = baseval;
    var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
    data.push({
      x,
      y,
    });
    lastDate = baseval;
    baseval += TICKINTERVAL;
    i++;
  }
}

getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
  min: 10,
  max: 90,
});

function getNewSeries(baseval, yrange) {
  var newDate = baseval + TICKINTERVAL;
  for (var i = 0; i < data.length - 10; i++) {
    data[i].x = newDate - XAXISRANGE - TICKINTERVAL;
    data[i].y = 0;
  }
  data.push({
    x: newDate,
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min,
  });
  lastDate = newDate;
}

function resetData() {
  data = data.slice(data.length - 10, data.length);
}

var options = {
  series: [
    {
      data: data.slice(),
    },
  ],
  chart: {
    id: 'realtime',
    height: 350,
    type: 'line',
    animations: {
      enabled: true,
      easing: 'linear',
      dynamicAnimation: {
        speed: 1000,
      },
    },
    toolbar: {
      show: false,
    },
    zoom: {
      enabled: false,
    },
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    curve: 'smooth',
  },
  title: {
    text: 'Dynamic Updating Chart',
    align: 'left',
  },
  markers: {
    size: 0,
  },
  xaxis: {
    type: 'datetime',
    range: XAXISRANGE,
  },
  yaxis: {
    max: 100,
  },
  legend: {
    show: false,
  },
};

var chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

var intervalRuns = 0;
var interval = window.setInterval(function () {
  intervalRuns++;
  getNewSeries(lastDate, {
    min: 10,
    max: 90,
  });
  chart.updateSeries([
    {
      data: data,
    },
  ]);
  if (intervalRuns === 2 && window.isATest === true) {
    clearInterval(interval);
  }
}, 1000);

```

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

### Vue Component for Candlestick Chart

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vue/candlestick/basic.html

This snippet shows the Vue component setup, including data and chart options, for rendering a candlestick chart. Ensure you have Vue and ApexCharts installed and registered.

```html
<div id="chart"> <apexchart type="candlestick" height="350" :options="chartOptions" :series="series"></apexchart> </div>

new Vue({
  el: '#app',
  components: {
    apexchart: VueApexCharts,
  },
  data: {
    series: [
      {
        data: [
          { x: new Date(1538778600000), y: [6629.81, 6650.5, 6623.04, 6633.33] },
          { x: new Date(1538780400000), y: [6632.01, 6643.59, 6620, 6630.11] },
          { x: new Date(1538782200000), y: [6630.71, 6648.95, 6623.34, 6635.65] },
          { x: new Date(1538784000000), y: [6635.65, 6651, 6629.67, 6638.24] },
          { x: new Date(1538785800000), y: [6638.24, 6640, 6620, 6624.47] },
          { x: new Date(1538787600000), y: [6624.53, 6636.03, 6621.68, 6624.31] },
          { x: new Date(1538789400000), y: [6624.61, 6632.2, 6617, 6626.02] },
          { x: new Date(1538791200000), y: [6627, 6627.62, 6584.22, 6603.02] },
          { x: new Date(1538793000000), y: [6605, 6608.03, 6598.95, 6604.01] },
          { x: new Date(1538794800000), y: [6604.5, 6614.4, 6602.26, 6608.02] },
          { x: new Date(1538796600000), y: [6608.02, 6610.68, 6601.99, 6608.91] },
          { x: new Date(1538798400000), y: [6608.91, 6618.99, 6608.01, 6612] },
          { x: new Date(1538800200000), y: [6612, 6615.13, 6605.09, 6612] },
          { x: new Date(1538802000000), y: [6612, 6624.12, 6608.43, 6622.95] },
          { x: new Date(1538803800000), y: [6623.91, 6623.91, 6615, 6615.67] },
          { x: new Date(1538805600000), y: [6618.69, 6618.74, 6610, 6610.4] },
          { x: new Date(1538807400000), y: [6611, 6622.78, 6610.4, 6614.9] },
          { x: new Date(1538809200000), y: [6614.9, 6626.2, 6613.33, 6623.45] },
          { x: new Date(1538811000000), y: [6623.48, 6627, 6618.38, 6620.35] },
          { x: new Date(1538812800000), y: [6619.43, 6620.35, 6610.05, 6615.53] },
          { x: new Date(1538814600000), y: [6615.53, 6617.93, 6610, 6615.19] },
          { x: new Date(1538816400000), y: [6615.19, 6621.6, 6608.2, 6620] },
          { x: new Date(1538818200000), y: [6619.54, 6625.17, 6614.15, 6620] },
          { x: new Date(1538820000000), y: [6620.33, 6634.15, 6617.24, 6624.61] },
          { x: new Date(1538821800000), y: [6625.95, 6626, 6611.66, 6617.58] },
          { x: new Date(1538823600000), y: [6619, 6625.97, 6595.27, 6598.86] },
          { x: new Date(1538825400000), y: [6598.86, 6598.88, 6570, 6587.16] },
          { x: new Date(1538827200000), y: [6588.86, 6600, 6580, 6593.4] },
          { x: new Date(1538829000000), y: [6593.99, 6598.89, 6585, 6587.81] },
          { x: new Date(1538830800000), y: [6587.81, 6592.73, 6567.14, 6578] },
          { x: new Date(1538832600000), y: [6578.35, 6581.72, 6567.39, 6579] },
          { x: new Date(1538834400000), y: [6579.38, 6580.92, 6566.77, 6575.96] },
          { x: new Date(1538836200000), y: [6575.96, 6589, 6571.77, 6588.92] },
          { x: new Date(1538838000000), y: [6588.92, 6594, 6577.55, 6589.22] },
          { x: new Date(1538839800000), y: [6589.3, 6598.89, 6589.1, 6596.08] },
          { x: new Date(1538841600000), y: [6597.5, 6600, 6588.39, 6596.25] },
          { x: new Date(1538843400000), y: [6598.03, 6600, 6588.73, 6595.97] },
          { x: new Date(1538845200000), y: [6595.97, 6602.01, 6588.17, 6602] },
          { x: new Date(1538847000000), y: [6602, 6607, 6596.51, 6599.95] },
          { x: new Date(1538848800000), y: [6600.63, 6601.21, 6590.39, 6591.02] },
          { x: new Date(1538850600000), y: [6591.02, 6603.08, 6591, 6591] },
          { x: new Date(1538852400000), y: [6591, 6601.32, 6585, 6592] },
          { x: new Date(1538854200000), y: [6593.13, 6596.01, 6590, 6593.34] },
          { x: new Date(1538856000000), y: [6593.34, 6604.76, 6582.63, 6593.86] },
          { x: new Date(1538857800000), y: [6593.86, 6604.28, 6586.57, 6600.01] },
          { x: new Date(1538859600000), y: [6601.81, 6603.21, 6592.78, 6596.25] },
          { x: new Date(1538861400000), y: [6596.25, 6604.2, 6590, 6602.99] },
          { x: new Date(1538863200000), y: [6602.99, 6606, 6584.99, 6587.81] },
          { x: new Date(1538865000000), y: [6587.81, 6595, 6583.27, 6591.96] },
          { x: new Date(1538866800000), y: [6591.97, 6596.07, 6585, 6588.39] },
          { x: new Date(1538868600000), y: [6587.6, 6598.21, 6587.6, 6594.27] },
          { x: new Date(1538870400000), y: [6596.44, 6601, 6590, 6596.55] },
          { x: new Date(1538872200000), y: [6598.91, 6605, 6596.61, 6600.02] },
          { x: new Date(1538874000000), y: [6600.55, 6605, 6589.14, 6593.01] },
          { x: new Date(1538875800000), y: [6593.15, 6605, 6592, 6603.06] },
          { x: new Date(1538877600000), y: [6603.07, 6604.5, 6599.09, 6603.89] },
          { x: new Date(1538879400000), y: [6604.44, 6604.44, 6600, 6603.5] },
          { x: new Date(1538881200000), y: [6603.5, 6603.99, 6597.5, 6603.86] },
          { x: new Date(1538883000000), y: [6603.85, 6605, 6600, 6604.07] },
          { x: new Date(1538884800000), y: [6604.98, 6606, 6604.07, 6606] }
        ]
      }
    ],
    chartOptions: {
      chart: {
        type: 'candlestick'
      }
    }
  }
});
```

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

### ApexCharts Bar Chart Configuration

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vanilla-js/tests/position-top-text-anchor-start-series-mixed.html

Configures a horizontal bar chart with data labels positioned at the top and anchored to the start. This setup is suitable for displaying categorical data with associated values.

```javascript
var options = {
  series: [
    {
      data: [400, 430, 1, -470, 540, 580, -690, 1100, 1200, 1380].map( (_) => _ * -1, ),
    },
  ],
  chart: {
    type: 'bar',
    height: 380,
  },
  plotOptions: {
    bar: {
      horizontal: true,
      dataLabels: {
        position: 'top',
      },
    },
  },
  dataLabels: {
    enabled: true,
    textAnchor: 'start',
    style: {
      colors: ['#333'],
    },
    formatter: function (val, opt) {
      return opt.w.globals.labels[opt.dataPointIndex] + ': ' + val
    },
  },
  fill: {
    opacity: 0.5,
  },
  xaxis: {
    categories: [
      'South Korea',
      'Canada',
      'United Kingdom',
      'Netherlands',
      'Italy',
      'France',
      'Japan',
      'United States',
      'China',
      'India',
    ],
  },
  yaxis: {
    labels: {
      show: false,
    },
  },
}
```

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

### Vue Real-time Line Chart Setup

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vue/line/realtime.html

Initializes a Vue instance with ApexCharts to display a real-time updating line chart. Includes chart options and data series configuration.

```javascript
new Vue({
  el: '#app',
  components: {
    apexchart: VueApexCharts,
  },
  data: {
    series: [
      {
        data: data.slice(),
      },
    ],
    chartOptions: {
      chart: {
        id: 'realtime',
        height: 350,
        type: 'line',
        animations: {
          enabled: true,
          easing: 'linear',
          dynamicAnimation: {
            speed: 1000,
          },
        },
        toolbar: {
          show: false,
        },
        zoom: {
          enabled: false,
        },
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        curve: 'smooth',
      },
      title: {
        text: 'Dynamic Updating Chart',
        align: 'left',
      },
      markers: {
        size: 0,
      },
      xaxis: {
        type: 'datetime',
        range: XAXISRANGE,
      },
      yaxis: {
        max: 100,
      },
      legend: {
        show: false,
      },
    },
  },
  mounted: function () {
    var me = this
    window.setInterval(function () {
      getNewSeries(lastDate, {
        min: 10,
        max: 90,
      })
      me.$refs.chart.updateSeries([
        {
          data: data,
        },
      ])
    }, 1000)
    window.setInterval(function () {
      resetData()
      me.$refs.chart.updateSeries(
        [
          {
            data,
          },
        ],
        false,
        true,
      )
    }, 60000)
  },
})
```

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

### ApexCharts Horizontal Bar Chart Configuration

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vanilla-js/tests/position-center-text-anchor-start-series-pos.html

Configuration for a horizontal bar chart with centered data labels anchored to the start. This setup is ideal for displaying categorical data with clear value annotations.

```javascript
var options = { series: [
  {
    data: [400, 430, 1, 470, 540, 580, 690, 1100, 1200, 1380],
  },
],
chart: {
  type: 'bar',
  height: 380,
},
plotOptions: {
  bar: {
    horizontal: true,
    dataLabels: {
      position: 'center',
    },
  },
},
dataLabels: {
  enabled: true,
  textAnchor: 'start',
  style: {
    colors: ['#333'],
  },
  formatter: function (val, opt) {
    return opt.w.globals.labels[opt.dataPointIndex] + ': ' + val
  },
},
fill: {
  opacity: 0.5,
},
xaxis: {
  categories: [
    'South Korea',
    'Canada',
    'United Kingdom',
    'Netherlands',
    'Italy',
    'France',
    'Japan',
    'United States',
    'China',
    'India',
  ],
},
yaxis: {
  labels: {
    show: false,
  },
},
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
```

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

### Vue Area Spline Chart Example

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vue/area/area-spline.html

This snippet shows the complete Vue.js component setup for an Area Spline chart. It includes data series, chart options, and the ApexCharts component integration.

```html
<div id="chart"> <apexchart type="area" height="350" :options="chartOptions" :series="series"></apexchart> </div>

new Vue({
  el: '#app',
  components: {
    apexchart: VueApexCharts,
  },
  data: {
    series: [
      {
        name: 'series1',
        data: [31, 40, 28, 51, 42, 109, 100],
      },
      {
        name: 'series2',
        data: [11, 32, 45, 32, 34, 52, 41],
      },
    ],
    chartOptions: {
      chart: {
        height: 350,
        type: 'area',
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        curve: 'smooth',
      },
      xaxis: {
        type: 'datetime',
        categories: [
          '2018-09-19T00:00:00.000Z',
          '2018-09-19T01:30:00.000Z',
          '2018-09-19T02:30:00.000Z',
          '2018-09-19T03:30:00.000Z',
          '2018-09-19T04:30:00.000Z',
          '2018-09-19T05:30:00.000Z',
          '2018-09-19T06:30:00.000Z',
        ],
      },
      tooltip: {
        x: {
          format: 'dd/MM/yy HH:mm',
        },
      },
    },
  },
})
```

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

### Vue Component for Stacked Column with Line Chart

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vue/column/stacked-column-with-line.html

This snippet shows the Vue component setup, including data series and chart options for a stacked column chart with an overlaid line. Ensure you have Vue and VueApexCharts installed.

```javascript
new Vue({
  el: '#app',
  components: {
    apexchart: VueApexCharts,
  },
  data: {
    series: [
      {
        name: 'Line',
        type: 'line',
        data: [37, 38.3, 33.01, 30, 29.7, 30, 35.2, 44, 45, 41, 22, 22.5, 29.1, 25.5, 41.2, 43.8, 39, 23, 26, 22, 34, 37, 43, 41, 17],
      },
      {
        name: 'Bar1',
        type: 'bar',
        data: [-1.57, -1.83, -0.29, 2, 0.23, 3, 0, -0.77, 0, 0, 0, -0.16, -0.5, -0.75, -0.93, -0.93, -0.45, 0, 0, -0.23, -0.95, -1.12, -0.51, 0.76],
      },
      {
        name: 'Bar2',
        type: 'bar',
        data: [-2.99, -0.43, 0.39, 2.8, 0.23, 1.2, -0.06, -2.96, -2.74, -2.58, -1.79, -2.16, -1.9, -1.75, -2, -2.16, -1.75, -1.9, -2.74, -2.58, -3.8, -1.24, -0.01, 1.89],
      },
      {
        name: 'Bar3',
        type: 'bar',
        data: [0.09, 4, 4.83, 6.86, 3.86, 5, 1.7, -1.21, 0, 0.02, 0.07, -0.15, -0.09, 0, -0.61, -1.75, 0, -0.43, -1.5, -0.66, -3.06, 0.06, 0.15, 1.48],
      },
      {
        name: 'bar4',
        type: 'bar',
        data: [5.95, 5.86, 0.92, -1.2, -2.73, -0.32, 0.12, -0.55, 0.78, 0, -1.73, -2.52, -1.26, -0.8, -0.75, 0, -3, 0, 0.29, 0.3],
      }
    ],
    chartOptions: {
      colors: ['#6a6ba5', '#f9a867', '#2a6b9b', '#6c98b7', '#abc4d6', '#d5e2eb'],
      chart: {
        height: 350,
        width: '90%',
        type: 'line',
        stacked: true,
        zoom: {
          enabled: true,
          type: 'x',
        },
      },
      tooltip: {
        followCursor: true,
        shared: false,
      },
      responsive: [
        {
          breakpoint: 480,
        },
      ],
      markers: {
        size: 0,
        fillOpacity: 0,
        strokeOpacity: 0,
      },
      stroke: {
        width: 2,
      },
      xaxis: {
        categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
        type: 'numeric',
        tickPlacement: 'on',
        tickAmount: 'dataPoints',
        labels: {
          showDuplicates: false,
          formatter: function (value) {
            // Value is undefined if all series are collapsed
            return value !== undefined ? value.toFixed(0) : ''
          },
        },
      },
      yaxis: [
        {
          seriesName: 'Line',
          opposite: true,
        },
        {
          seriesName: 'Bar1',
        },
        {
          seriesName: 'Bar1',
          show: false,
        },
        {
          seriesName: 'Bar1',
          show: false,
        },
        {
          seriesName: 'Bar1',
          show: false,
        },
      ],
      legend: {
        showForSingleSeries: true,
      },
      fill: {
        opacity: 1,
      },
    },
  },
})
```

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

### Initialize ApexChart in JavaScript

Source: https://github.com/apexcharts/apexcharts.js/blob/main/CONTRIBUTING.md

Imports ApexCharts and initializes a line chart with specified options and data. This script should be linked in the HTML.

```js
import ApexCharts from 'apexcharts'

const options = {
  chart: { type: 'line' },
  series: [
    {
      name: 'sales',
      data: [30, 40, 45, 50, 49, 60, 70, 91, 125],
    },
  ],
  xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] },
}
const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
```

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

### Serve Project with Parcel

Source: https://github.com/apexcharts/apexcharts.js/blob/main/CONTRIBUTING.md

Starts the Parcel bundler and HTTP server for the new project, enabling auto-reloading on changes in both the project and ApexCharts source code.

```sh
npx parcel serve index.html
```

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

### Radial Bar Chart with Custom Angle Configuration

Source: https://github.com/apexcharts/apexcharts.js/blob/main/samples/vanilla-js/radialBar/circle-custom-angle.html

Configure a radial bar chart with custom start and end angles (0 to 270 degrees). This setup is useful for creating semi-circular or segmented radial charts. The hollow option customizes the center of the chart.

```javascript
var options = {
  series: [76, 67, 61, 90],
  chart: {
    height: 390,
    type: 'radialBar',
  },
  plotOptions: {
    radialBar: {
      offsetY: 0,
      startAngle: 0,
      endAngle: 270,
      hollow: {
        margin: 5,
        size: '30%',
        background: 'transparent',
        image: undefined,
      },
      dataLabels: {
        name: {
          show: false,
        },
        value: {
          show: false,
        },
      },
      barLabels: {
        enabled: true,
        useSeriesColors: true,
        offsetX: -8,
        fontSize: '16px',
        formatter: function (seriesName, opts) {
          return seriesName + ': ' + opts.w.globals.series[opts.seriesIndex];
        },
      },
    },
  },
  colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
  labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
  responsive: [
    {
      breakpoint: 480,
      options: {
        legend: {
          show: false,
        },
      },
    },
  ],
};

var chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
```