Fix remaining issues in samples (#7625)

* Fix remaining issues in samples
* Update migration guide
* Use element instead
* Update tooltip.md

diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md
index 6978f8d4d4379500b1deec8d2253fd75e2e4c15d..d6287e659c3c602c0e3cd85866cdd38b8d2b839e 100644 (file)
--- a/docs/docs/configuration/tooltip.md
+++ b/docs/docs/configuration/tooltip.md
@@ -197,7 +197,10 @@ The tooltip items passed to the tooltip callbacks implement the following interf
     datasetIndex: number,
 
     // Index of this data item in the dataset
-    dataIndex: number
+    dataIndex: number,
+
+    // The chart element (point, arc, bar, etc.) for this tooltip item
+    element: Element,
 }
 ```
 
@@ -271,8 +274,7 @@ var myPieChart = new Chart(ctx, {
                     tableRoot.innerHTML = innerHtml;
                 }
 
-                // `this` will be the overall tooltip
-                var position = this._chart.canvas.getBoundingClientRect();
+                var position = context.chart.canvas.getBoundingClientRect();
 
                 // Display, position, and set styles for font
                 tooltipEl.style.opacity = 1;

diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index 838f336294f25bc11bf796a163152ccb381fec86..102808e6845cdc6ae3af73c4293e87821e53b0c5 100644 (file)
--- a/docs/docs/getting-started/v3-migration.md
+++ b/docs/docs/getting-started/v3-migration.md
@@ -342,7 +342,7 @@ The following properties and methods were removed:
 * Legend `onClick`, `onHover`, and `onLeave` options now receive the legend as the 3rd argument in addition to implicitly via `this`
 * Legend `onClick`, `onHover`, and `onLeave` options now receive a wrapped `event` as the first parameter. The previous first parameter value is accessible via `event.native`.
 * `Title.margins` is now private
-* The tooltip item's `x` and `y` attributes were removed. Use `datasetIndex` and `dataIndex` to get the element and any corresponding data from it
+* The tooltip item's `x` and `y` attributes were replaced by `element`. You can use `element.x` and `element.y` or `element.tooltipPosition()` instead.
 
 #### Removal of private APIs
 

diff --git a/samples/animations/loop.html b/samples/animations/loop.html
index 7ac5b0b1b92575d94ce5f0faf3a27ec96bb39d3a..a8fd87cb33465411c21f27876715b58f31ddeb62 100644 (file)
--- a/samples/animations/loop.html
+++ b/samples/animations/loop.html
@@ -62,17 +62,16 @@
                                }]
                        },
                        options: {
-                               animation: (context) => {
-                                       if (context.active) {
-                                               return {
-                                                       radius: {
-                                                               duration: 400,
-                                                               loop: true
-                                                       }
-                                               };
+                               animation: (context) => Object.assign({},
+                                       Chart.defaults.animation,
+                                       {
+                                               radius: {
+                                                       duration: 400,
+                                                       easing: 'linear',
+                                                       loop: context.active
+                                               }
                                        }
-                                       return Chart.defaults.animation;
-                               },
+                               ),
                                elements: {
                                        point: {
                                                hoverRadius: 6

diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html
index 70abf7e4f65b65b6edca23cf318014bd2fb4acd5..fe5fd00422e497608e2e4413346a8cefc2883e8c 100644 (file)
--- a/samples/tooltips/custom-line.html
+++ b/samples/tooltips/custom-line.html
@@ -160,6 +160,7 @@
                                        tooltips: {
                                                enabled: false,
                                                mode: 'index',
+                                               intersect: false,
                                                position: 'nearest',
                                                custom: customTooltips
                                        }

diff --git a/samples/tooltips/custom-points.html b/samples/tooltips/custom-points.html
index ae5019cf93972bfa4a4f8c824f7f0d2f8c377f3e..3ab4388115684f25a6a13a140e3a916a1463b062 100644 (file)
--- a/samples/tooltips/custom-points.html
+++ b/samples/tooltips/custom-points.html
@@ -59,14 +59,15 @@
 
                        if (tooltip.dataPoints.length > 0) {
                                tooltip.dataPoints.forEach(function(dataPoint) {
-                                       var content = [dataPoint.label, dataPoint.value].join(': ');
+                                       var content = [dataPoint.label, dataPoint.formattedValue].join(': ');
                                        var $tooltip = $('#tooltip-' + dataPoint.datasetIndex);
+                                       var pos = dataPoint.element.tooltipPosition();
 
                                        $tooltip.html(content);
                                        $tooltip.css({
                                                opacity: 1,
-                                               top: positionY + dataPoint.y + 'px',
-                                               left: positionX + dataPoint.x + 'px',
+                                               top: positionY + pos.y + 'px',
+                                               left: positionX + pos.x + 'px',
                                        });
                                });
                        }

diff --git a/src/core/core.animation.js b/src/core/core.animation.js
index 6ee5714785852b2ecb52e20336a8f9553363536e..09e7e03a6673e2534aec36b4e8ade6f1f7034602 100644 (file)
--- a/src/core/core.animation.js
+++ b/src/core/core.animation.js
@@ -50,6 +50,7 @@ export default class Animation {
                        const remain = me._duration - elapsed;
                        me._start = date;
                        me._duration = Math.floor(Math.max(remain, cfg.duration));
+                       me._loop = !!cfg.loop;
                        me._to = resolve([cfg.to, to, currentValue, cfg.from]);
                        me._from = resolve([cfg.from, currentValue, to]);
                }

diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index d1fe58d9969276d778c7b704418bb7d68b89c35e..f0e03f9b199790967cc1ecbff816d6bf1ef9a8e9 100644 (file)
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -112,13 +112,12 @@ function splitNewlines(str) {
 
 /**
  * Private helper to create a tooltip item model
- * @param item - the chart element (point, arc, bar) to create the tooltip item for
+ * @param item - {element, index, datasetIndex} to create the tooltip item for
  * @return new tooltip item
  */
 function createTooltipItem(chart, item) {
-       const {datasetIndex, index} = item;
+       const {element, datasetIndex, index} = item;
        const controller = chart.getDatasetMeta(datasetIndex).controller;
-       const dataset = controller.getDataset();
        const {label, value} = controller.getLabelAndValue(index);
 
        return {
@@ -126,9 +125,10 @@ function createTooltipItem(chart, item) {
                label,
                dataPoint: controller.getParsed(index),
                formattedValue: value,
-               dataset,
+               dataset: controller.getDataset(),
                dataIndex: index,
-               datasetIndex
+               datasetIndex,
+               element
        };
 }
 
@@ -403,7 +403,8 @@ export class Tooltip extends Element {
                }
 
                const chart = me._chart;
-               const opts = chart.options.animation && me.options.animation;
+               const options = me.options;
+               const opts = options.enabled && chart.options.animation && options.animation;
                const animations = new Animations(me._chart, opts);
                me._cachedAnimations = Object.freeze(animations);