Vue chart not displaying data until the window is resized

I've encountered an issue with my apexchart where the data is not displayed when the page loads. It only appears when I zoom in/out or resize the window, which seems odd to me. I came across a similar problem on the apexcharts github, but it doesn't seem to have been resolved since 2019. So, I'm reaching out here in the hopes that someone might have a solution.

Check out my apexchart:

<v-col cols="12">
 <apexchart
  type="line"
  height="350"
  :options="chartOptions"
  :series="series"
 ></apexchart>
</v-col>

This is what my chartOptions look like:

chartOptions: {
    chart: {
      height: 350,
      type: "line",
      zoom: {
        enabled: false,
      },
      toolbar: {
        show: false,
      },
    },
    legend: {
      labels: {
        colors: "#FFFFFF",
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "straight",
    },
    title: {
      align: "left",
    },
    grid: {
      row: {
        colors: ["#f3f3f3", "transparent"],
        opacity: 0.5,
      },
    },
    xaxis: {
      type: "datetime",
      categories: [],
      labels: {
        datetimeUTC: false,
        style: {
          colors: "#FFFFFF",
        },
      },
    },
    yaxis: [
      {
        title: {
          text: "Energy",
          style: {
            color: "#FFFFFF",
          },
        },
        labels: {
          style: {
            colors: "#FFFFFF",
          },
        },
        decimalsInFloat: 1,
      },
      {
        opposite: true,
        title: {
          text: "Power",
          style: {
            color: "#FFFFFF",
          },
        },
        labels: {
          style: {
            colors: "#FFFFFF",
          },
        },
        decimalsInFloat: 1,
      },
    ],
    tooltip: {
      enabled: false,
    },
    colors: ["#8AB4F7", "#8DCD7F"],
  },
javascriptvue.jsvuexapexcharts

Answer №1

To link your chart, create a reference 

<apexchart ref="chart_ref"/>
and then execute the following code:

this.$refs.chart_ref.refresh()

If you encounter any issues, consider enclosing this code within nextTick or setTimeout(0).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Receive an HTTP POST request within JavaScript without using Ajax in Symfony 4.1

Searching for a way to handle an event triggered by a PHP post, not through Ajax. I would like to show a spinner when the form is posted using PHP. In JavaScript, it's easy with code like this: $(document).on({ ajaxStart: function() { $('#p ...

javascriptphpajax

Challenges arise when adjusting frame size for mobile and desktop devices

I am trying to achieve an auto-resize feature for my frame's height when the screen width is smaller than a certain value. I want it to behave like Sketchfab, as demonstrated in this video: http://www.youtube.com/watch?v=_y5ckVFGHKU&feature=youtu. ...

javascriptmobileiframeresizethree.js

Vue.js - Leveraging arrays in functions for efficient iteration

I need help using a JS array in a Vue.js function for looping. Here is the code I tried: Vue: computed: { bbb: function(){ var vvv=this.Preused.length-this.quote.lines.length; let added_products=[]; if(vvv > 0){ for(var i = 0; i <= vvv-1 ...

javascriptvue.jsvuejs2vue-component

Issue with Vuetify's v-radio label not displaying properly after usage of label slot for the first

Situation: My approach involves creating a v-radio button accompanied by a v-text-field serving as its label. To implement this, I utilized the label slot in the following manner: <v-radio v-for="option in question.options" :key="op ...

vue.jsvuetify.js

What is the best way to transmit extra data when tunneling a TLS connection?

I have developed a basic HTTP proxy that utilizes the HTTP CONNECT method for HTTP tunneling. const http = require('http'); const https = require('https'); const pem = require('pem'); const net = require('net'); con ...

javascriptnode.jshttp

Angular 2 404 Error persists despite successful retrieval of data from Oracle database using Backend Nodejs URL entered directly into the browser

Recently, I've been working on displaying data in my Angular frontend that is fetched from an Oracle DB connected to my Node backend. When I access the physical API link, the data appears and is displayed in the backend console.log. I'm wonderin ...

javascriptnode.jsangularoracle

Is there a way to incorporate the ::after or ::before pseudo-elements into an image tag?

While working on my project, I attempted to incorporate the ::after tag (I had used ::before as well) for an image within an img tag. However, I am facing difficulties as it doesn't seem to be working. Any advice or guidance would be greatly appreciat ...

javascripthtmlcssimageselector

Submitting data from a dropdown menu using Ajax in Struts 2: A step-by-step guide

I have a select tag with the s:select element inside a form. My goal is to send a post request to the specified action using Struts 2 json plugin. I do not have much knowledge in javascript or jquery. <s:form action="selectFileType" method="post" ...

javascriptjqueryjsonstruts2

React - How to properly pass a reference to a React portal

I have a Card component that needs to trigger a Modal component. Additionally, there is a versatile Overlay component used to display content above the application. Displayed here is the App component: class App extends Component { /* Some Code */ ...

javascriptreactjsreduxportal-system

Updating and eliminating text within an array of objects using Vue JS

My Axios request pulls in an array of objects named 'uniquecolors'. Here is what it looks like: mycolors color: [GREEN, RED, BLUE, YELLOW, ORANGE,ORANGE,GREEN,] color: [GREEN, RED, BLUE, YELLOW, ORANGE,ORANGE,GREEN,] color ...

javascriptvue.js

The success function within the Ajax code is malfunctioning

I am currently utilizing express, node.js, and MySQL. The issue I am facing is that the success function inside my Ajax code is not working as expected. Below is the snippet of the Ajax code in question: function GetData_1(){ var state = $("#dpState_1"). ...

javascriptjqueryajaxnode.jsexpress

Parsing Problem---Is there a Parsing Error?

My code includes a function that calculates the total of cells and then displays it in a textbox: function UpdateTotal() { var total = parseFloat('0.0'); $("#<%= gvParts.ClientID %>").find("tr").not(".tblResultsHeader").each(funct ...

javascriptjqueryasp.netparsingparsefloat

Next.js manages 0Auth authentication using MoneyButton for authorization

I have been working on implementing 0Auth user authorization for my Next.js application using the MoneyButton API. Successfully, I am able to initiate the authorization request with client.requestAuthorization('auth.user_identity:read','http ...

javascriptreactjsoauth-2.0oauthnext.js

Vue.js tutorial: Adding a question mark to the URL when submitting a login form

There have been some strange issues with my login form recently. It initially directs me to However, when I try to log in, instead of logging me in, it redirects me to: I can only successfully log in after clicking on the login button again. What could ...

formsvue.jsvuejs2vue-componentwebserver

Rendering a React component conditionally within the same line

I'm trying to conditionally render a Home component based on a certain condition. I attempted to utilize the Inline If-Else with Conditional Operator recommended by React, as explained in this source. The code snippet I have looks like this: import ...

javascriptreactjsmaterial-ui

Determining the file path in HTML5

Can anyone help me with retrieving the file path using html5 javascript once a user selects a file? I require the file path for a specific scenario: In this case, the user uploads a file and pauses it (currently only supported by Mozilla browsers), then c ...

phpjavascripthtml

What is the reason behind JavaScript subtracting the timezone offset for ISO dates when passed into the Date() function?

In my function, I handle different valid date strings to produce a JavaScript Date object. Most strings work as expected, however, when an ISO formatted date (YYYY/MM/DD) is provided, the user's timezone offset is deducted from the date. For example ...

javascriptdatedatetime

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

I'm currently using Tailwind CSS within my Next.js project and I have a common method that dynamically returns the desired background color. However, despite adding the full class name, the background color is not displaying as expected. After reading ...

javascripttypescriptnext.jstailwind-css

When importing modules in node.js, the presence of a function can overwrite another function even if it

Within this code snippet, I am utilizing Express.js. //index.js app.use('/',routes()); //app/routes.js module.exports = function() { express = require('express'); const loggedUserProfileController = require('../controller ...

javascriptnode.jsexpress

Partial View fails to render on the webpage

After submitting information from my first partial view, I attempted to load a second partial view. However, upon submission, the first partial view just refreshes and remains on the same page instead of loading the new view. Despite setting up my controll ...

javascriptc#jqueryajaxasp.net-mvc