Is there a way to customize a chart in Ionic 2 to resemble the image provided?

Hello there, I am currently using import {Chart} from 'chart.js'; to generate my chart; however, I am facing some difficulties. My goal is to create a chart similar to the one displayed below.

Warm regards

//Generating the doughnut
    this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {


      type: 'doughnut',
      data: {
        labels: ["Cash in Hand", "Cash in Bank", "Cash in Mpesa"],
        datasets: [{
          label: '# of Votes',
          data: [this.naaam, this.naaam1, this.naaam2 ],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          hoverBackgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56"
          ]
        }]
      }

    });

Answer №1

In our Ionic 2 application, we have integrated Chart.js to display charts using the ng2-charts library.

If you want to place the total value at the bottom center of the chart, simply enclose the chart within a div and include a span element with absolute positioning for displaying the total.

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

Troubleshooting CORS: Dealing with 'Access-Control-Allow-Origin' issue in Angular when making HTTP calls with Spring Boot. Learn how to handle

To establish a connection between my angular application and the spring boot server, I am using an angular http call. Additionally, I have integrated a security dependency for the spring boot application. When attempting to access it through the browser, ...

Accessing file uploads in Angular 2

<div class="fileUpload btn btn-primary"> <span>Select File</span> <input id="uploadBtn" type="file" class="upload" value="No File Chosen" #uploadBtn/> </div> <input id="uploadFile" placeholder="No File Selected" disable ...

Protractor experiencing difficulty recognizing Angular functionality

Recently, I made the switch to using Protractor for running end-to-end tests on my Angular application. However, the e2e tests have suddenly started failing because Protractor is unable to detect Angular on the website. I raised this issue in their GitHub ...

Challenges arise with dependencies during the installation of MUI

[insert image description here][1] I attempted to add mui styles and other components to my local machine, but encountered a dependency error. How can I resolve this issue? [1]: https://i.stack.imgur.com/gqxtS.png npm install @mui/styles npm ERR! code ERE ...

Tips for preventing the need to cast a DOM element to any in Typescript

In my Typescript code, I am retrieving the value of a DOM element like this: document.getElementById('MyElementId') as HTMLElement).value I feel unsure about casting it to HTMLElement. Is there a better way to specify the type and retrieve this ...

Differentiate the array type within an object in TypeScript

I understand how to specify the type for a variable. let members: string[] = [] // this example works flawlessly My goal is to have an array of strings within an object. How can I structure it correctly? const team = { name: String, members<st ...

Leveraging an external Typescript function within Angular's HTML markup

I have a TypeScript utility class called myUtils.ts in the following format: export class MyUtils { static doSomething(input: string) { // perform some action } } To utilize this method in my component's HTML, I have imported the class into m ...

Error message: The specified expression cannot be built using Google OAuth authentication in a Node.js environment

I'm currently working on integrating my NodeJS API, which was developed in TypeScript, with Google Oauth2 using Passport. However, when following the documentation written in JavaScript, I encountered an error underlining GoogleStrategy. This expressi ...

A guide on implementing JSON data projection with TypeScript

{ "ClaimType": ["The 'Claim Type' should have a minimum length of 4 characters. You have only entered 2 characters."], "ClaimValue": ["The 'Claim Value' should have a minimum length of 4 characters. You have only entered 1 chara ...

Encountering an issue with NgRx store where the property 'products' is not recognized on the type 'ActionCreatorProps<{ payload: Product[]; }>' while attempting to build a reducer

Currently, I am delving into the @ngRx/store package within my Angular 14 App. My primary goal is to establish a basic store capable of containing a simple object Array. Here is an excerpt from my action file: import { Product } from 'src/app/data-mod ...

Utilizing Angular 2 in a MEAN application, and configuring the systemjs.config.js to serve the node_modules folder

Do you think it is a good idea to serve the "node_modules" folder as static to the front-end? In my Angular 4 app, I am using systemjs.config.js file to load dependency modules like core-js and reflect-metadata to bootstrap the application and load the mai ...

Sharing enums between client and server code in Webpack is a smart way to improve

I'm currently working on a project setup that looks like this: | |--public-|file1.ts | |enum.ts | |--server/file2.ts | The issue I am facing is incorporating the enum defined in enum.ts into both file1 and file2. While file1 can import and u ...

Steer clear of receiving null values from asynchronous requests running in the background

When a user logs in, I have a request that retrieves a large dataset which takes around 15 seconds to return. My goal is to make this request upon login so that when the user navigates to the page where this data is loaded, they can either see it instantly ...

Configuring SSL for an AWS Mean Stack deployed on an EC2 instance with ngInx hosting

Currently in the process of setting up SSL/https for my website, following steps from various sources but encountering some issues. Seeking guidance. Here are the steps I have taken so far: Hosted my MEAN stack website on EC2 in AWS. Both UI and Bac ...

Issue obtaining information from Firestore and presenting it visually on the screen

I have been working on developing a website using Angular and Firebase. The site allows different users to create accounts, and registered users can add contacts to the Firestore database. However, I have encountered a problem where the added contact info ...

What is the best way to set up my page to detect the "enter" key input when the form is not created with the <form> tag?

Within the HTML code, data is received and stored in variables within my TypeScript file. At the end of the HTML, there is a button that was created separately from any user input containers. This button triggers a function that processes the information i ...

What is the process for sending values to a component?

I am working with a component called MyComponent: export class MyComponent { @Input() active:boolean; constructor() { console.log(this.active); } } In this component, I have declared an Input, and I pass it in as follows: <mycomp ...

Using TypeScript in React, how can I implement automation to increment a number column in a datatable?

My goal is to achieve a simple task: displaying the row numbers on a column of a Primereact DataTable component. The issue is that the only apparent way to do this involves adding a data field with indexes, which can get disorganized when sorting is appli ...

I'm really puzzled as to why they would choose to export in this manner in React

I noticed that several files were exported in a similar manner, and I'm unsure why this specific method was chosen. Could there be any advantages or particular reasons for exporting them like this? index.ts export { default } from './Something& ...

How to use SASS mixins in Angular 5 components

Within my Angular 5 project, I have organized my SASS styles into a separate directory which contains all the variables, functions, and mixins. These are then imported into my main style.scss file. @import 'abstracts/variables', 'abstracts/ ...