Having trouble creating two bar charts with different data sets in ng2-charts using Angular 8

I attempted to display two charts simultaneously on a single page by utilizing the following code in HTTP:

<div class="chk-block-content">
    <canvas height="100" width="500" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType"></canvas>

</div>

 <div class="chk-block-content">
    <canvas height="100" width="500" baseChart [datasets]="barChartData2" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="bar"></canvas>
</div>

Despite configuring them in separate blocks, only the data from barChartData is displayed on the screen. In my component ts file, I defined them as follows:

 public barChartdata2: any[]=[
      {data: [10], label: 'Series A'},
      {data: [10], label: 'Series B'}
   ]
   public barChartLabels:string[] = [ 'January', 'February','March','April','May','June','July','August','September','October','November','December'];
   public barChartType:string = 'bar';
   public barChartLegend:boolean = false;
   public barChartData:any[] = [
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   ];

Why is only barChartData being shown?

Is there a method for me to view both datasets at once?

angulartypescriptng2-charts

Answer №1

Here are a few points to consider:

  • In your TypeScript file, the variable is named barChartdata2, whereas in the second chart it is referred to as barChartData2 (with a capital D).
  • The chart type in your HTML should be barChartType instead of just bar.

Highlighted HTML:

<div class="chk-block-content">
    <canvas height="100" width="500" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType"></canvas>
</div>

 <div class="chk-block-content">
    <canvas height="100" width="500" baseChart [datasets]="barChartData2" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType"></canvas>
</div>

Highlighted TypeScript file:

import { Component, OnInit } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import { Label } from "ng2-charts";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
public barChartData2: any[]=[
      {data: [10], label: 'Series A'},
      {data: [10], label: 'Series B'}
  /*
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   */
   ];
   public barChartLabels:string[] = [ 'January','February','March','April','May','June','July','August','September','October','November','December'];
   public barChartType:string = 'bar';
   public barChartLegend:boolean = false;
   public barChartData:any[] = [
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   ];
  constructor() {  }
  ngOnInit() {}
}

View the working stackblitz example here

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

The blur event in Angular Material's mat-date-range-input does not trigger if the End Date is not selected

I am currently utilizing Angular 15 along with Angular Material 14. The code for the DatePicker control is shown below. <mat-form-field class="datepicker-widget" appearance="fill"> <mat-date-range-input [formGroup]="d ...

angularangular-material

The error message "Uncaught ReferenceError: exports is not defined and require" indicates that

I am currently developing an app using angularjs and typescript, but I've encountered a persistent error that has me stumped. Below is the snippet of my code: export var NgApp = new application.Startup(); ///<reference path="../../../../../typin ...

angularjstypescriptgulpecmascript-6

Having trouble connecting useRef eventListeners in TypeScript/JavaScript

Trying to connect an eventListener to a container in Typescript using useRef and useEffect hooks. The issue we are encountering is: No overload matches this call. Overload 1 of 2, '(type: keyof HTMLElementEventMap, listener: (this: HTMLDivElement, ev: ...

reactjstypescriptreact-hooksaddeventlistenerevent-listener

Coloring the background of a day on the Angular Ng-Bootstrap Datepicker Calendar

Is it possible to customize the background color of days that are more than 1 day away on the ng-bootstrap datepicker calendar? I want them to change color in the same way as when a day is selected. Currently, when a day is selected, the div class changes ...

angulardatepickerng-bootstrap

What is the proper way to access the current value of a computed property from within its own computation method?

Our goal is to activate a query when a string reaches a length of 3 characters or more, and keep it activated once triggered. Leveraging the Vue 2 Composition API, we have implemented a reactive object to manage the status of queries: import { computed, de ...

typescriptvue.jsvuejs2vuejs3vue-composition-api

Acquiring user information from Firebase using Angular 2

Here's a signup code snippet that pertains to my previous inquiry on Stack Overflow about adding user data upon account creation. The code is as follows: signup(){ firebase.auth().createUserWithEmailAndPassword(useremail, userpassword) .then(fu ...

angularfirebasefirebase-realtime-databasefirebase-authentication

What is the best way to retrieve unique column values using the LoopBack REST API?

I am working with a loopback REST API that fetches data from a MySQL table and returns it in JSON format. However, I need to apply a filter or query so that only distinct values for a specific column are returned. In SQL, we use the syntax SELECT DISTINC ...

mysqljsonrestangularloopback

Utilize the power of Wikitude within an Angular 2 application

I am currently working on integrating Wikitude Architect View in Angular 2 by referring to the code at this link. My goal is to implement this code in an Angular 2 compatible way. import * as app from 'application'; import * as platform from & ...

javascriptangularjsangulartypescriptwikitude

Utilizing global enumerations within VueJS

Is there a way to effectively utilize global enums in Vue or declare them differently? My current setup is as follows: Within my types/auth.d.ts: export {}; declare global { enum MyEnum { some = "some", body = "body", o ...

typescriptvue.jsenumsvuejs3

How to detect a click event in any area of an Angular2

Hey there, I'm new to typescript and angular 2 and I've encountered an error in my code. Can someone lend me a hand in fixing this? import { Component, HostListener } from '@angular/core' export class TooltipComponent { public sh ...

javascriptangulartypescript

Using Typescript with Angular 2 to Implement Google Sign-In on Websites

Currently, I am in the process of creating a website that utilizes a typical RESTful web service to manage persistence and intricate business logic. To consume this service, I am using Angular 2 with components coded in TypeScript. Instead of developing m ...

javascripttypescriptangulargoogle-signin

What is the best way to integrate Circles into a line chart using the "d3.js" library?

I am encountering an issue with the placement of circles in a line chart created using d3.js. The circles are not appearing at the correct position on the chart. How can I troubleshoot and resolve this problem? My development environment is Angular, and t ...

angulard3.jschartslinechart

Angular encountering a null value within a pre-existing nested object

Upon receiving a fully populated object from my server to my angular service, everything appears correct in Postman and when I use JSON.stringify in the Angular component. However, I encounter an issue when trying to access nested objects within the view. ...

htmlangulartypescripttypeerrornested-object

Efficient method for importing SVG files to serve as a favicon in a React project

Can I use an SVG image as a favicon in React? I currently have the following code that imports a PNG image: import { favicon } from './static/favicon' <link href="${favicon}" rel="shortcut icon" /> The PNG image is exported as a const fr ...

reactjstypescriptsvgfavicon

The search for the "index" view in the views directory failed - Angular Universal SSR encounters errors with Firebase Cloud Functions

Currently, I am working through a tutorial on Server Side Rendering with Angular, Angular Universal, & Firebase 2021. The goal is to deploy my Angular universal project to Firebase hosting using Firebase functions. I managed to set up the emulator suc ...

angularfirebaseexpressgoogle-cloud-functionsangular-universal

Tips for obtaining a reference to the ngfor-list with a pipe implemented on it

When applying a filter to a list within an ngFor directive, such as *ngFor="data | pipe", it can be challenging to access the filtered data in the component class. One attempted solution is using *ngFor="data | pipe as filtereddata", but this approach seem ...

angular

Error: The module 'fs' could not be located after running Rollup

Having encountered this issue, I understand that it has been a common question on the internet. I apologize for potentially duplicating the query. Despite trying various solutions found online, none have proven to be effective. The Problem: The problem ar ...

typescriptnpmcreate-react-approllupjs

Issue with Angular 12 service worker causing SW update to fail

I'm currently working on integrating a service worker into my Angular application to enable updates without user intervention. Here is the step-by-step process that I am following: Make changes to the application Run ng build Start an HTTP ser ...

javascriptangularservice-workerangular12

iPhone glitch: When subscribing to an observable, I am immediately shown the initial value it emitted

Could you help me identify the issue in this code? I am attempting to set up data polling, but it seems that the responses after the initial request are not being sent to the back-end. Additionally, all observables return the same value as the first respon ...

angularrxjs

Loading compact Angular Modules in modules loaded lazily

After developing a module in Angular known as CustomCoreModule, it has gradually expanded over time and resulted in performance issues, leading to the app becoming non-modular and difficult to maintain. To address this issue, I have decided to split the l ...

angularangular8