apexcharts / vue3-apexcharts

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

VUE 3 does not recognize dates and times (Composition API) #46

Closed GabrielAziz closed 3 months ago

GabrielAziz commented 2 years ago

About

i'm working on a vue 3 project with typescript and i need the x axis to recognize in dates

I've tried in several ways, including creating data with new Date(), passing "2018-09-19T00:00:00" in categories and labels, Date.now, but nothing is recognized

I realized that everything in the composition API is more complicated, but unfortunately there is no way to escape it. I don't know if what I'm doing is wrong, if there's a right way to do this or if something is wrong.

What did I do:

I import the component

 import apexcharts from "vue3-apexcharts";

components: {
    apexcharts,
  }, 

I declare the information:

 const lineOptions = {
      chart: { id: 'total_of_professionals', type: 'line', height: 300, width: 400 },
      title: { text: 'Total de Profissionais', align: 'left' },
      markers: { size: 1},
      stroke: { width: 2, curve: 'smooth' },
      grid: { borderColor: '#F5F8FA' },
      xaxis: {
        type: 'datetime',
      },
      labels: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", 
                   "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
     colors: ['#00E396'] },
};

const series = {
      name: 'Profissionais', 
      data: [1,3,7,12,25,46,67,88]
} 

so I return:

return{
      options,
      series,
    } 

and use:

<div class="col-xs-12 col-lg-4">
       <apexcharts :options="options" :series="series"></apexcharts>
    </div>  

image

these are the versions in my package. json:

    "apexcharts": "3.23.1",
    "vue3-apexcharts": "^1.4.1",  

using new date

labels: [new Date("2019-03-12").getTime(), new Date("2019-03-17").getTime()],

image

chiboreache commented 2 years ago

"2022-05-22" date format works for me

GabrielAziz commented 2 years ago

"2022-05-22" date format works for me

Could you post your options please? and your package.json would also help, thanks :)

chiboreache commented 2 years ago

easy mate ;)

xaxis: {
    type: "datetime",
    categories: props.x_axis,
  }
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.