]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
projects / thirdparty / Chart.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: e519ea3)
Added possibility to draw tooltip borders
authorMarcelo Tedeschi <marceloftedeschi@gmail.com>
Sun, 5 Feb 2017 21:24:16 +0000 (22:24 +0100)
committerEvert Timberg <evert.timberg+github@gmail.com>
Sat, 25 Feb 2017 00:27:05 +0000 (19:27 -0500)
samples/tooltips/tooltip-border.html [new file with mode: 0644] patch | blob
src/core/core.tooltip.js patch | blob | blame | history

diff --git a/samples/tooltips/tooltip-border.html b/samples/tooltips/tooltip-border.html
new file mode 100644 (file)
index 0000000..b0752fc
--- /dev/null
+++ b/samples/tooltips/tooltip-border.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html>
+
+<head>
+       <title>Tooltip Interaction Modes</title>
+       <script src="../../dist/Chart.bundle.js"></script>
+       <script src="../utils.js"></script>
+       <style>
+       canvas {
+               -moz-user-select: none;
+               -webkit-user-select: none;
+               -ms-user-select: none;
+       }
+       .chart-container {
+               width: 70%;
+               margin-left: 40px;
+               margin-right: 40px;
+               margin-bottom: 40px;
+       }
+       .container {
+               display: flex;
+               flex-direction: row;
+               flex-wrap: wrap;
+               justify-content: center;
+       }
+       </style>
+</head>
+
+<body>
+       <div class="container">
+       </div>
+       <script>
+               function createConfig() {
+                       return {
+                               type: 'line',
+                               data: {
+                                       labels: ["January", "February", "March", "April", "May", "June", "July"],
+                                       datasets: [{
+                                               label: "Dataset",
+                                               borderColor: window.chartColors.red,
+                                               backgroundColor: window.chartColors.red,
+                                               data: [10, 30, 46, 2, 8, 50, 0],
+                                               fill: false,
+                                       }]
+                               },
+                               options: {
+                                       responsive: true,
+                                       title:{
+                                               display: true,
+                                               text: 'Sample tooltip with border'
+                                       },
+                                       tooltips: {
+                                               position: 'nearest',
+                                               mode: 'index',
+                                               intersect: false,
+                                               yPadding: 10,
+                                               xPadding: 10,
+                                               caretSize: 8,
+                                               backgroundColor: 'rgba(72, 241, 12, 1)',
+                                               titleFontColor: window.chartColors.black,
+                                               bodyFontColor: window.chartColors.black,
+                                               borderColor: 'rgba(0,0,0,1)',
+                                               borderWidth: 4
+                                       },
+                               }
+                       };
+               }
+
+               window.onload = function() {
+                       var container = document.querySelector('.container');
+                       var div = document.createElement('div');
+                       div.classList.add('chart-container');
+
+                       var canvas = document.createElement('canvas');
+                       div.appendChild(canvas);
+                       container.appendChild(div);
+
+                       var ctx = canvas.getContext('2d');
+                       var config = createConfig();
+                       new Chart(ctx, config);
+                       console.log(config);
+               };
+       </script>
+</body>
+
+</html>
diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
index c9c953b23a576fd50ea77fd4dca4277535472b52..57f6fd82948d6e267de4bbc3a1cd72c461b850f5 100755 (executable)
--- a/src/core/core.tooltip.js
+++ b/src/core/core.tooltip.js
@@ -38,6 +38,8 @@ module.exports = function(Chart) {
                cornerRadius: 6,
                multiKeyBackground: '#fff',
                displayColors: true,
+               borderColor: 'rgba(0,0,0,0)',
+               borderWidth: 0,
                callbacks: {
                        // Args are: (tooltipItems, data)
                        beforeTitle: helpers.noop,
@@ -176,7 +178,9 @@ module.exports = function(Chart) {
                        backgroundColor: tooltipOpts.backgroundColor,
                        opacity: 0,
                        legendColorBackground: tooltipOpts.multiKeyBackground,
-                       displayColors: tooltipOpts.displayColors
+                       displayColors: tooltipOpts.displayColors,
+                       borderColor: tooltipOpts.borderColor,
+                       borderWidth: tooltipOpts.borderWidth
                };
        }
 
@@ -608,11 +612,18 @@ module.exports = function(Chart) {
                        }
 
                        ctx.fillStyle = mergeOpacity(vm.backgroundColor, opacity);
+                       ctx.lineWidth = vm.borderWidth;
+                       ctx.strokeStyle = vm.borderColor;
+
                        ctx.beginPath();
                        ctx.moveTo(x1, y1);
                        ctx.lineTo(x2, y2);
                        ctx.lineTo(x3, y3);
+                       ctx.stroke();
+                       ctx.fill();
                        ctx.closePath();
+
+                       helpers.drawRoundedRectangle(ctx, ptX, ptY, size.width, size.height, vm.cornerRadius);
                        ctx.fill();
                },
                drawTitle: function(pt, vm, ctx, opacity) {
@@ -720,6 +731,9 @@ module.exports = function(Chart) {
                drawBackground: function(pt, vm, ctx, tooltipSize, opacity) {
                        ctx.fillStyle = mergeOpacity(vm.backgroundColor, opacity);
                        helpers.drawRoundedRectangle(ctx, pt.x, pt.y, tooltipSize.width, tooltipSize.height, vm.cornerRadius);
+                       ctx.strokeStyle = vm.borderColor;
+                       ctx.lineWidth = vm.borderWidth;
+                       ctx.stroke();
                        ctx.fill();
                },
                draw: function() {
Mirror of https://github.com/chartjs/Chart.js.git