Build Interactive Visualizations With ApexCharts

A Vue.js 3 component library that uses ApexCharts library to create interactive SVG charts in your app.

How to use it:

1. Import and register the Vue ApexCharts component.

import VueApexCharts from "vue3-apexcharts";

const app = createApp(App);
app.use(VueApexCharts);
// or
export default {
  components: {
    apexchart: VueApexCharts
  },
};

2. Add the ApexCharts component to the template, determine the chart type, and define the data to be plotted in the chart.

<apexchart
  width="500"
  height="400"
  type="bar"
  :options="chartOptions"
  :series="series"
></apexchart>

export default {
  data: function() {
    return {
      chartOptions: { // ApexCharts options
        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],
        },
      ],
    };
  },
};

Preview:

Changelog:

v1.3.0 (05/05/2021)

• Updated

Download Details:

Author: apexcharts

Live Demo: https://apexcharts.com/javascript-chart-demos/

Download Link: https://github.com/apexcharts/vue3-apexcharts/archive/main.zip

Official Website: https://github.com/apexcharts/vue3-apexcharts

Install & Download: