Chart.js - Tooltip-alljchome-开发者的教程家园

Chart.js Tutorial

Selected Reading

Chart.js - Tooltip

Chart.js Tooltip provides us an option to show tooltip text in our chart. Tooltip is a graphical UI element that provides extra information as we hover the mouse over the chart elements. The namespace for Animation configuration is options.plugins.tooltip.

Syntax

The Chart Tooltip syntax is given below −


options: {
   plugins: {
      tooltip: {
         enabled: true,
         (Write tooltip s style element)
      },
   }
}

The tooltip enabled property must be true to display the data label. If it sets to false, then the tooltip becomes deactivated.

Example

Let’s take an example in which we will be using various Tooltip configurations −


<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/pbs/Chart.js/3.1.1/chart.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/pbs/Chart.js/3.1.1/helpers.esm.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type:  bar ,
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "onpne tutorial subjects",
               data: [20, 40, 30, 35, 30, 20],
               backgroundColor: [ coral ,  aqua ,  pink ,  pghtgreen ,  pghtblue ,  crimson ],
               borderColor: [ red ,  blue ,  fuchsia ,  green ,  navy ,  black ],
               borderWidth: 2,
            }],
         },
         options: {
            responsive: false,
            plugins: {
               tooltip: {
                  enabled: true,
                  usePointStyle: true,
                  titleApgn:  center ,
                  titleColor:  gold ,
                  titleSpacing: 3,
                  TitleFont: {
                     weight:  bold 
                  },
                  backgroundColor:  midnightblue ,
                  bodyColor:  orange ,
                  bodyApgn:  center ,
                  bodyFont: {
                     weight:  itapc 
                  },
                  callbacks: {
                     labelPointStyle: function(context) {
                        return {
                           pointStyle:  circle ,
                           rotation: 0
                        };
                     },
                  }
               }
            }
         },
      });
   </script>
</body>
</html>

Use the "Edit and Run" option to execute the code onpne and then hover the mouse over the bars and observe the stypng of the tooltips.

Output

The following output chart shows the various Tooltip configurations −

Chart.js - Tooltip

Syntax

Example

Output

友情链接