To write text inside a doughnut chart in Angular 2 (or later versions), you can use the Chart.js library along with the ng2-charts wrapper for Angular. The ng2-charts wrapper provides an Angular-friendly interface for Chart.js, which allows you to easily create and customize various types of charts, including doughnut charts.

Here's a step-by-step guide on how to achieve this:

Step 1: Install Chart.js and ng2-charts First, install Chart.js and ng2-charts using npm:

bash
npm install chart.js ng2-charts --save

Step 2: Import required modules in AppModule In your app.module.ts, import the ChartsModule from ng2-charts and Chart.js:

typescript
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ChartsModule } from 'ng2-charts'; import { AppComponent } from './app.component'; @NgModule({ imports: [BrowserModule, ChartsModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }

Step 3: Create the Doughnut Chart Component Create a new component to hold the doughnut chart. For example, create a component named DoughnutChartComponent.

Step 4: Implement the Doughnut Chart Inside the DoughnutChartComponent, implement the doughnut chart using the ng2-charts directive. You can customize the chart options to include text inside the doughnut.

typescript
import { Component } from '@angular/core'; @Component({ selector: 'app-doughnut-chart', template: ` <div style="display: block"> <canvas baseChart [data]="chartData" [options]="chartOptions" [plugins]="chartPlugins" [legend]="true" [chartType]="'doughnut'"> </canvas> </div> ` }) export class DoughnutChartComponent { chartData: number[] = [25, 50, 75]; // Replace with your data values chartOptions: any = { responsive: true, cutoutPercentage: 80, // Adjust this value to control the doughnut size legend: { display: false }, plugins: { datalabels: { color: '#fff', // Text color inside the doughnut font: { size: 16 // Font size of the text inside the doughnut }, formatter: (value: any) => { return value + '%'; // Format the displayed text as desired } } } }; chartPlugins: any[] = [{ beforeDraw(chart: any) { const ctx = chart.ctx; const txt = 'Text Inside Doughnut'; // Replace with your desired text const textX = (chart.chartArea.left + chart.chartArea.right) / 2; const textY = (chart.chartArea.top + chart.chartArea.bottom) / 2; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = '16px Arial'; ctx.fillStyle = '#000'; // Text color of the center text ctx.fillText(txt, textX, textY); } }]; }

In this example, we use the chartOptions to customize the doughnut chart. We set the cutoutPercentage to control the size of the doughnut hole. Additionally, we use the datalabels plugin to display the values inside the doughnut. The formatter function is used to format the displayed text, which, in this case, adds a percentage symbol to the value.

The chartPlugins array contains a custom plugin that draws the specified text inside the doughnut. The beforeDraw function is executed before the chart is drawn, allowing us to draw additional elements, such as the text, on the canvas.

Step 5: Use the Doughnut Chart Component Now, you can use the DoughnutChartComponent in your application's HTML wherever you want to display the doughnut chart with the custom text.

html
<app-doughnut-chart></app-doughnut-chart>

Replace the chartData array with your actual data values for the doughnut chart.

That's it! Now you have a doughnut chart with customized text inside it in your Angular 2+ application using the ng2-charts wrapper for Chart.js.

Have questions or queries?
Get in Touch