add custom chartjs tooltip

2020-03-27 15:49:35 -04:00 · 2020-03-27 15:49:35 -04:00 · 7aca2bcbc0
parent 3840d57f8d
commit 7aca2bcbc0
4 changed files with 95 additions and 1 deletions
--- a/src/app/charts/donut-chart/donut-chart.component.ts
+++ b/src/app/charts/donut-chart/donut-chart.component.ts
@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Chart } from 'chart.js'
-import { LabelOptions } from '@angular/material/core';
+import { tooltip } from '../tooltip'

@Component({
  selector: 'app-donut-chart',
@ -71,6 +71,11 @@ export class DonutChartComponent {
        responsive: false,
        legend: {
          display: false
+        },
+        tooltips: {
+          // Disable the on-canvas tooltip
+          enabled: false,
+          custom: tooltip(),
        }
      }
    });
--- a/src/app/charts/tooltip.ts
+++ b/src/app/charts/tooltip.ts
@ -0,0 +1,62 @@
+// Adapted from https://www.chartjs.org/samples/latest/tooltips/custom-pie.html
+export let tooltip: () => (tooltip: any) => void =
+    function (): (tooltip: any) => void {
+        return function (tooltip: any): void {
+            // Tooltip Element
+            const tooltipEl = document.getElementById('chartjs-tooltip');
+
+            // Hide if no tooltip
+            if (tooltip.opacity === 0) {
+                tooltipEl.style.opacity = '0';
+                return;
+            }
+
+            // Set caret Position
+            tooltipEl.classList.remove('above', 'below', 'no-transform');
+            if (tooltip.yAlign) {
+                tooltipEl.classList.add(tooltip.yAlign);
+            } else {
+                tooltipEl.classList.add('no-transform');
+            }
+
+            function getBody(bodyItem) {
+                return bodyItem.lines;
+            }
+
+            // Set Text
+            if (tooltip.body) {
+                let titleLines = tooltip.title || [];
+                const bodyLines = tooltip.body.map(getBody);
+
+                let innerHtml = '<thead>';
+
+                titleLines.forEach(function (title) {
+                    innerHtml += '<tr><th>' + title + '</th></tr>';
+                });
+                innerHtml += '</thead><tbody>';
+
+                bodyLines.forEach(function (body, i) {
+                    let colors = tooltip.labelColors[i];
+                    let style = 'background:' + colors.backgroundColor;
+                    style += '; border-color:' + colors.borderColor;
+                    style += '; border-width: 2px';
+                    let span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
+                    innerHtml += '<tr><td>' + span + body + '</td></tr>';
+                });
+                innerHtml += '</tbody>';
+
+                let tableRoot = tooltipEl.querySelector('table');
+                tableRoot.innerHTML = innerHtml;
+            }
+
+            var position = this._chart.canvas.getBoundingClientRect();
+
+            // Display, position, and set styles for font
+            tooltipEl.style.opacity = '1';
+            tooltipEl.style.position = 'absolute';
+            tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + 'px';
+            tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + 'px';
+            tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
+            tooltipEl.style.pointerEvents = 'none';
+        }
+    };
--- a/src/index.html
+++ b/src/index.html
@ -11,6 +11,9 @@
 </head>

 <body>
+  <div id="chartjs-tooltip">
+    <table></table>
+  </div>
  <app-root></app-root>
 </body>

--- a/src/styles.scss
+++ b/src/styles.scss
@ -1,3 +1,27 @@
+// Chart.js styles
+#chartjs-tooltip {
+    /* max z-index value */
+    z-index: 2147483647;
+    opacity: 0;
+    position: absolute;
+    background: rgba(0, 0, 0, .7);
+    color: white;
+    border-radius: 3px;
+    -webkit-transition: opacity .3s ease;
+    transition: opacity .3s ease;
+    pointer-events: none;
+    -webkit-transform: translate(-50%, 0);
+    transform: translate(-50%, 0);
+}
+
+.chartjs-tooltip-key {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 10px;
+}
+
+
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';