Issues with color display on charts within Ionic 3

I am working on an Ionic project that utilizes charts with the assistance of a library called chart.js. When I input dummy data into the chart, it displays the colors properly. Below is the code snippet for reference.

home.ts

public donutChartData: String[] = ["1100","1200","1300"];
public donutChartLabels: String[] = ["I","Me","Myself"];
public donutChartType: string = "doughnut"

home.html

<div style="display: block;">
<canvas baseChart [data]='donutChartData' height="350" [labels]='donutChartLabels' [chartType]='donutChartType'>
</canvas>

However, when I attempt to use customized data retrieved from Odoo server, the chart only displays in white color. Here is the data fetched from the API console.

-------donutChartData------800,900,1000,1200,1500
-------donutChartLabels------01-Aug-2017,02-Aug-2017,03-Aug-2017,04-Aug-2017,05-Aug-2017

The following code segment showcases how custom chart data is handled.

home.ts

public donutChartData: String[] = [];
public donutChartLabels: String[] = [];
public donutChartType: string = "doughnut"

private display(): void {
    // Code implementation here
}

I have researched extensively but am unable to pinpoint the cause of this issue. Any assistance would be greatly appreciated. Thank you!

Answer №1

Greetings! Implement [colors]="chartColors" in canvas

welcome-page.html

<div style="display: block;">
<canvas baseChart [data]='donutChartData' height="350" [labels]='donutChartLabels' [colors]="chartColors" [chartType]='donutChartType'>
</canvas>

Generate a variable in welcome-page.ts;

  public chartColors: any[] = [
    {
      backgroundColor:["#FF7360", "#6FC8CE", "#8dd35f", "#2a80f7"]
    }];

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

Guide to implementing nested asynchronous calls using a foreach loop

I am eager to enhance my skills and gain a better understanding of how to improve this code. While the current code is functioning, I suspect there may be an issue that needs addressing. Here's the concept: 1: Initially, I send the first HTTP request ...

Validation in Angular2 is activated once a user completes typing

My goal is to validate an email address with the server to check if it is already registered, but I only want this validation to occur on blur and not on every value change. I have the ability to add multiple controls to my form, and here is how I have st ...

Importing uuid v4 in TypeScript for React.js can be achieved by including the following

I am trying to implement a uuid as a random unique id generator in my project. However, I'm facing an issue while importing uuid v4. A red underline appears with the message "Could not find a declaration file for module 'uuid'". Even when I ...

A guide on activating the button once a user chooses an option from the dropdown menu in Ionic

I'm currently developing an Ionic Ecommerce app where I display products with their sizes. However, I'm facing an issue - I want to restrict users from adding the product to the cart without selecting a size first, but I'm struggling to impl ...

Encountering a 405 Error While Trying to Detect Location in Angular 7

I encountered an error 405 (Method Not Allowed) when trying to detect the location. Service public fetchWeatherDataByCoordinates(coordinates: ICoordinates): void { console.log("problem here") this.selectedLocationId.next(this.currentCoordinates ...

Tips for directly referencing the z-index property within a class in HTML - is that possible?

Is it permissible to include the following elements within a <div class="z-index-2"> tag? Is this considered correct or incorrect? Blockquote ...

Accessing component variables within an event in Angular 2 (dealing with scope problems)

I am currently facing an issue with scoping in my component click event. Specifically, I need to access private variables within the component, but the keyword this now refers to the event scope rather than the component's. This has led to an error wh ...

Tips for passing an id to a modal window component

I am currently working with Vue and Ionic, but I am unsure how to pass the lesson.id to the openModal() method. Here's the scenario: I have a card containing lesson data, including comments. When a user clicks on the comments, a modal window opens. I ...

Tips on setting a value to zero in Angular when there is no input

Is there a way to organize the data and show the PRN entries based on the date, for instance, when the month is January? If there is data for machine 1 with assetCode: PRN, it should be displayed under the header for children. Similarly, if there is data f ...

What is the best way to invoke a method from a class in Angular testing when the class has a Router constructor?

Currently, I am in the process of creating a test case for my authentication service outlined below. AuthService.ts import {Subject} from 'rxjs'; import {User} from './user.model'; import {AuthData} from './auth-data.model' ...

Develop an interface in TypeScript for intricate data structures

Displayed below is a variable that contains a collection of objects: scenes = { sky: { image: 'assets/1.jpg', points: { blue_area: { x: 1, y: 2 }, } }, blue_area: { image: & ...

What strategy does Node recommend for organizing code into multiple files?

In the midst of my current project, which involves NodeJS and Typescript, I am developing an HTML5 client that communicates with a NodeJS server via web-sockets. With a background in C#, I prefer to organize my code into separate files for different functi ...

Apache ECharts is throwing an error due to incompatible types of the 'trigger' property

I am experimenting with setting up some options in this demonstration, and here is what I have managed to achieve so far. testOptions: EChartsOption = Object.assign( {}, { backgroundColor: 'red', tooltip: { trigger: ...

Verify and retrieve information from the Dynamics CRM Web API with the help of Angular 2 (TypeScript)

How can one authenticate and query the Dynamics CRM Web API from a Single Page Application developed with Angular 2 (TypeScript)? Initial research indicates that: The Dynamics CRM (version 2016 or 365) instance needs to be registered as an application ...

The generation of the .prisma folder in the Node process is causing a file lock, which is hindering the progress of future

Node: 20.11.1 Azure Pipeline: Ubuntu 22.04.4 LTS Prisma: 5.10.2 I am currently utilizing an Azure pipeline to run a typescript-based ExpressJS application. Displayed below is the contents of my package.json: { "name": "...", & ...

Using Typescript Type Guard will not modify the variable type if it is set in an indirect manner

TL;DR Differentiation between link1 (Operational) vs link2 (not functional) TypeGuard function validateAllProperties<T>(obj: any, props: (keyof T)[]): obj is T { return props.every((prop) => obj.hasOwnProperty(prop)) } Consider a variable ms ...

Ensuring a precise data type in a class or object using TypeScript

I am familiar with Record and Pick, but I struggle to grasp their proper usage. My goal is to ensure that a class or object contains specific data types such as strings, Booleans, arrays, etc., while also requiring properties or fields of Function type. in ...

Error message: The line chart in angular-chartjs is encountering an issue with the function t.merge not

I am currently working on implementing a line chart example from the following source: . However, I am encountering an error and would appreciate any guidance or pointers to resolve it. Here is the error displayed in the console. Below is the code snippe ...

What are the steps to integrate the isotope-layout into a next.js project?

I have been exploring the implementation of isotope-layout in a next.js project. To accomplish this, I referred to the following blog post: https://stackoverflow.com/questions/25135261/react-js-and-isotope-js. Additionally, I found a useful codesandbox lin ...

What is the best way to ensure the flat list only renders once?

My objective is to display the ComponentTwo Flatlist just once, however, I am currently seeing the output as shown in image1, whereas I want it to be displayed like in image2. To showcase this issue, I have included a snack link containing the relevant cod ...