apexcharts / vue3-apexcharts

📊 Vue-3 component for ApexCharts
MIT License
314 stars 35 forks source link

Web App crashes when trying to plot a timeline chart #36

Closed nestorcamposgestal closed 3 months ago

nestorcamposgestal commented 2 years ago

Hi, I have a web application where I am using ApexCharts with Vue 3 to plot some graphics. I didn't have any trouble using the scatter plot, but when I try to plot a timeline like this example of the website, it completely crashes and I don't know why. maybe I am doing something wrong, but I can't see any error. I would appreciate a lot if you can give me some help because it is important!

I attach here the code of the view:

<template>
    <apexchart type="rangeBar" height="350" :options="chartOptions" :series="series"></apexchart>
</template>
<script>
import axios from "../../../services/api.js";

export default {
  data() {
    return {
        chartOptions: {
            chart: {
                type: 'rangeBar'
            },

            plotOptions: {
                bar: {
                    horizontal: true,
                }
            },

            fill: {
              type: 'solid'
            },

            xaxis: {
              type: 'datetime'
            },
        },
        series: [
          {
            name: 'Prueba',
            data: [
               {
                  x: 'Code',
                  y: [
                    new Date('2019-03-02').getTime(),
                    new Date('2019-03-04').getTime()
                  ]
                },
                {
                  x: 'Test',
                  y: [
                    new Date('2019-03-04').getTime(),
                    new Date('2019-03-08').getTime()
                  ]
                },
                {
                  x: 'Validation',
                  y: [
                    new Date('2019-03-08').getTime(),
                    new Date('2019-03-12').getTime()
                  ]
                },
                {
                  x: 'Deployment',
                  y: [
                    new Date('2019-03-12').getTime(),
                    new Date('2019-03-18').getTime()
                  ]
                },
            ]
          },
      ], //end series
    }; //end return
  }, //end data

}
</script>
<style scoped>

</style>
github-actions[bot] commented 3 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.