pointStyleYOffset

Author: danielgindi

docs/configuration/legend.md

@@ -71,6 +71,7 @@ Namespace: `options.plugins.legend.labels`
 | `textAlign` | `string` | `'center'` | Horizontal alignment of the label text. Options are: `'left'`, `'right'` or `'center'`.
 | `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on pointStyleWidth or the minimum value between boxWidth and font.size).
 | `pointStyleWidth` | `number` | `null` | If `usePointStyle` is true, the width of the point style used for the legend.
+| `pointStyleYOffset` | `number` | `0` | If `usePointStyle` is true, the vertical offset in pixels applied to the point style drawn for the legend item. Useful for visually centering asymmetric point styles such as `line` or `dash`, or for problematic fonts.
 | `useBorderRadius` | `boolean` | `false` | Label borderRadius will match corresponding borderRadius.
 | `borderRadius` | `number` | `undefined` | Override the borderRadius to use.
 

docs/samples/legend/point-style.md

@@ -58,12 +58,15 @@ module.exports = {
 };
 ```
 
-## Docs 
+For asymmetric point styles such as `line` or `dash`, you can nudge the symbol vertically using the `pointStyleYOffset` option set to a small positive number (e.g., `4` pixels).
+
+## Docs
 * [Data structures (`labels`)](../../general/data-structures.md)
 * [Line](../../charts/line.md)
 * [Legend](../../configuration/legend.md)
-  * [Legend Label Configuration](../../configuration/legend.md#legend-label-configuration)
-    * `usePointStyle`
+   * [Legend Label Configuration](../../configuration/legend.md#legend-label-configuration)
+     * `usePointStyle`
+     * `pointStyleYOffset`
 * [Elements](../../configuration/elements.md)
-  * [Point Configuration](../../configuration/elements.md#point-configuration)
-  * [Point Styles](../../configuration/elements.md#point-styles)
+   * [Point Configuration](../../configuration/elements.md#point-configuration)
+   * [Point Styles](../../configuration/elements.md#point-styles)

src/plugins/plugin.legend.js

@@ -417,7 +417,7 @@ export class Legend extends Element {
 
       const realX = rtlHelper.x(x);
 
-      drawLegendBox(realX, y, legendItem);
+      drawLegendBox(realX, y + (labelOpts.pointStyleYOffset || 0), legendItem);
 
       x = _textX(textAlign, x + boxWidth + halfFontSize, isHorizontal ? x + width : this.right, opts.rtl);
 

src/types/index.d.ts

@@ -2496,6 +2496,10 @@ export interface LegendOptions<TType extends ChartType> {
      * If usePointStyle is true, the width of the point style used for the legend.
      */
     pointStyleWidth: number;
+    /**
+     * If you are using a font that causes incorrect alignment, adjust this value to ensure proper alignment.
+     */
+    datasetRadiusBuffer: number;
     /**
      * Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See Legend Item for details.
      */

test/fixtures/plugin.legend/pointStyle-y-offset/legend-pointStyle-y-offset.json

@@ -0,0 +1,53 @@
+{
+  "config": {
+    "type": "line",
+    "data": {
+      "labels": ["A"],
+      "datasets": [
+        {
+          "label": "Line",
+          "data": [10],
+          "backgroundColor": "#4bc0c0",
+          "borderColor": "#4bc0c0",
+          "borderWidth": 2,
+          "pointStyle": "line"
+        },
+        {
+          "label": "Dash",
+          "data": [20],
+          "backgroundColor": "#ff6384",
+          "borderColor": "#ff6384",
+          "borderWidth": 2,
+          "pointStyle": "dash"
+        }
+      ]
+    },
+    "options": {
+      "plugins": {
+        "legend": {
+          "display": true,
+          "labels": {
+            "usePointStyle": true,
+            "pointStyleWidth": 30,
+            "pointStyleYOffset": 4
+          }
+        }
+      },
+      "scales": {
+        "x": {
+          "display": false
+        },
+        "y": {
+          "display": false
+        }
+      }
+    }
+  },
+  "options": {
+    "canvas": {
+      "width": 512,
+      "height": 128
+    }
+  }
+}
+

test/fixtures/plugin.legend/pointStyle-y-offset/legend-pointStyle-y-offset.png

@@ -877,6 +877,55 @@ describe('Legend block tests', function() {
     }]);
   });
 
+  it('should apply pointStyleYOffset to the legend point symbol only', function() {
+    function drawWithOffset(offset) {
+      var chart = window.acquireChart({
+        type: 'line',
+        data: {
+          labels: ['A'],
+          datasets: [{
+            label: 'dataset1',
+            data: [1],
+            pointStyle: 'circle'
+          }]
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                usePointStyle: true,
+                pointStyleYOffset: offset
+              }
+            }
+          }
+        }
+      });
+
+      var mockContext = window.createMockContext();
+      chart.legend.ctx = mockContext;
+      chart.legend.draw();
+
+      var calls = mockContext.getCalls();
+      var arcCall = calls.filter(function(call) {
+        return call.name === 'arc';
+      })[0];
+      var fillTextCall = calls.filter(function(call) {
+        return call.name === 'fillText';
+      })[0];
+
+      return {
+        arcY: arcCall.args[1],
+        textY: fillTextCall.args[2]
+      };
+    }
+
+    var base = drawWithOffset(0);
+    var shifted = drawWithOffset(6);
+
+    expect(shifted.arcY - base.arcY).toBeCloseTo(6, 6);
+    expect(shifted.textY).toBeCloseTo(base.textY, 6);
+  });
+
   it('should not crash when the legend defaults are false', function() {
     const oldDefaults = Chart.defaults.plugins.legend;