Added area marker for legend

ts/Core/Legend/Legend.ts

@@ -353,7 +353,7 @@ class Legend {
         item: Legend.Item,
         visible?: boolean
     ): void {
-        const { group, label, line, symbol } = item.legendItem || {};
+        const { area, group, label, line, symbol } = item.legendItem || {};
 
         if (group) {
             group[visible ? 'removeClass' : 'addClass'](
@@ -362,12 +362,11 @@ class Legend {
         }
 
         if (!this.chart.styledMode) {
-            const { itemHiddenStyle } = this,
-                hiddenColor = (itemHiddenStyle as any).color,
-                symbolColor = visible ?
-                    (item.color || hiddenColor) :
-                    hiddenColor,
-                markerOptions = item.options && (item.options as any).marker;
+            const { itemHiddenStyle = {} } = this,
+                hiddenColor = itemHiddenStyle.color,
+                symbolColor = (visible && item.color) || hiddenColor,
+                itemOptions = (item as Series).options,
+                markerOptions = itemOptions.marker;
             let symbolAttr: SVGAttributes = { fill: symbolColor };
 
             label?.css(merge(visible ? this.itemStyle : itemHiddenStyle));
@@ -378,7 +377,7 @@ class Legend {
 
                 // Apply marker options
                 if (markerOptions && symbol.isMarker) { // #585
-                    symbolAttr = (item as any).pointAttribs();
+                    symbolAttr = (item as Series).pointAttribs();
                     if (!visible) {
                         // #6769
                         symbolAttr.stroke = symbolAttr.fill = hiddenColor;
@@ -387,6 +386,13 @@ class Legend {
 
                 symbol.attr(symbolAttr);
             }
+
+            area?.attr({
+                fill: visible ?
+                    (itemOptions.fillColor || item.color) :
+                    hiddenColor,
+                'fill-opacity': itemOptions.fillOpacity ?? 0.75
+            });
         }
 
         fireEvent(this, 'afterColorizeItem', { item, visible });

ts/Core/Legend/LegendItem.d.ts

@@ -28,6 +28,7 @@ import type { SymbolKey } from '../Renderer/SVG/SymbolType';
  * */
 
 export interface LegendItemObject {
+    area?: SVGElement;
     group?: SVGElement;
     label?: (ColorAxis.LegendItemObject|SVGElement);
     labelHeight?: number;

ts/Core/Legend/LegendSymbol.ts

@@ -21,6 +21,7 @@ import type LegendItem from './LegendItem';
 import type Point from '../Series/Point';
 import type Series from '../Series/Series';
 import type SVGAttributes from '../Renderer/SVG/SVGAttributes';
+import type SVGPath from '../Renderer/SVG/SVGPath';
 import type SymbolOptions from '../Renderer/SVG/SymbolOptions';
 
 import U from '../Utilities.js';
@@ -70,13 +71,25 @@ namespace LegendSymbol {
     *
     * */
 
-    /* eslint-disable valid-jsdoc */
-
     /**
-     * Get the series' symbol in the legend.
+     * Draw a line, a point marker and an area in the legend.
      *
-     * This method should be overridable to create custom symbols through
-     * Highcharts.seriesTypes[type].prototype.drawLegendSymbol.
+     * @private
+     * @function Highcharts.LegendSymbolMixin.areaMarker
+     *
+     * @param {Highcharts.Legend} legend
+     * The legend object.
+     */
+    export function areaMarker(
+        this: Series,
+        legend: Legend,
+        item?: LegendItem
+    ): void {
+        lineMarker.call(this, legend, item, true);
+    }
+
+    /**
+     * Draw a line and a point marker in the legend.
      *
      * @private
      * @function Highcharts.LegendSymbolMixin.lineMarker
@@ -87,30 +100,32 @@ namespace LegendSymbol {
     export function lineMarker(
         this: Series,
         legend: Legend,
-        item?: LegendItem
+        item?: LegendItem,
+        hasArea?: boolean
     ): void {
 
         const legendItem = this.legendItem = this.legendItem || {},
-            options = this.options,
-            symbolWidth = legend.symbolWidth,
-            symbolHeight = legend.symbolHeight,
+            { chart, options } = this,
+            { baseline = 0, symbolWidth, symbolHeight } = legend,
             symbol = this.symbol || 'circle',
             generalRadius = symbolHeight / 2,
-            renderer = this.chart.renderer,
+            renderer = chart.renderer,
             legendItemGroup = legendItem.group,
-            verticalCenter = (legend.baseline as any) -
-                Math.round((legend.fontMetrics as any).b * 0.3);
+            verticalCenter = baseline - Math.round(
+                (legend.fontMetrics?.b || 0) *
+                // Render line and marker slightly higher to make room for the
+                // area
+                (hasArea ? 0.4 : 0.3)
+            ),
+            attr: SVGAttributes = {};
 
-        let attr: SVGAttributes = {},
-            legendSymbol,
+        let legendSymbol,
             markerOptions = options.marker,
             lineSizer = 0;
 
         // Draw the line
-        if (!this.chart.styledMode) {
-            attr = {
-                'stroke-width': Math.min(options.lineWidth || 0, 24)
-            };
+        if (!chart.styledMode) {
+            attr['stroke-width'] = Math.min(options.lineWidth || 0, 24);
 
             if (options.dashStyle) {
                 attr.dashstyle = options.dashStyle;
@@ -125,6 +140,13 @@ namespace LegendSymbol {
             .attr(attr)
             .add(legendItemGroup);
 
+        if (hasArea) {
+            legendItem.area = renderer
+                .path()
+                .addClass('highcharts-area')
+                .add(legendItemGroup);
+        }
+
         if (attr['stroke-linecap']) {
             lineSizer = Math.min(
                 legendItem.line.strokeWidth(),
@@ -133,13 +155,20 @@ namespace LegendSymbol {
         }
 
         if (symbolWidth) {
-            legendItem.line
-                .attr({
-                    d: [
-                        ['M', lineSizer, verticalCenter],
-                        ['L', symbolWidth - lineSizer, verticalCenter]
-                    ]
-                });
+            const d: SVGPath = [
+                ['M', lineSizer, verticalCenter],
+                ['L', symbolWidth - lineSizer, verticalCenter]
+            ];
+
+            legendItem.line.attr({ d });
+
+            legendItem.area?.attr({
+                d: [
+                    ...d,
+                    ['L', symbolWidth - lineSizer, baseline],
+                    ['L', lineSizer, baseline]
+                ]
+            });
         }
 
         // Draw the marker

ts/Core/Series/SeriesDefaults.ts

@@ -2518,7 +2518,7 @@ const seriesDefaults: PlotOptionsOf<Series> = {
      * What type of legend symbol to render for this series. Can be one of
      * `lineMarker` or `rectangle`.
      *
-     * @validvalue ["lineMarker", "rectangle"]
+     * @validvalue ["areaMarker", "lineMarker", "rectangle"]
      *
      * @sample {highcharts} highcharts/series/legend-symbol/
      *         Change the legend symbol

ts/Series/Area/AreaSeries.ts

@@ -218,7 +218,7 @@ class AreaSeries extends LineSeries {
          */
         threshold: 0,
 
-        legendSymbol: 'rectangle'
+        legendSymbol: 'areaMarker'
 
     });