Feature/active elements on top (#9920)

* add flag to draw active items on top

* add documentation and types

* remove redundent check

* added test

* resolve linting errors

* increase tollerance

* remove axes for better test, hope no tolerance needed

docs/charts/bubble.md

@@ -63,6 +63,7 @@ The bubble chart allows a number of properties to be specified for each dataset.
 | [`pointStyle`](#styling) | [`pointStyle`](../configuration/elements.md#types) | Yes | Yes | `'circle'`
 | [`rotation`](#styling) | `number` | Yes | Yes | `0`
 | [`radius`](#styling) | `number` | Yes | Yes | `3`
+| [`drawActiveElementsOnTop`](#styling) | `boolean` | Yes | Yes | `true`
 
 All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options)
 
@@ -86,6 +87,7 @@ The style of each bubble can be controlled with the following properties:
 | `pointStyle` | bubble [shape style](../configuration/elements.md#point-styles).
 | `rotation` | bubble rotation (in degrees).
 | `radius` | bubble radius (in pixels).
+| `drawActiveElementsOnTop` | Draw the active bubbles of a dataset over the other bubbles of the dataset
 
 All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
 

docs/charts/line.md

@@ -84,6 +84,7 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`tension`](#line-styling) | `number` | - | - | `0`
 | [`xAxisID`](#general) | `string` | - | - | first x axis
 | [`yAxisID`](#general) | `string` | - | - | first y axis
+| [`drawActiveElementsOnTop`](#point-styling) | `boolean` | Yes | Yes | `true`
 
 All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options)
 
@@ -112,6 +113,7 @@ The style of each point can be controlled with the following properties:
 | `pointRadius` | The radius of the point shape. If set to 0, the point is not rendered.
 | `pointRotation` | The rotation of the point in degrees.
 | `pointStyle` | Style of the point. [more...](../configuration/elements.md#point-styles)
+| `drawActiveElementsOnTop` | Draw the active points of a dataset over the other points of the dataset
 
 All these values, if `undefined`, fallback first to the dataset options then to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
 

src/core/core.datasetController.js

@@ -678,6 +678,7 @@ export default class DatasetController {
     const active = [];
     const start = this._drawStart || 0;
     const count = this._drawCount || (elements.length - start);
+    const drawActiveElementsOnTop = this.options.drawActiveElementsOnTop;
     let i;
 
     if (meta.dataset) {
@@ -689,7 +690,7 @@ export default class DatasetController {
       if (element.hidden) {
         continue;
       }
-      if (element.active) {
+      if (element.active && drawActiveElementsOnTop) {
         active.push(element);
       } else {
         element.draw(ctx, area);

src/core/core.defaults.js

@@ -73,6 +73,7 @@ export class Defaults {
     this.scale = undefined;
     this.scales = {};
     this.showLine = true;
+    this.drawActiveElementsOnTop = true;
 
     this.describe(_descriptors);
   }

test/fixtures/core.interaction/drawActiveElementsOnTop-false.js

@@ -0,0 +1,41 @@
+module.exports = {
+  config: {
+    type: 'bubble',
+    data: {
+      datasets: [{
+        data: [
+          {x: 1, y: 1, r: 80},
+          {x: 1, y: 1, r: 20}
+        ],
+        drawActiveElementsOnTop: false,
+        backgroundColor: (ctx) => (ctx.dataIndex === 1 ? 'red' : 'blue'),
+        hoverBackgroundColor: 'yellow',
+        hoverRadius: 0,
+      }]
+    },
+    options: {
+      scales: {
+        x: {
+          display: false
+        },
+        y: {
+          display: false
+        },
+      },
+      plugins: {
+        tooltip: false,
+        legend: false
+      },
+    }
+  },
+  options: {
+    canvas: {
+      width: 256,
+      height: 256
+    },
+    async run(chart) {
+      const point = chart.getDatasetMeta(0).data[0];
+      await jasmine.triggerMouseEvent(chart, 'click', {y: point.y, x: point.x + 25});
+    }
+  }
+};

types/index.esm.d.ts

@@ -1845,6 +1845,11 @@ export interface PointOptions extends CommonElementOptions {
    * @default 0
    */
   rotation: number;
+  /**
+   * Draw the active elements over the other elements of the dataset,
+   * @default true
+   */
+  drawActiveElementsOnTop: boolean;
 }
 
 export interface PointHoverOptions extends CommonHoverOptions {