The Primevue Chart failed to display

I'm having some trouble displaying a Chart using Primevue components. It's built on the chart.js library. Currently, I have a basic Vue component set up as follows:

<template>
  <div class="p-chart">
    <h2>Chart:</h2>
    <chart type="line" :data="chartData" />
  </div>
</template>

<script>

import Chart from "primevue/chart";

export default {
  data() {
    return {
      chartData: {
        labels: ["Label"],
        datasets: [
          {
            label: "Dataset",
            backgroundColor: "#5F5F5F",
            data: [99],
          },
        ],
      },
    };
  },
  components: {
    Chart,
  },
};
</script>

Despite setting up the chart component, it doesn't display on the page and I haven't come across any JavaScript errors in the browser console. Can anyone assist me in figuring out what might be missing or if there are any additional configurations required?

Answer №1

To fix the issue, try removing chart.js and then installing the following version (this solution worked for me with vue 3, you may need a different version) :

npm i [email protected]

Answer №2

Based on the information provided at https://www.primefaces.org/primevue/showcase/#/chart/line

It appears that you may be overlooking the options attribute within the Chart tag:

<chart type="line" :data="chartData" :options="chartOptions" />

Make sure to include the object inside the data section returned from Vue export:

data() {
    return {
      chartData: {
        labels: ["Label"],
        datasets: [
          {
            label: "Dataset",
            backgroundColor: "#5F5F5F",
            data: [99],
          },
        ],
      },
      chartOptions: {
        plugins: {
          legend: {
            labels: {
              color: '#495057'
            }
          }
        },
        scales: {
          x: {
            ticks: {
              color: '#495057'
            },
            grid: {
              color: '#ebedef'
            }
          },
          y: {
            ticks: {
              color: '#495057'
            },
            grid: {
              color: '#ebedef'
            }
          }
        }
      }
    };

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

Exploring Firebase's Collection Retrieval through Vue.js

Trying to retrieve a specific collection from Firebase Firestore is giving me an error that I haven't been able to resolve yet. Below is the code snippet from my boot file: import { initializeApp } from "firebase/app"; import { getFirestore ...

What is the best way to integrate OpenLayers3 with Vue.js?

When I use npm install openlayers(4.1.1), I can easily incorporate OpenLayers into my Vue.js project. However, our company has customized something based on OpenLayers 3.x. How can I make use of this custom version? I have tried importing the ol's lib ...

How can ThreeJS utilize CSS3Renderer and WebGLRenderer to display two objects in the same scene and achieve overlapping?

JSFiddle : http://jsfiddle.net/ApoG/50y32971/2/ I am working on a project where I am using CSS3Renderer to render an image as a background projected as a cube in the app. However, I also want to incorporate objects rendered using WebGLRenderer in the mid ...

What could possibly be causing the "Unexpected token (" error to appear in this code?

Sorry if this appears as a typo that I am struggling to identify. My browser (Chrome) is highlighting the following line <a class="carousel-link" onclick="function(){jQuery('#coffee-modal').modal('show');}">Book a coffee</a> ...

How can reactivity properties be properly established in Vuejs/Vuex?

I'm having trouble striking a balance between setting default properties for an object and keeping them 'reactive'. Just to note, I am using Vuex for my store. I have already referred to: https://v2.vuejs.org/v2/guide/reactivity.html Howev ...

Run a JavaScript function multiple times in the code behind using C#

My challenge involves using a datatable and executing a JavaScript function for each row, with different values each time. For every row, the JavaScript function is executed and the result is sent back to the code behind using a web method. However, with ...

Page load triggers the mounted component to fire twice

I am encountering a strange issue where the mounted and beforeMount functions of my components are running twice on page load. Each component represents a different page, so when I visit mywebsite.com/contact, the Contact.vue functions mounted and beforeMo ...

Socket.io is most effective when reconnecting

I am currently in the process of developing a React application that connects to a Node.js API and I am trying to integrate the Socket.io library. Following various online tutorials, my code now looks like this: API: import express from 'express&apo ...

The fab button icon in Vuetify is not aligned vertically in the center

I am struggling with getting the vuetify's fab button to center vertically. Below is my code snippet where I have used it, nothing unusual or special. <v-btn color="primary" fab small > <v-icon>print</v-icon> < ...

Managing multiple photo uploads using React JS and Laravel

I am trying to use axios in ReactJS to upload multiple images to the database, send the data from client-side to server-side, and handle image uploads with Laravel on the backend. However, I am encountering an issue when attempting to process multiple imag ...

Utilizing the power of moment.js within an Angular component

My goal is to utilize the moment() function within double curly braces {{}} in order to present a date: {{ moment().date(timeslot.start.value.month) .month(timeslot.start.value.dayOfMonth - 1) .format("MMMM Do") }} Unfortunately, I ...

Combining TypeScript with Vue3 to implement bootstrapVue

After using BootstrapVue as any, the error was corrected but unfortunately it still doesn't work in the browser. Here is what's inside main.ts: import { createApp }from 'vue'; import App from './App.vue'; import router from & ...

Removing selected option in the office-ui-fabric react dropdown component

I am facing an issue with clearing selections in a dropdown list. Sometimes, I need to clear the selection of a dropdown because the available options change. If the new options are fewer than the old ones, the selection might point outside the range, caus ...

Encountering a bizarre npm issue while attempting to execute npm install for brain.js

Encountering a puzzling error while attempting to install brain.js. Unsure of why Python is being mentioned during the installation process via npm, as there are no similar situations found on Google (and I'm not quite sure how to search for it). G:& ...

Module for managing optional arguments in Node.js applications

I'm on the hunt for a Node.js module that can effectively manage and assign optional arguments. Let's consider a function signature like this: function foo(desc, opts, cb, extra, writable) { "desc" and "cb" are mandatory, while everything else ...

Safari having trouble auto-playing Vimeo iframe embed

Update 6/26/23: Seems like a mysterious change occurred, as now the Vimeo video on project pages is playing automatically for me in Safari without any specific reason. It's working fine on Chrome too. Not sure if Vimeo made an update or if it's r ...

Please ask Java to receive a JSON parameter for converting a JSON array into a Java array

Essentially, my goal is to pass a Java String array to a JavaScript array, then pass this array via JSON to a JSP page, where I can parse it as a Java array. I attempted the following: JSONArray arr = new JSONArray(); JSONObject tmp; for(int i = 0; ...

How can you attach a d3 graphic to a table that was created automatically?

Calling all experts in d3, I require urgent assistance!! On this web page, a JSON is fetched from the server containing 50 different arrays of numbers and related data such as 90th percentiles, averages, etc. A table is dynamically created with the basic ...

Convert several XML nodes to display in an HTML format

I am currently facing an issue where I am trying to display all the nodes of a specific tag in XML. Although it does filter the data correctly, only one node is showing up. Is there anyone who can assist me with this problem? Below is the XML content: < ...

Query an array of objects for partial matches that are not case-sensitive, and then organize the results in alphabetical order

I am seeking assistance or guidance on which topics to explore for answers. As a newcomer to React, I have a code that successfully filters a list within the items object. However, I would like to switch to using a prepared JSON file instead. When I attem ...