Pointstyle false (#10886)

* fix-#10755

* none to false

* str to bool

* str to bool

* 10/10

* fix test

Co-authored-by: puneetkathar1 <puneetkathar1@gmail.com>
Co-authored-by: Puneet Kathar <73285338+puneetkathar1@users.noreply.github.com>

docs/configuration/elements.md

@@ -47,6 +47,7 @@ When a string is provided, the following values are supported:
 - `'rectRot'`
 - `'star'`
 - `'triangle'`
+- `false`
 
 If the value is an image or a canvas element, that image or canvas element is drawn on the canvas using [drawImage](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage).
 

docs/samples/line/point-styling.md

@@ -92,6 +92,15 @@ const actions = [
       });
       chart.update();
     }
+  },
+  {
+    name: 'pointStyle: false',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = false;
+      });
+      chart.update();
+    }
   }
 ];
 // </block:actions>

src/helpers/helpers.canvas.js

@@ -256,6 +256,9 @@ export function drawPointLegend(ctx, options, x, y, w) {
     ctx.moveTo(x, y);
     ctx.lineTo(x + Math.cos(rad) * (w ? w / 2 : radius), y + Math.sin(rad) * radius);
     break;
+  case false:
+    ctx.closePath();
+    break;
   }
 
   ctx.fill();

test/fixtures/controller.line/pointStyle/indexable.js

@@ -2,11 +2,11 @@ module.exports = {
   config: {
     type: 'line',
     data: {
-      labels: [0, 1, 2, 3, 4, 5],
+      labels: [0, 1, 2, 3, 4, 5, 6],
       datasets: [
         {
           // option in dataset
-          data: [0, 5, 10, null, -10, -5],
+          data: [0, 5, 10, null, -10, -5, 0],
           pointBackgroundColor: '#ff0000',
           pointBorderColor: '#ff0000',
           pointStyle: [
@@ -16,11 +16,12 @@ module.exports = {
             'dash',
             'line',
             'rect',
+            false
           ]
         },
         {
           // option in element (fallback)
-          data: [4, -5, -10, null, 10, 5],
+          data: [4, -5, -10, null, 10, 5, -4],
         }
       ]
     },

test/fixtures/controller.radar/pointStyle/indexable.js

@@ -2,11 +2,11 @@ module.exports = {
   config: {
     type: 'radar',
     data: {
-      labels: [0, 1, 2, 3, 4, 5],
+      labels: [0, 1, 2, 3, 4, 5, 6],
       datasets: [
         {
           // option in dataset
-          data: [0, 5, 10, null, -10, -5],
+          data: [0, 5, 10, null, -10, -5, 0],
           pointBackgroundColor: '#ff0000',
           pointBorderColor: '#ff0000',
           pointStyle: [
@@ -16,11 +16,12 @@ module.exports = {
             'dash',
             'line',
             'rect',
+            false
           ]
         },
         {
           // option in element (fallback)
-          data: [4, -5, -10, null, 10, 5],
+          data: [4, -5, -10, null, 10, 5, -4],
         }
       ]
     },

test/fixtures/element.point/rotation.js

@@ -1,10 +1,10 @@
 var gradient;
 
-var datasets = ['circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle'].map(function(style, y) {
+var datasets = ['circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle', false].map(function(style, y) {
   return {
     pointStyle: style,
     data: Array.apply(null, Array(17)).map(function(v, x) {
-      return {x: x, y: 10 - y};
+      return {x: x, y: 11 - y};
     })
   };
 });

test/fixtures/plugin.tooltip/point-style.js

@@ -1,4 +1,4 @@
-const pointStyles = ['circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle'];
+const pointStyles = ['circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle', false];
 
 function newDataset(pointStyle, i) {
   return {

types/index.d.ts

@@ -1823,6 +1823,7 @@ export type PointStyle =
   | 'rectRot'
   | 'star'
   | 'triangle'
+  | false
   | HTMLImageElement
   | HTMLCanvasElement;