Template reference does not connect to the ApexChart graphic

As a newcomer to ApexCharts.js, I am currently working on setting up a Vue3 app using Composition API along with the setup syntax. My goal is to reference the template ref of 'apexchart' so that I can later call the dataURI() function on it. I am attempting to do this within the onMounted hook but encountering an exception that reads: "Uncaught (in promise) TypeError: Cannot read properties of null (reading 'dataURI')"

Here's what I have tried so far, excluding the chart options and series:

<script setup lang="ts">
...
import ApexCharts from 'apexcharts'

const chart = ref({} as ApexCharts);

onMounted(async () => {
    await chart.value.dataURI().then(({ imgURI, blob }) => {
        console.log("...")
    });
});
</script>

<template>
    <div>
        <div id="chart">
            <apexchart ref="chart" :options="options" :series="series" type="polarArea" :size="200" />
        </div>
    </div>
</template>
typescriptvuejs3apexcharts

Answer №1

It seems like the chart is not properly initialized when attempting to access its methods. I would recommend initializing it within the onMounted lifecycle hook.

import { ref, onMounted } from 'vue';
import ApexCharts from 'apexcharts';

const chart = ref(null);
const options = { chart: { type: 'polarArea' };
const series = [14, 23, 21, 17, 15, 10, 12, 17, 21];

onMounted(async () => {
  chart.value = new ApexCharts(document.getElementById('chart'), {
    chart: {
      type: 'polarArea',
      height: 200,
    },
    series,
  });

  await chart.value.render();
  
  const { imgURI, blob } = chart.value.dataURI();
  console.log('Data URI:', imgURI);
});
<template>
  <div>
    <div id="chart">
      <apexchart ref="chart" :options="options" :series="series" type="polarArea" :size="200" />
    </div>
  </div>
</template>

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

Tips for creating a TypeScript function that is based on another function, but with certain template parameters fixed

How can I easily modify a function's template parameter in TypeScript? const selectFromObj = <T, S>(obj: T, selector: (obj: T) => S): S => selector(obj) // some function from external library type SpecificType = {a: string, b: number} co ...

typescriptgenericstypes

Ensuring a Generic Type in Typescript is a Subset of JSON: Best Practices

I am interested in achieving the following: interface IJSON { [key: string]: string | number | boolean | IJSON | string[] | number[] | boolean[] | IJSON[]; } function iAcceptOnlyJSON<T subsetof IJSON>(json: T): T { return json; ...

jsontypescript

Enhance the API response for Angular service purposes

I am currently working on modifying the response returned by an API request. At the moment, I receive the response as: [ { name: "Afghanistan" }, { name: "Åland Islands" } ] My goal is to adjust it to: [ { name: "A ...

angulartypescriptrxjs

Is it possible to limit the items in a TypeScript array to only accept shared IDs with items in another array?

I'm creating an object called ColumnAndColumnSettings with an index signature. The goal is to limit the values of columnSettings so that they only allow objects with IDs that are found in columns. type Column = { colId: string, width?: number, s ...

arraystypescripttypes

Incorporate SVG files into a TypeScript React application using Webpack

I am trying to incorporate an SVG image into a small React application built with TypeScript and bundled using Webpack. However, I am encountering an issue where the image is not displaying properly (only showing the browser's default image for when n ...

javascriptreactjstypescriptsvgwebpack

Converting JSON response from REST into a string format in Angular

I have developed a REST service in Angular that sends back JSON response. To perform pattern matching and value replacement, I require the response as a string. Currently, I am utilizing Angular 7 for this task. Below is an example of my service: getUIDa ...

angulartypescript

Differentiating Between Observables and Callbacks

Although I have experience in Javascript, my knowledge of Angular 2 and Observables is limited. While researching Observables, I noticed similarities to callbacks but couldn't find any direct comparisons between the two. Google provided insights into ...

javascriptangulartypescriptreactive-programming

Array of options with specified data types in Props interface

Trying to implement options as props for styling a button component in Astro. Still learning TypeScript. Encountering the error message: Generic type 'Props<style>' requires 1 type argument(s). Below is the code snippet: --- import type { H ...

typescriptastrojs

Error with Background component in Next.js-TypeScript when trying to change color on mouseover because Window is not defined

Within my Background component, there is a function that includes an SVG which changes color upon mouseover. While this functionality works fine, I encountered an error when hosting the project using Vercel - "ReferenceError: window is not defined." This i ...

reactjstypescriptnext.jsserver-side-rendering

What is the best way to avoid passing a value to a component in nextjs?

I'm trying to make this component static and reusable across different pages without passing a parameter when calling it. Is there a way to achieve this while following the official documentation? component: import { GetStaticProps, InferGetServerSid ...

reactjstypescriptnext.jsnext.js13

What is the most efficient way to remove all typed characters from fields when clicking on a different radio button? The majority of my fields share the same ngModel on a separate page

Is there a way to automatically clear all typed characters in form fields when switching between radio buttons with the same ngModel on different pages? I noticed that the characters I type in one field are retained when I switch to another radio button. ...

htmlangulartypescript

Module not found in Typescript

Filter.ts, mustache.js and redux.3.5.2.js are all located in the same directory (/Scripts). The code snippet within Filter.ts is as follows: ///<reference path="./typings/mustache.d.ts" /> import Mustache = require("mustache"); import Redux = requir ...

typescript

Retrieve a particular element from an array within a JSON object using Ionic

I am currently facing a challenge in extracting a specific array element from a JSON response that I have retrieved. While I can successfully fetch the entire feed, I am struggling to narrow it down to just one particular element. Here is what my service ...

typescriptionic-frameworkecmascript-6

Can one inherit under specific conditions?

I have just started exploring the OOP paradigm and I am curious to know if it is possible to have conditional inheritance in TypeScript. This would help avoid repeating code. Here is what I have in mind. Any suggestions or recommendations are greatly appre ...

typescriptoopinheritance

Utilizing external applications within Angular applications

I have the task of creating a user interface for clocker, a CLI-based issue time tracker. Clocker functions as a stand-alone node.js application without any programming interface. To begin tracking time for an issue labeled 123, the command would typically ...

node.jsangulartypescriptnpm

Issue: Pipe 'AsyncPipe' received an invalid argument '[object Object]'

I’m encountering an issue while attempting to replicate the steps from a specific YouTube tutorial. At the 8:22 mark of this video, I’m facing the following error: Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe&apos ...

angulartypescriptionic-framework

Retrieve type definitions for function parameters from an immutable array containing multiple arrays

My current challenge involves implementing a function similar to Jest's test.each iterator: // with "as const" forEach([ [ 1, 2, 3 ], [ "a", "b", "c" ], ] as const, (first, second, third) => { // ...

typescript

Angular: Defining variables using let and var

When working with TypeScript and JavaScript, we typically use either let or var to declare a variable. However, in Angular components, we do not use them even though Angular itself uses TypeScript. For instance, export class ProductComponent implements OnI ...

javascriptangulartypescriptoop

Transferring data from two child components back to the parent component

Within my web application, I have a parent component (A) and two children components (B, C). The parent component is responsible for maintaining the basic layout of the page, which remains consistent across all layouts. However, I need to dynamically swap ...

angulartypescriptviewchild

Deduce the generic types of conditional return based on object property

My goal is to determine the generic type of Model for each property. Currently, everything is displaying as unknown[] instead of the desired types outlined in the comments below. playground class Model<T> { x?: T } type ArgumentType<T> = T ...

javascripttypescripttypescript-generics