Creating a bar chart in Chart JS using an array of data objects

I need to create a unique visualization using a bar chart where each bar represents a user or student. Each bar will have an xAxis label displaying the student's name.

The code below is a VueJS computed property named chartData

For my bar chart data, I am using an array of objects which I generate like this

let dataRow = this.responses.map((d) => {
  return {
    label: d.user.name,
    data: [d.grade],
  }
});

This is how I create my labels

let users = [];
this.responses.map((d) => {
  users.push(d.user.name)
});

The final object returned includes an array of labels and datasets containing data in the form of an array of objects

return {
  labels: users,
  datasets: [{
    data: dataRow
  }],
}

This is how the chart is rendered:

{
  extends: Bar,
  props: ["chartdata"],
  data() {
    return {
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              max: 100
            }
          }],
        },
      },
    }
  },
  mounted() {
    this.renderChart(this.chartdata, this.options)
  }
}

Concern: The chart is not displaying and there are no error messages

The issue seems to be related to the format of the data in the datasets array. It appears that the bar chart only functions properly when the data is not formatted as an array of objects like:

testData: {
  labels: ['test', 'test', 'test'],
  datasets: [{
    data: [65, 59, 80],
  }]
}

Following Sayf-Eddine's comment, I made some adjustments:

https://i.stack.imgur.com/ZkOCC.png

I updated how I structure the chart data like this:

return {
      labels: users,
      datasets: dataRow
}

However, all bars are now mapped to the first label

Answer №1

Thanks to Vitaliy Rayets' valuable input, I was able to identify the issue

I realized that in order to retrieve the correct data row, I should write it as:

let dataRow = this.responses.map((d) => {
  return {
    label: d.user.name,
    y: [d.grade],
  }
});

**I made a modification from 'data' to 'y' property **

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

What could be causing the inability to move down on this page?

Trying to scroll down a page using Selenium with Python and the execute_script command, but encountering issues. Despite executing the code provided below, I am unable to reach the bottom of the page: def create_browser(first_page=None): print "Starti ...

Can the Browser width/document width be maintained when shrinking the browser window size?

https://i.stack.imgur.com/a4gfA.pngLooking for a solution to maintain the browser/document width at 350px, preventing users from minimizing the window. The desired width is actually 400px, not 350px. Please refer to the image above. I require the window ...

Is there a way to fix the issue of ContextMenu not appearing at the right position within a scrollable

I have a div within an iframe that needs to display a context menu when right-clicked. The div's length may exceed the visible area, making it scrollable. However, the issue I am facing is that the context menu appears in a different position than whe ...

The checkbox labeled "Shipping Same as Billing" is not functioning correctly. I have included my JavaScript code below, can someone please help me identify what I am overlooking? (Only JavaScript code is provided; HTML is

I'm having trouble transferring data from a 'shipping' address to the 'billing' address section. I've included all my code, but nothing seems to copy over when the check box useShip is selected. All the HTML code is provided f ...

what is the best way to center list items in material ui?

I have been attempting to align the list items (checkbox, text, and buttons) within a Material UI list in the center, but all my attempts have been unsuccessful. Is there anyone who knows how to resolve this issue? Your help would be greatly appreciated! h ...

The CORS policy has blocked access to the image located at [Img Link] from the [domain] origin

My situation involves two domains: domain.com for hosting my VueJs application and api.domain.com for hosting my Django API. Both applications are hosted on an AWS (EC2 ubuntu instance). Despite adding add_header 'Access-Control-Allow-Origin' &a ...

Variables for NPM Configuration

After researching the best way to securely store sensitive information, I decided to utilize the config package and environment variables for added security. Here is how I implemented this setup: Created a config directory containing two files: default.js ...

Tips for ensuring a method is not invoked more than once with identical arguments

I'm grappling with a challenge in JavaScript (or typescript) - ensuring that developers cannot call a method multiple times with the same argument. For instance: const foo = (name: string) => {} foo("ABC") // ok foo ("123") ...

jQuery Soundboard - Pressing a single button will automatically deactivate all other buttons

I am currently developing a unique jQuery/PHP soundboard feature where I am faced with the challenge of stopping the HTML5 Audio playback when clicking on just one button, while attached to several other buttons. Here is what I have managed to code so far: ...

Implementing a Button Click Event Listener on a Separate Component in React

Currently, my React application incorporates MapBox in which the navbar is its parent component. Within the navbar component, there is a button that collapses the navbar when clicked by changing its CSS class. I also want to trigger the following code snip ...

When the checkbox is not selected, the content on the page will revert back to its original state

Is there a way to dynamically change content on a page when a checkbox is checked, and revert it back when the checkbox is unchecked? I don't want to manually set each element's value to default in JavaScript and CSS. <div class="switch&q ...

What is the default way to toggle content in rows using Material UI?

Currently, I am utilizing Muitables and have a query regarding how to set the expanded rows to be displayed by default, similar to the illustration below: Upon initial page load, it is preferred for the content in that row to automatically expand (arrow d ...

Expanding VS 2013: Effective management of classes through item customization

Trying to accomplish a somewhat complex task, I have dedicated hours to searching for the appropriate documentation with no success. The goal is for Visual Studio to generate some JavaScript code and place it in a specific folder, starting from: Performi ...

populating a multi-dimensional array using a "for" loop in Javascript

It appears that JavaScript is attempting to optimize code, causing unexpected behavior when filling a multidimensional array (largeArr) with changing values from a one-dimensional array (smallArr) within a loop. Take the following code for example: largeA ...

What is the process for accessing an API that requires a token using Axios in a Vue.js application?

I am trying to retrieve information from an API that has a JSON file using Axios, but it requires a Token and I am unsure of how to properly implement it. Can anyone provide assistance with this? The API can be accessed here: ‫‪https://api.nytimes.com ...

Searching for data in Ag grid Vue using a filter

Can someone help me create a search filter in ag grid vue like the one shown in this image? Image link: https://ibb.co/cwVq7DD For documentation, refer to: https://www.ag-grid.com/vue-data-grid/tool-panel-columns/#read-only-functions I attempted to impleme ...

Utilize WebdriverIO to loop through elements and trigger a click event on a link

I am currently using Javascript and webdriverio (v2.1.2) for data extraction on an internal website. The process involves: Authentication Opening the necessary URL once authenticated Searching for an anchor tag with a specific keyword on the new page Cli ...

``I am experiencing difficulties with utilizing a personalized color scheme in React JS with Material

I'm currently working on customizing the color palette for my project, but I am only able to modify the main attribute and not others. My development environment is JavaScript with MUI, not Typescript. import './App.css'; import {BrowserRout ...

How can I create a customized scrollbar for a div element in an Angular 2.0 CLI project?

I am attempting to create a sleek horizontal scroll bar within one of my div elements, similar to the example shown here: https://i.stack.imgur.com/ziWhi.png My project is based on the angular2 CLI. Progress so far: I came across this package angular2-s ...

Is there a way for me to show "No data" when the json response in vue js is empty?

Is it possible to display a message like "No search results" when there is no data available? I am new to this and only have basic understanding. Can someone guide me on how to achieve this? Example of my JSON data when it's empty: { "status": true ...