Chart.JS tooltip color settings in pie chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Tooltip

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Tooltip

Description

Chart.JS tooltip color settings in pie chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from   www .j  a v a2s .c om*/
        var ctx2 = document.getElementById('pie-chart').getContext('2d');
        var green_darkgreen_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
        green_darkgreen_gradient.addColorStop(0, '#16D99B');
        green_darkgreen_gradient.addColorStop(1, '#22A77C');
        var red_darkred_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
        red_darkred_gradient.addColorStop(0, '#F22626');
        red_darkred_gradient.addColorStop(1, '#BE1111');
        var yellow_darkyellow_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
        yellow_darkyellow_gradient.addColorStop(0, '#DFD337');
        yellow_darkyellow_gradient.addColorStop(1, '#C5B929');
        var pieChart = new Chart(ctx2,{
            type: 'pie',
            data: {
                labels: ['Aberto', 'Fechado', 'Transferido'],
                datasets: [{
                    data: [7, 10, 15],
                    backgroundColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
                     hoverBackgroundColor:[green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
                    hoverBackgroundColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
                    hoverBorderWidth: 0,
                    hoverBorderColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
                    borderColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient]
                }]
            },
            options: {
                legend: {
                    display: false,
                    labels: {
                        fontColor: "#000",
                        fontSize: 18
                    }
                    },
                    tooltips: {
                      backgroundColor: '#000',
                      titleFontSize: 16,
                      ttitleFontColor: '#0066ff',
                      bodyFontColor: '#FFFFFF',
                      bodyFontSize: 14,
                      displayColors: false
                   }
               }
        });
    }

      </script> 
   </head> 
   <body style="height: 100%; width: 100%">  
      <div style="height: 100%; width: 100%"> 
         <canvas id="pie-chart" height="213"></canvas> 
      </div>   
   </body>
</html>

Related Tutorials