This is an old revision of the document!


Apex Charts

Installation

npm install --save apexcharts
npm install --save vue3-apexcharts

In main.js

import VueApexCharts from "vue3-apexcharts";
 
createApp(App).use(VueApexCharts).mount('#app')

Example

<template>
  <div>
    <apexchart
      width="500"
      type="bar"
      :options="options"
      :series="series"
    ></apexchart>
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  data: function () {
    return {
      options: {
        chart: {
          id: "vuechart-example",
        },
        xaxis: {
          type: "datetime",
        },
        title: {
          text: "Title",
          align: "left",
        },
      },
      series: [
        {
          name: "series-1",
          data: [
            [1327532400000, 31.18],
            [1327618800000, 31.05],
            [1327964400000, 30.95],
            [1328223600000, 31.85],
            [1328569200000, 32.28],
            [1328742000000, 32.65],
            [1330383600000, 33.27],
          ],
        },
      ],
    };
  },
};
</script>