first commit

2023-01-30 08:01:11 +01:00
commit dd253ca7e9
1663 changed files with 846601 additions and 0 deletions
--- a/chart/samples/tooltips/tooltip-callbacks.html
+++ b/chart/samples/tooltips/tooltip-callbacks.html
@ -0,0 +1,107 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Tooltip Hooks</title>
+    <script src="../../Chart.bundle.js"></script>
+    <script src="../utils.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
+</head>
+
+<body>
+    <div style="width:75%;">
+        <canvas id="canvas"></canvas>
+    </div>
+    <script>
+        var config = {
+            type: 'line',
+            data: {
+                labels: ["January", "February", "March", "April", "May", "June", "July"],
+                datasets: [{
+                    label: "My First dataset",
+                    borderColor: window.chartColors.red,
+                    backgroundColor: window.chartColors.red,
+                    data: [
+                        randomScalingFactor(), 
+                        randomScalingFactor(), 
+                        randomScalingFactor(), 
+                        randomScalingFactor(), 
+                        randomScalingFactor(), 
+                        randomScalingFactor(), 
+                        randomScalingFactor()
+                    ],
+                    fill: false,
+                }, {
+                    label: "My Second dataset",
+                    borderColor: window.chartColors.blue,
+                    backgroundColor: window.chartColors.blue,
+                    data: [
+                        randomScalingFactor(), 
+                        randomScalingFactor(), 
+                        randomScalingFactor(), 
+                        randomScalingFactor(), 
+                        randomScalingFactor(), 
+                        randomScalingFactor(), 
+                        randomScalingFactor()
+                    ],
+                    fill: false,
+                }]
+            },
+            options: {
+                responsive: true,
+                title:{
+                    display: true,
+                    text: "Chart.js Line Chart - Custom Information in Tooltip"
+                },
+                tooltips: {
+                    mode: 'index',
+                    callbacks: {
+                        // Use the footer callback to display the sum of the items showing in the tooltip
+                        footer: function(tooltipItems, data) {
+                            var sum = 0;
+
+                            tooltipItems.forEach(function(tooltipItem) {
+                                sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                            });
+                            return 'Sum: ' + sum;
+                        },
+                    },
+                    footerFontStyle: 'normal'
+                },
+                hover: {
+                    mode: 'index',
+                    intersect: true
+                },
+                scales: {
+                    xAxes: [{
+                        display: true,
+                        scaleLabel: {
+                            show: true,
+                            labelString: 'Month'
+                        }
+                    }],
+                    yAxes: [{
+                        display: true,
+                        scaleLabel: {
+                            show: true,
+                            labelString: 'Value'
+                        }
+                    }]
+                }
+            }
+        };
+
+        window.onload = function() {
+            var ctx = document.getElementById("canvas").getContext("2d");
+            window.myLine = new Chart(ctx, config);
+        };
+    </script>
+</body>
+
+</html>