PrimeNG and ChartJS - Show chart label or tooltip inside arc of pie / doughnut chart

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
rcosta
Posts: 9
Joined: 13 Dec 2016, 22:43

18 Jan 2019, 13:31

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:

Image

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

22 Jan 2019, 09:45

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>
Image

zeeshanrauf007
Posts: 2
Joined: 22 Feb 2019, 12:59

22 Feb 2019, 13:08

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 ?

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

25 Feb 2019, 13:29

Hi,
You can see a solution/example you want in the below link;
https://stackoverflow.com/questions/421 ... -pie-chart

Post Reply

Return to “Serenity - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests