CODEWITHSUNDEEP
javascriptjqueryhtml5-canvaschart.js
yasarui
yasarui

Reputation: 6573

How to get the data attribute of the canvas chart created using chartjs

Hi all i am using ChartJs to create charts.i am setting some data attribute on the canvas.on clicking on the chart i need to get the data attribute assigned in the canvas.i have found a method in the documentation which i used to get the label and values of the region of the chart clicked,but i don't know how to get the data attributes.

<!DOCTYPE html>
<html>
<head>
   <title> Pie Chart </title>
   <style>
      .pie-chart-canvas-wrapper{
         box-sizing:border-box;
         width:500px;
         height:300px;
         float:left;
      }
   </style>
</head>
<body>
   
   <div id="pie-charts-whole-wrapper" >
      <div class="pie-chart-canvas-wrapper">
          <canvas data-region="RO1" data-role="sales"  width="500px" height="300px" id="pie1" ></canvas>
      </div>
   </div> <!--/ Pie Charts whole Wrapper -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <script>
        var ctx1 = document.getElementById("pie1");
        var pieChart1 = new Chart(ctx1, {
            type: 'pie',
            data: {
                labels: ["signed", "Not Signed"],
                datasets: [
                    {
                        data: [20, 50],
                        backgroundColor:['#2ecc71','#34495e']
                    }
                ]
            }
        });

        ctx1.onclick = function(evt) {
          var activePoints = pieChart1.getElementsAtEvent(evt);
          if (activePoints[0]) {
            var chartData = activePoints[0]['_chart'].config.data;
            var idx = activePoints[0]['_index'];

            var label = chartData.labels[idx];
            var value = chartData.datasets[0].data[idx];
            
            console.log(label);
            console.log(value);

          }
        };

    </script>
</body>
</html>

Upvotes: 1

Views: 6877

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

If you want to get the attribute data-role, .getAttribute() is doing the job.

console.log(this.getAttribute("data-role"));

CodePen

Upvotes: 1

Related Questions