Merge pull request #23371 from Silver-Connection/master

Add Tooltip positioners support for Chart.js

types/chart.js/chart.js-tests.ts

@@ -1,4 +1,4 @@
-import { Chart, ChartData } from 'chart.js';
+import { Chart, ChartData, Point } from 'chart.js';
 
 // alternative:
 // import chartjs = require('chart.js');
@@ -65,3 +65,11 @@ if (chart.chartArea) {
     console.log(chart.chartArea.bottom);
     console.log(chart.chartArea.left);
 }
+
+// http://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes
+Chart.Tooltip.positioners.custom = (elements: any[], eventPosition: Point) => {
+    return {
+        x: eventPosition.x,
+        y: eventPosition.y + 10
+    };
+};

types/chart.js/index.d.ts

@@ -44,6 +44,9 @@ declare class Chart {
     static controllers: {
         [key: string]: any;
     };
+
+    // Tooltip Static Options
+    static Tooltip: Chart.ChartTooltipsStaticConfiguration;
 }
 declare class PluginServiceStatic {
     register(plugin: PluginServiceRegistrationOptions): void;
@@ -268,13 +271,19 @@ declare namespace Chart {
         callbacks?: ChartTooltipCallback;
         filter?(item: ChartTooltipItem): boolean;
         itemSort?(itemA: ChartTooltipItem, itemB: ChartTooltipItem): number;
-        position?: "average"|"nearest";
+        position?: string;
         caretPadding?: number;
         displayColors?: boolean;
         borderColor?: ChartColor;
         borderWidth?: number;
     }
 
+    interface ChartTooltipsStaticConfiguration {
+        positioners: {[mode: string]: ChartTooltipPositioner};
+    }
+
+    type ChartTooltipPositioner = (elements: any[], eventPosition: Point) => Point;
+
     interface ChartHoverOptions {
         mode?: string;
         animationDuration?: number;
@@ -561,6 +570,11 @@ declare namespace Chart {
         pointLabels?: PointLabelOptions;
         ticks?: TickOptions;
     }
+
+    interface Point {
+        x: number;
+        y: number;
+    }
 }
 
 export = Chart;