Show value in popup on doughnut chart slice click in chart.js

Question

1.00/5 (1 vote)

See more:

, +

I am showing doughnut chart using Chart.js, on slice click i want value in PopUp.

This is my HTML Code

HTML

<canvas id="chart-area" height="200" width="300"></canvas>

Code to fill and show data

JavaScript

<script src="assets/js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="assets/js/Chart.js"></script>
    <script type="text/javascript">

         var Accepted = 0;
         var Denied = 0;
         var InProgress = 0;

     $(document).ready(function () {   
     
      var obj = {};
            obj.FinYear = $.trim($("[id*=ddlFinYear]").val());
              
                  $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Dashboard.aspx/GetClaimStatusCnt",
                     data: JSON.stringify(obj),
                     async: false,
                    // data: "{}",
                    dataType: "json",
                    success: function (Sdata) {                      
                        Accepted = Sdata.d[0].Accepted;
                        Denied = Sdata.d[0].Denied;
                        InProgress = Sdata.d[0].InProgress; 
                         },
                    error: function (result) {
                        alert("Claim Status Error");                                          
                    }
                });

                });

 var doughnutData = {
    labels: [
        "Accepted",
        "In Progress",
        "Denied"       
    ],
    datasets: [{
                data: [
                 Accepted,// randomScalingFactor(),
                  InProgress,//randomScalingFactor()  
                 Denied//randomScalingFactor(),
                                  
                ],
                backgroundColor: [
                    window.chartColors.green,
                    window.chartColors.blue,
                    window.chartColors.orange                    
                ],
                label: 'Dataset 1'
            }]
            
};
 
jQuery(document).ready(function() {
var ctz = document.getElementById("chart-area").getContext("2d");
 
    window.myDoughnutChart = new Chart(ctz, {
        type: 'doughnut',
        data: doughnutData,
        options: {
            responsive: true,
            elements: {
                arc: {
                   // borderColor: "#333"
                }
            },
            //cutoutPercentage: 50
			//onClick:graphClickEvent,
			legend: {
                position: 'bottom',
            },
            title: {
                display: true,
                text: ''
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
			
        },
      
		
    });
    
});
    </script>

Thanks in advance....

What I have tried:

I had given code which tried please check the code

Posted 9-Feb-17 0:47am

Ravi Sargam

Updated 9-Feb-17 3:06am

Add a Solution

Comments

Richard Deeming 9-Feb-17 6:54am

And what is the problem with the code you have tried?

Ravi Sargam 9-Feb-17 6:55am

it is working fine but how to show alert/popup on chat slice click...

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sachin.vishwa90 · Answer 1 · 2017-02-09T03:06:00

hi chap, i hope you are referring this jquery library.
this library says that you can configure the click event on legand. visit the link and search for "legend.onClick" keyword. this will give you the event and legandItem.
Now you have to write the logic to identify your leganditem and proceed.

so the modified code will somewhat look like

legend: {
                position: 'bottom',
            },
            title: {
                display: true,
                text: ''
            },
            animation: {
                animateScale: true,
                animateRotate: true
            },
            onClick:function(event,item){
                    your logic to show value in popup;
                    }

second solution can be found here
javascript - Click events on Pie Charts in Chart.js - Stack Overflow[^]