No label displayed

[romulus001]

Hello, in version 0.9.0, no label is displayed in each slice, here you have my code :
html:

<div id="chart-container">
  <canvas baseChart 
          [chartType]="chartType"
          [data]="chartData"
          [labels]="chartLabels"
          [options]="chartOptions">
  </canvas>
</div>

ts :

public chartType: string = 'doughnut';
	public chartLabels: Array<string> = ['January', 'February', 'March'];
	public chartData: Array<number> = [1, 1, 1];
	public chartOptions: any = {
	pieceLabel: {
		render: function (args) {
		const label = args.label,
				value = args.value;
		return label + ': ' + value;
		}
	},
	  legend: {
    	display: true
  	}
 }

My code comes from this link, did I forget something? Thanks
Additional info : I'm in an Ionic project (version 3.91), my version of angular is 4.1.3 and my node version is 8.4.0

[emn178]

try this option?

overlap: true

[romulus001]

Even with this code :
public chartOptions: any = { pieceLabel:{ render:"label", overlap: true } };
There is no difference...

[emn178]

But I can see labels in your link

[romulus001]

My donut is presented like this in my ionic project ;

I upload an ionic test project, so you can have a better idea of how to fix my issue, you can download the project here
To run the project, I use the ionic serve command line

[romulus001]

any solution to my issue?

[emn178]

Hi, I ran project and got this error

Typescript Error
Cannot find module 'ng2-charts'.

[romulus001]

weird, run then this command line in the root of the project
npm install ng2-charts --save

[romulus001]

or maybe it's cause this line is missing in the index.html file:

<script src="node_modules/chart.js/src/chart.js"></script>

[emn178]

You should import after Chart.js library load. in src/app/app.module.ts

import { ChartsModule } from 'ng2-charts';
import 'chart.piecelabel.js'; // after 'ng2-charts'

[romulus001]

ok, I already made the imports in my real project, I made this test project quickly

[romulus001]

Have you found a solution to my trouble?

[skidrow88]

I have the same issue in my Ionic project. No fixed yet.

[skidrow88]

However I got this warning : Can not find Chart object

This matchs with the following code in Chart.PieceLabel.js :
if (typeof Chart === 'undefined') {
console.warn('Can not find Chart object.');
return;
}

Do you have an idea how to fix it ?

[romulus001]

ah, true that, I have the same warning, moreover, I have the error message "Failed to load resource: the server responded with a status of 404 (Not Found)" from the chart.js file, that might explain the absence of the labels on the dounught chart

[emn178]

Can not find Chart object means that you should load chart.js before Chart.PieceLabel.js.

[skidrow88]

@emn178 Thanks for the feedback. I managed to resolve the warning and therefore the issue.

My mistake was to import 'chart.piecelabel.js' in the app.component.ts itself like in this example: https://stackblitz.com/edit/doughnut-chart-6iuguq?file=app%2Fapp.component.ts

and keep the import { ChartsModule } from 'ng2-charts'; in the app.module.ts. I think the import order was not right.

To resolve the "Can not find Chart object" warning and the issue, I removed the line "import 'chart.piecelabel.js';" from the component app.component.ts and add the following lines in the app.module.ts:

import { ChartsModule } from 'ng2-charts';
import 'chart.piecelabel.js'; // after 'ng2-charts'

[romulus001]

by importing the chart.js file, the labels finally appeared and I have no warning. About the app.components.ts file, I made no import, I imported the files in the page with the chart