Setting Common labels and background color common for all the charts in ChartJs

Viewed 1337

Hi guys i am using ChartJS for creating pie charts,it is pretty good.In my project i have to create many pie charts, all the charts will have the same labels and background color.In the code given below i am giving the backgroundColor and label while creating the pie charts individually.Is there any way to make label and background color common for all the charts.

<!DOCTYPE html>
<html>
<head>
 <title> ChartJS tutorial </title>
 <style type="text/css">
        #pie-charts-wrapper{
         width:1000px;
         margin-left:auto;
         margin-right:auto;
        }
        .pie-chart-wrapper{
         width:500px;
         height:300px;
         box-sizing:border-box;
         float:left;
         padding:20px;
        }
 </style>
</head>
<body>
    
    <div id="pie-charts-wrapper">
       <div class="pie-chart-wrapper">
          <canvas id="pieChart1" width="500px" height="300" ></canvas>
       </div>
       <div class="pie-chart-wrapper">
          <canvas id="pieChart2" width="500px" height="300" ></canvas>
       </div>
    </div>       

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" ></script>
    <script type="text/javascript">
        var ctx1 = document.getElementById("pieChart1");
        var ctx2 = document.getElementById("pieChart2");

  var data1 = {
      labels: ['Signed','Not Signed'],
      datasets: [{
       backgroundColor:['#1abc9c','#34495e'],
        data: [10, 25],
      }],
  };

  var data2 = {
      labels: ['Signed','Not Signed'],
      datasets: [{
       backgroundColor:['#1abc9c','#34495e'],
        data: [15, 2]
      }],
  };

  var myPieChart1 = new Chart(ctx1,{
      type: 'pie',
      data: data1
  });

  var myPieChart2 = new Chart(ctx2,{
      type: 'pie',
      data: data2
  });
    </script>
</body>
</html>

1 Answers
Related