Tips for adding fixed labels to ng2-charts bar graphs

I am currently using ng2-charts and have an array of data. The challenge I am facing is that when I only have data for Tuesday and Wednesday, the chart only displays those two days. However, I would like the x-axis to remain static, showing all days of the week (Sun-Sat). Here is an example of what I have:

Current Chart Display:

https://i.sstatic.net/oAeA5.png

Desired Chart Display:

https://i.sstatic.net/KRxm3.png

HTML

<div style="display: block" *ngIf="barChartData">
  <canvas baseChart width="400" height="180" style="margin-left:5%;margin- 
top: 5%;" [datasets]="barChartData"
[labels]="barChartLabels" [options]="barChartOptions" 
[legend]="barChartLegend" [chartType]="barChartType"
(chartHover)="chartHovered($event)" [colors]="chartColors" 
(chartClick)="chartClicked($event)"></canvas>
</div>

TS

this.barChartLabels = this.days; //Expecting all week days [Sun, Mon, Tue, Wed, Thu, Fri, Sat]
setTimeout(() => {
 this.barChartData = [
   { data: this.marks },
 ]
})
angulartypescriptchart.jsng2-charts

Answer №1

Follow these instructions to update your code for the solution.

HTML

 <div>
        <div style="display: block">
           <canvas baseChart
                [datasets]="barChartData"
                [labels]="barChartLabels"
                [options]="barChartOptions"
                [legend]="barChartLegend"
                [chartType]="barChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>
         </div>
      <button (click)="randomize()">Update</button>
    </div>

TS

export class AppComponent {

    public barChartOptions:any = {
        scaleShowVerticalLines: false,
        responsive: true
    };
  public barChartLabels:string[] = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;

  public barChartData:any[] = [
    {data: [0, 0, 80, 81, 0, 0, 0], label: 'Graph 1'},
  ]
}

View the live demo

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 Updating Issue: Angular 2 Table Fails to Reflect Value Changes

I have initialized a table with user details using the ngOnInit() method. When I click on the "create user" button, it opens a form to add a new user to the database. However, the table does not update automatically with the new user's information. H ...

angulartypescript

The issue of inconvenience arises when dealing with `as const` arrays, as the readonly T[] is not directly assignable to T[]. The challenge lies in how to effectively remove

I encounter this issue repeatedly (playground link): const arr = [1,2,3] as const const doSomethingWithNumbers = <T extends number[]>(numbers: T) => {} doSomethingWithNumbers(arr) // ^ // Argument of type 'readonly [1, 2 ...

arraystypescriptreadonly

Troubleshooting issues with Angular 2+ flip animation when used in conjunction with ngIf

I am looking to create a sleek card flip animation using ngIf Link to code: https://stackblitz.com/edit/angular-card-flip-2wj64j?file=app%2Fcard%2Fcard.component.html Current animation: https://i.stack.imgur.com/CEaEc.gif ==================CODE======== ...

angularangular-animations

Cricket score update features on the client side

Looking for assistance with client-side code development! I am currently working on an Android application using Ionic that involves live cricket scores. I have purchased a cricket API and understand how to connect to it using Node.js on the server side. ...

javascriptandroidnode.jsangularionic4

Utilize JSX attributes across various HTML elements

I'm looking for a solution to efficiently add JSX attributes to multiple elements. Here are the example attributes I want to include: class?: string; id?: string; style?: string; And here are the example elements: namespace JSX { interface Int ...

typescriptjsx

How can I adjust the padding and width attributes of the mat-menu in Angular 5

Today, I am struggling with a piece of code. Whenever I click on the Details button, it is supposed to open a mat-menu. However, for some reason, I cannot seem to adjust the padding or width of the menu: <div id="box-upload" [hidden]="hiddenBoxUpload" ...

htmlcssangulartypescriptangular-material

Unnecessarily intricate: A Comparison and Enumeration of Elements in Arrays

I am facing a challenge with organizing arrays that represent categories and subjects. Each array represents a category, while each item within the array is a subject. For example: 4 Categories with Subjects ['A','B','D'] [&a ...

arraysobjecttypescriptcountcompare

Is there a way to integrate TypeScript into the CDN version of Vue?

For specific areas of my project, I am utilizing the Vue CDN. I would like to incorporate Typescript support for these sections as well. However, our technical stack limitations prevent us from using Vue CLI. Is there a method to import Vue.js into a bas ...

typescriptvue.js

Declaratively assign ambient typings to an unfamiliar object in Typescript

I am facing an issue with an external library named "gapi" that is set to a property on the window object as window.gapi. I would like to keep it there while using the @types/gapi declaration. Is there a way to achieve this, like the following code snippet ...

typescript

Setting the default value for a dropdown in Angular 2 using Kendo UI

I'm currently facing an issue with creating a dropdownlist using Kendo UI. The problem arises when I try to set a default selected value upon loading the screen. Referring to their documentation, my code is structured like this: HTML: <kendo-drop ...

javascriptangulardrop-down-menukendo-ui

Steps to resolve security vulnerabilities found in Angular 12.0.3 through npm audit

Upon creating a fresh Angular 12.0.3 project, running npm audit immediately uncovers 8 high and 40 moderate vulnerabilities. # npm audit report css-what <5.0.1 Severity: high Denial of Service - https://npmjs.com/advisories/1754 fix available via `npm ...

angularnpmnpm-auditangular12

Encountering SCRIPT1014 and SCRIPT1002 errors within an Angular4 application when using Internet Explorer 11

My Angular 4 application runs perfectly in various browsers. However, when trying to launch it in Internet Explorer version 11, I encounter the following two errors: SCRIPT1014: Invalid character addScript.js (9,1) SCRIPT1002: Syntax error main.bundle.js ...

javascriptangularinternet-explorer-11

How can I properly customize and expand upon a Material UI ListItem component?

I'm currently working with TypeScript version 3.4.5 and Material UI version 4.2. I have the following code snippet: interface MyItemProps { name: string; value: string; } function Item({ name, value, ...props }: ListItemProps<'li&apo ...

javascriptreactjstypescriptmaterial-ui

Angular and Three JS collaboration leads to misplacement of canvas rendering

Currently in the process of developing code for a website, I am attempting to integrate Three JS with Angular. After conducting some research, I have found that this combination is feasible and I have successfully merged these two libraries. However, I am ...

javascriptangularcanvasthree.jswebgl

Send the function to the directive

Below is the code for a directive: module app.directives { interface IDmDeleteIconController { doAction(): void; } class DmDeleteIconController implements IDmDeleteIconController { static $inject = ['$scope']; ...

angularjstypescript

Using JavaScript, generate an array of objects that contain unique values by incrementing each value by 1

I have an array of objects called arrlist and a parameter uid If the property value has duplicate values (ignoring null) and the id is not the same as the uid, then autoincrement the value until there are no more duplicate values. How can I achieve the a ...

javascriptreactjsarraystypescriptobject

Is there a shortcut for creating interfaces that have identical sub properties?

We are seeking to streamline the interface creation process by utilizing shorthand for properties labeled from Monday through Sunday, each with identical sub-properties. interface Day { start: number end: number } interface Schedule { Monday: Day ...

typescript

Can you share the appropriate tsconfig.json configuration for a service worker implementation?

Simply put: TypeScript's lib: ['DOM'] does not incorporate Service Worker types, despite @types/service_worker_api indicating otherwise. I have a functional TypeScript service worker. The only issue is that I need to use // @ts-nocheck at t ...

typescriptservice-worker

Angular's Spanning Powers

How can I make a button call different methods when "Select" or "Change" is clicked? <button type="button" class="btn btn-default" *ngIf="!edit" class="btn btn-default"> <span *ngIf="isNullOrUndefined(class?.classForeignId)">Select</spa ...

htmlangulartypescript

How to use Angular pipes to format dates as Long Dates in the template

Suppose I have a date input such as 2022-04-02T00:00:00. When I utilize {{data?.dateStarted | date:'MM/dd/YYYY'}}, the result will be 04/02/2022. But how can we transform it into a Long Date format like April 2, 2022? Does anyone have any sugges ...

javascriptangulartypescript