Page 1 of 1
PrimeNG and ChartJS - Show chart label or tooltip inside arc of pie / doughnut chart
Posted: 18 Jan 2019, 13:31
by rcosta
I have a doughnut chart from chartjs of PrimeNG and I want show his label inside arc of it, as percentage.
I tried use the chartjs-plugin-labels, but doesn't work for me. My code for chart options is below.
Code: Select all
{
legend: {
position: 'right'
}
};
I expect show a Pie Chart like:
Re: PrimeNG and ChartJS - Show chart label or tooltip inside arc of pie / doughnut chart
Posted: 22 Jan 2019, 09:45
by merve7
Hi,
I tried and it works. Please, could you check your code with the below sample code;
Code: Select all
this.pieData = {
labels: ['A', 'B', 'C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
'#FFC107',
'#03A9F4',
'#4CAF50'
],
hoverBackgroundColor: [
'#FFE082',
'#81D4FA',
'#A5D6A7'
]
}]
};
this.pieOptions = {
legend: {
position: 'right'
}
};
Code: Select all
<p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart>
Re: PrimeNG and ChartJS - Show chart label or tooltip inside arc of pie / doughnut chart
Posted: 22 Feb 2019, 13:08
by zeeshanrauf007
I need exactly this, but dont know how to display values on graph as well. Please guide to how to display the values on graph ?
Re: PrimeNG and ChartJS - Show chart label or tooltip inside arc of pie / doughnut chart
Posted: 25 Feb 2019, 13:29
by merve7
Hi,
You can see a solution/example you want in the below link;
https://stackoverflow.com/questions/421 ... -pie-chart