Enhance legend label color point when usePointStyle is true (#6006)

diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md
index 9655a67167a624bfaf7d1382ab193ca5370e0ec4..30e3283b40da9adbb66b543308d66a369e9337f4 100644 (file)
--- a/docs/configuration/legend.md
+++ b/docs/configuration/legend.md
@@ -36,7 +36,7 @@ The legend label configuration is nested below the legend configuration using th
 | `padding` | `number` | `10` | Padding between rows of colored boxes.
 | `generateLabels` | `function` | | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See [Legend Item](#legend-item-interface) for details.
 | `filter` | `function` | `null` | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#legend-item-interface) and the chart data.
-| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
+| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on the mimimum value between boxWidth and fontSize).
 
 ## Legend Item Interface
 

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index 7d13ea13ed44d0e5e0e1f32f1caaefc4ec99cba2..03bf8040baf881dd4d84187ef035e5f587d40f8d 100644 (file)
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -90,8 +90,8 @@ defaults._set('global', {
  * @return {Number} width of the color box area
  */
 function getBoxWidth(labelOpts, fontSize) {
-       return labelOpts.usePointStyle ?
-               fontSize * Math.SQRT2 :
+       return labelOpts.usePointStyle && labelOpts.boxWidth > fontSize ?
+               fontSize :
                labelOpts.boxWidth;
 }
 
@@ -369,10 +369,9 @@ var Legend = Element.extend({
                                if (opts.labels && opts.labels.usePointStyle) {
                                        // Recalculate x and y for drawPoint() because its expecting
                                        // x and y to be center of figure (instead of top left)
-                                       var radius = fontSize * Math.SQRT2 / 2;
-                                       var offSet = radius / Math.SQRT2;
-                                       var centerX = x + offSet;
-                                       var centerY = y + offSet;
+                                       var radius = boxWidth * Math.SQRT2 / 2;
+                                       var centerX = x + boxWidth / 2;
+                                       var centerY = y + fontSize / 2;
 
                                        // Draw pointStyle as legend symbol
                                        helpers.canvas.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY);