feature: choose custom point style for bar legend display (#8341)

* add feature to choose custom point style for bar legend display * add documentation and type * the docs are in the right place now
chartjs · Jan 30, 2021 · bc312d0 · bc312d0
1 parent 8cca4fe
commit bc312d0
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/docs/docs/charts/bar.mdx b/docs/docs/charts/bar.mdx
@@ -93,6 +93,7 @@ the color of the bars is generally set this way.
 | [`indexAxis`](#general) | `string` | - | - | `'x'`
 | [`label`](#general) | `string` | - | - | `''`
 | [`order`](#general) | `number` | - | - | `0`
+| [`pointStyle`](../configuration/elements.md#point-styles) | `string`\|`Image` | Yes | False | `'circle'`
 | [`xAxisID`](#general) | `string` | - | - | first x axis
 | [`yAxisID`](#general) | `string` | - | - | first y axis
 

diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
@@ -522,6 +522,7 @@ BarController.defaults = {
 		'categoryPercentage',
 		'maxBarThickness',
 		'minBarLength',
+		'pointStyle'
 	],
 	interaction: {
 		mode: 'index'

diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js
@@ -95,7 +95,7 @@ describe('Legend block tests', function() {
 			lineJoin: undefined,
 			lineWidth: 10,
 			strokeStyle: 'green',
-			pointStyle: undefined,
+			pointStyle: 'crossRot',
 			rotation: undefined,
 			datasetIndex: 2
 		}]);
@@ -311,7 +311,7 @@ describe('Legend block tests', function() {
 			lineJoin: undefined,
 			lineWidth: 10,
 			strokeStyle: 'green',
-			pointStyle: undefined,
+			pointStyle: 'crossRot',
 			rotation: undefined,
 			datasetIndex: 2
 		}]);
@@ -887,4 +887,3 @@ describe('Legend block tests', function() {
 		});
 	});
 });
-
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
@@ -125,6 +125,12 @@ export interface BarControllerDatasetOptions
 	 * Set this to ensure that bars have a minimum length in pixels.
 	 */
 	minBarLength: number;
+
+	/**
+	 * Point style for the legend
+	 * @default 'circle;
+	 */
+	pointStyle: PointStyle;
 }
 
 export interface BarControllerChartOptions {