@progress/kendo-charts 2.6.0-dev.202410171326 → 2.6.0-dev.202410171740

package/dist/es/chart/area-chart/area-segment.js

@@ -2,6 +2,7 @@ import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
 import LineSegment from '../line-chart/line-segment';
 
 import { append, deepExtend, isFunction, last } from '../../common';
+import { createPatternFill } from '../../core/pattern';
 
 var AreaSegment = (function (LineSegment) {
     function AreaSegment(linePoints, currentSeries, seriesIx, prevSegment, stackPoints) {
@@ -30,10 +31,10 @@ var AreaSegment = (function (LineSegment) {
         });
 
         this.createFill({
-            fill: {
+            fill: createPatternFill(series.pattern, {
                 color: color,
                 opacity: series.opacity
-            },
+            }),
             stroke: null
         });
 

package/dist/es/chart/bar-chart/bar.js

@@ -6,7 +6,7 @@ import { CHART_POINT_ROLE_DESCRIPTION, CHART_POINT_CLASSNAME, CHART_POINT_ROLE,
 
 import hasGradientOverlay from '../utils/has-gradient-overlay';
 
-import { ChartElement, Point } from '../../core';
+import { ChartElement, createPatternFill, Point } from '../../core';
 
 import PointEventsMixin from '../mixins/point-events-mixin';
 import NoteMixin from '../mixins/note-mixin';
@@ -155,10 +155,10 @@ var Bar = (function (ChartElement) {
         rect.size.width = Math.round(rect.size.width);
 
         var path = this.rectVisual = draw.Path.fromRect(rect, {
-            fill: {
+            fill: createPatternFill(options.pattern, {
                 color: this.color,
                 opacity: options.opacity
-            },
+            }),
             stroke: {
                 color: this.getBorderColor(),
                 width: border.width,

package/dist/es/chart/bubble-chart/bubble.js

@@ -5,6 +5,7 @@ import { BORDER_BRIGHTNESS } from '../constants';
 
 import { CENTER } from '../../common/constants';
 import { deepExtend } from '../../common';
+import { createPatternFill } from '../../core/pattern';
 
 var Bubble = (function (LinePoint) {
     function Bubble(value, options) {
@@ -49,10 +50,10 @@ var Bubble = (function (LinePoint) {
                 width: border.width,
                 opacity: border.opacity
             },
-            fill: {
+            fill: createPatternFill(this.options.pattern, {
                 color: markers.background,
                 opacity: highlight.opacity
-            }
+            })
         });
 
         highlightGroup.append(shadow, overlay);

package/dist/es/chart/bullet-chart/bullet.js

@@ -14,6 +14,7 @@ import { alignPathToPixel, deepExtend, defined, getTemplate, setDefaultOptions,
 import BarLabel from '../bar-chart/bar-label';
 import { CHART_POINT_ROLE_DESCRIPTION, CHART_POINT_CLASSNAME, CHART_POINT_ROLE } from '../constants';
 import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
+import { createPatternFill } from '../../core/pattern';
 
 var Bullet = (function (ChartElement) {
     function Bullet(value, options) {
@@ -127,10 +128,10 @@ var Bullet = (function (ChartElement) {
 
         var options = this.options;
         var body = draw.Path.fromRect(this.box.toRect(), {
-            fill: {
+            fill: createPatternFill(options.pattern, {
                 color: this.color,
                 opacity: options.opacity
-            },
+            }),
             stroke: null
         });
 

package/dist/es/chart/candlestick-chart/candlestick.js

@@ -11,6 +11,7 @@ import hasGradientOverlay from '../utils/has-gradient-overlay';
 
 import { WHITE, LEFT, TOP } from '../../common/constants';
 import { alignPathToPixel, deepExtend, defined, setDefaultOptions, valueOrDefault } from '../../common';
+import { createPatternFill } from '../../core/pattern';
 
 var Candlestick = (function (ChartElement) {
     function Candlestick(value, options) {
@@ -88,10 +89,10 @@ var Candlestick = (function (ChartElement) {
 
     Candlestick.prototype.createBody = function createBody (container, options) {
         var body = draw.Path.fromRect(this.realBody.toRect(), {
-            fill: {
+            fill: createPatternFill(options.pattern, {
                 color: this.color,
                 opacity: options.opacity
-            },
+            }),
             stroke: null
         });
 

package/dist/es/chart/constants.js

@@ -122,6 +122,7 @@ var MOUSEWHEEL_ZOOM_RATE = 0.3;
 
 var DRILLDOWN = "drilldown";
 var DRILLDOWN_FIELD = "drilldown";
+var PATTERN_FIELD = "pattern";
 
 var MIN_MOVING_AVERAGE_PERIOD = 2;
 
@@ -158,6 +159,7 @@ export {
     TRENDLINE_MOVING_AVERAGE,
     TRENDLINE_POLYNOMIAL,
     TRENDLINE_POWER,
+    PATTERN_FIELD,
     CHART_POINT_ROLE, CHART_POINT_CLASSNAME, CHART_POINT_ROLE_DESCRIPTION,
     LEGEND_ITEM_ROLE, LEGEND_ITEM_CLASSNAME,
     LEGEND_ITEM_ARIA_ROLE_DESCRIPTION

package/dist/es/chart/donut-chart/donut-chart.js

@@ -18,6 +18,8 @@ var DonutChart = (function (PieChart) {
 
     DonutChart.prototype.addValue = function addValue (value, sector, fields) {
         var segmentOptions = deepExtend({}, fields.series, { index: fields.index });
+        segmentOptions.pattern = fields.pattern || segmentOptions.pattern;
+
         this.evalSegmentOptions(segmentOptions, value, fields);
 
         this.createLegendItem(value, segmentOptions, fields);

package/dist/es/chart/funnel-chart/funnel-chart.js

@@ -95,6 +95,8 @@ var FunnelChart = (function (ChartElement) {
 
     FunnelChart.prototype.createSegment = function createSegment (value, fields) {
         var seriesOptions = deepExtend({}, fields.series);
+        seriesOptions.pattern = fields.pattern || seriesOptions.pattern;
+
         this.evalSegmentOptions(seriesOptions, value, fields);
 
         this.createLegendItem(value, seriesOptions, fields);

package/dist/es/chart/funnel-chart/funnel-segment.js

@@ -7,6 +7,7 @@ import { WHITE } from '../../common/constants';
 import { deepExtend, setDefaultOptions, getTemplate } from '../../common';
 import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 import { CHART_POINT_CLASSNAME, CHART_POINT_ROLE, CHART_POINT_ROLE_DESCRIPTION } from '../constants';
+import { createPatternFill } from '../../core/pattern';
 
 var FunnelSegment = (function (ChartElement) {
     function FunnelSegment(value, options, segmentOptions) {
@@ -80,10 +81,10 @@ var FunnelSegment = (function (ChartElement) {
         var options = this.options;
         var border = options.border;
         var path = draw.Path.fromPoints(this.points, {
-            fill: {
+            fill: createPatternFill(options.pattern, {
                 color: options.color,
                 opacity: options.opacity
-            },
+            }),
             stroke: {
                 color: border.color,
                 opacity: border.opacity,

package/dist/es/chart/heatmap-chart/heatmap-chart.js

@@ -125,6 +125,7 @@ var HeatmapChart = (function (ChartElement) {
         var pointOptions = this.pointOptions(series, fields.seriesIx);
         var color = fields.color || series.color;
 
+        pointOptions.pattern = fields.pattern || pointOptions.pattern;
         pointOptions = this.evalPointOptions(pointOptions, value, fields);
 
         if (isFunction(series.color)) {

package/dist/es/chart/heatmap-chart/heatmap-point.js

@@ -152,6 +152,7 @@ var HeatmapPoint = (function (ChartElement) {
             rotation: markerOptions.rotation,
             background: this.color,
             border: this.markerBorder(),
+            pattern: options.pattern,
             borderRadius: markerOptions.borderRadius,
             opacity: this.series.opacity || options.opacity,
             zIndex: valueOrDefault(options.zIndex, this.series.zIndex),

package/dist/es/chart/legend/legend-item.js

@@ -114,14 +114,34 @@ var LegendItem = (function (BoxElement) {
         return this._markerLineArea;
     };
 
+    LegendItem.prototype._reduceSize = function _reduceSize (object, prop, factor) {
+        if ( factor === void 0 ) factor = 0.6;
+
+        if (typeof object[prop] === 'number') {
+            object[prop] = object[prop] * factor;
+        }
+    };
+
     LegendItem.prototype._createSquare = function _createSquare () {
         var options = this.options;
         if (options.type === AREA) {
+            var pattern = options.pattern || (options.series || {}).pattern;
+            if (pattern) {
+                if (typeof pattern === 'function') {
+                    pattern = pattern(options.series);
+                }
+                pattern = structuredClone(pattern);
+                this._reduceSize(pattern, 'gap');
+                this._reduceSize(pattern, 'width');
+                this._reduceSize(pattern, 'radius');
+            }
+
             this._square = new LegendItemSquare(Object.assign({}, {border: options.border,
                 vAlign: options.markers.visible ? BOTTOM : CENTER,
                 highlight: this._highlightOptions()},
                 options.area,
-                {background: options.area.background || options.markerColor}));
+                {pattern: pattern,
+                background: options.area.background || options.markerColor}));
             this.markerWrap.append(this._square);
         }
         return this._square;

package/dist/es/chart/line-chart/line-point.js

@@ -120,6 +120,7 @@ var LinePoint = (function (ChartElement) {
             background: options.background,
             border: this.markerBorder(),
             opacity: options.opacity,
+            pattern: this.options.pattern,
             zIndex: valueOrDefault(options.zIndex, this.series.zIndex),
             animation: options.animation,
             visual: options.visual,

package/dist/es/chart/mixins/pie-chart-mixin.js

@@ -43,6 +43,7 @@ var PieChartMixin = {
                     text: text,
                     series: options.series,
                     markerColor: markerColor,
+                    pattern: point.pattern,
                     labels: itemLabelOptions
                 });
             }

package/dist/es/chart/pie-chart/pie-chart.js

@@ -86,6 +86,7 @@ var PieChart = (function (ChartElement) {
                 callback(value, new Ring(null, 0, 0, currentAngle, angle), {
                     owner: this$1,
                     category: defined(fields.category) ? fields.category : "",
+                    pattern: defined(fields.pattern) ? fields.pattern : currentSeries.pattern,
                     index: i,
                     series: currentSeries,
                     seriesIx: seriesIx,
@@ -122,6 +123,7 @@ var PieChart = (function (ChartElement) {
 
     PieChart.prototype.addValue = function addValue (value, sector, fields) {
         var segmentOptions = deepExtend({}, fields.series, { index: fields.index });
+        segmentOptions.pattern = fields.pattern || segmentOptions.pattern;
         this.evalSegmentOptions(segmentOptions, value, fields);
 
         this.createLegendItem(value, segmentOptions, fields);

package/dist/es/chart/pie-chart/pie-segment.js

@@ -1,6 +1,6 @@
 import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
 
-import { ChartElement, ShapeBuilder, TextBox, Box } from '../../core';
+import { ChartElement, ShapeBuilder, TextBox, Box, createPatternFill } from '../../core';
 
 import PointEventsMixin from '../mixins/point-events-mixin';
 
@@ -175,10 +175,10 @@ var PieSegment = (function (ChartElement) {
             }
         } : {};
         var color = options.color;
-        var fill = {
+        var fill = createPatternFill(options.pattern, {
             color: color,
             opacity: options.opacity
-        };
+        });
         var visual = this.createSegment(sector, deepExtend({
             fill: fill,
             stroke: {

package/dist/es/chart/register-charts.js

@@ -15,7 +15,7 @@ import { COLUMN, DONUT, PIE, FUNNEL, PYRAMID, BAR, LINE, VERTICAL_LINE, AREA, VE
     RANGE_BAR, WATERFALL, HORIZONTAL_WATERFALL, SCATTER, SCATTER_LINE, BUBBLE,
     POLAR_AREA, POLAR_LINE, POLAR_SCATTER, RADAR_AREA, RADAR_COLUMN, RADAR_LINE, CATEGORY,
     RANGE_AREA, VERTICAL_RANGE_AREA, X_ERROR_LOW_FIELD, X_ERROR_HIGH_FIELD, Y_ERROR_LOW_FIELD, Y_ERROR_HIGH_FIELD,
-    ERROR_LOW_FIELD, ERROR_HIGH_FIELD, HEATMAP, DRILLDOWN_FIELD, TRENDLINE_SERIES } from './constants';
+    ERROR_LOW_FIELD, ERROR_HIGH_FIELD, HEATMAP, DRILLDOWN_FIELD, TRENDLINE_SERIES, PATTERN_FIELD } from './constants';
 import { X, Y, VALUE } from '../common/constants';
 
 var COLOR = "color";
@@ -53,25 +53,25 @@ PlotAreaFactory.current.register(HeatmapPlotArea, [ HEATMAP ]);
 
 SeriesBinder.current.register(
     [ BAR, COLUMN, LINE, VERTICAL_LINE, AREA, VERTICAL_AREA ],
-    [ VALUE ], [ CATEGORY, COLOR, NOTE_TEXT, ERROR_LOW_FIELD, ERROR_HIGH_FIELD, DRILLDOWN_FIELD ]
+    [ VALUE ], [ CATEGORY, COLOR, NOTE_TEXT, ERROR_LOW_FIELD, ERROR_HIGH_FIELD, DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
 SeriesBinder.current.register(
     [ RANGE_COLUMN, RANGE_BAR, RANGE_AREA, VERTICAL_RANGE_AREA ],
-    [ FROM, TO ], [ CATEGORY, COLOR, NOTE_TEXT, DRILLDOWN_FIELD ]
+    [ FROM, TO ], [ CATEGORY, COLOR, NOTE_TEXT, DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
 SeriesBinder.current.register(
     [ WATERFALL, HORIZONTAL_WATERFALL ],
-    [ VALUE ], [ CATEGORY, COLOR, NOTE_TEXT, SUMMARY_FIELD, DRILLDOWN_FIELD ]
+    [ VALUE ], [ CATEGORY, COLOR, NOTE_TEXT, SUMMARY_FIELD, DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
-SeriesBinder.current.register([ POLAR_AREA, POLAR_LINE, POLAR_SCATTER ], [ X, Y ], [ COLOR, DRILLDOWN_FIELD ]);
-SeriesBinder.current.register([ RADAR_AREA, RADAR_COLUMN, RADAR_LINE ], [ VALUE ], [ CATEGORY, COLOR, DRILLDOWN_FIELD ]);
+SeriesBinder.current.register([ POLAR_AREA, POLAR_LINE, POLAR_SCATTER ], [ X, Y ], [ COLOR, DRILLDOWN_FIELD, PATTERN_FIELD ]);
+SeriesBinder.current.register([ RADAR_AREA, RADAR_COLUMN, RADAR_LINE ], [ VALUE ], [ CATEGORY, COLOR, DRILLDOWN_FIELD, PATTERN_FIELD ]);
 
 SeriesBinder.current.register(
     [ FUNNEL, PYRAMID ],
-    [ VALUE ], [ CATEGORY, COLOR, "visibleInLegend", "visible", DRILLDOWN_FIELD ]
+    [ VALUE ], [ CATEGORY, COLOR, "visibleInLegend", "visible", DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
 DefaultAggregates.current.register(
@@ -95,17 +95,17 @@ SeriesBinder.current.register(
 );
 
 SeriesBinder.current.register(
-    [ BUBBLE ], [ X, Y, "size" ], [ COLOR, CATEGORY, NOTE_TEXT ]
+    [ BUBBLE ], [ X, Y, "size" ], [ COLOR, CATEGORY, NOTE_TEXT, PATTERN_FIELD ]
 );
 
 SeriesBinder.current.register(
     [ HEATMAP ],
-    [ X, Y, VALUE ], [ COLOR, NOTE_TEXT ]
+    [ X, Y, VALUE ], [ COLOR, NOTE_TEXT, PATTERN_FIELD ]
 );
 
 SeriesBinder.current.register(
     [ CANDLESTICK, OHLC ],
-    [ "open", "high", "low", "close" ], [ CATEGORY, COLOR, "downColor", NOTE_TEXT ]
+    [ "open", "high", "low", "close" ], [ CATEGORY, COLOR, "downColor", NOTE_TEXT, PATTERN_FIELD ]
 );
 
 DefaultAggregates.current.register(
@@ -116,7 +116,7 @@ DefaultAggregates.current.register(
 
 SeriesBinder.current.register(
     [ BOX_PLOT, VERTICAL_BOX_PLOT ],
-    [ "lower", "q1", "median", "q3", "upper", "mean", "outliers" ], [ CATEGORY, COLOR, NOTE_TEXT, DRILLDOWN_FIELD ]
+    [ "lower", "q1", "median", "q3", "upper", "mean", "outliers" ], [ CATEGORY, COLOR, NOTE_TEXT, DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
 DefaultAggregates.current.register(
@@ -127,7 +127,7 @@ DefaultAggregates.current.register(
 
 SeriesBinder.current.register(
     [ BULLET, VERTICAL_BULLET ],
-    [ "current", "target" ], [ CATEGORY, COLOR, "visibleInLegend", NOTE_TEXT, DRILLDOWN_FIELD ]
+    [ "current", "target" ], [ CATEGORY, COLOR, "visibleInLegend", NOTE_TEXT, DRILLDOWN_FIELD, PATTERN_FIELD ]
 );
 
 DefaultAggregates.current.register(
@@ -137,5 +137,5 @@ DefaultAggregates.current.register(
 
 SeriesBinder.current.register(
     [ PIE, DONUT ],
-    [ VALUE ], [ CATEGORY, COLOR, "explode", "visibleInLegend", "visible", DRILLDOWN_FIELD ]
+    [ VALUE ], [ CATEGORY, COLOR, "explode", "visibleInLegend", "visible", DRILLDOWN_FIELD, PATTERN_FIELD ]
 );

package/dist/es/core/box-element.js

@@ -5,6 +5,7 @@ import Box from './box';
 
 import { BLACK, LEFT, TOP, X, Y } from '../common/constants';
 import { getSpacing, setDefaultOptions, valueOrDefault } from '../common';
+import { createPatternFill } from './pattern';
 
 var BoxElement = (function (ChartElement) {
     function BoxElement(options) {
@@ -108,10 +109,10 @@ var BoxElement = (function (ChartElement) {
                 opacity: valueOrDefault(border.opacity, options.opacity),
                 dashType: border.dashType
             },
-            fill: {
+            fill: createPatternFill(options.pattern, {
                 color: options.background,
                 opacity: options.opacity
-            },
+            }, undefined),
             cursor: options.cursor
         };
     };

package/dist/es/core/pattern.js

@@ -0,0 +1,27 @@
+import { drawing } from '@progress/kendo-drawing';
+import { isFunction } from './../common';
+
+var dotsPattern = drawing.dotsPattern;
+var verticalStripesPattern = drawing.verticalStripesPattern;
+var crosshatchPattern = drawing.crosshatchPattern;
+var diagonalStripesPattern = drawing.diagonalStripesPattern;
+var gridPattern = drawing.gridPattern;
+
+var patternMap = {
+    dots: dotsPattern,
+    verticalStripes: verticalStripesPattern,
+    crosshatch: crosshatchPattern,
+    diagonalStripes: diagonalStripesPattern,
+    grid: gridPattern
+};
+
+export function evaluatePattern(options, point) {
+    return isFunction(options) ? options(point) : options;
+}
+
+export function createPatternFill(options, fill, point) {
+    var patternOptions = evaluatePattern(options, point);
+    var pattern = patternOptions && patternMap[patternOptions.type];
+
+    return pattern ? pattern(Object.assign({}, fill, patternOptions)) : fill;
+}

package/dist/es/core.js

@@ -27,3 +27,4 @@ export { default as RadarLogarithmicAxis } from './core/radar-logarithmic-axis';
 export { default as CurveProcessor } from './core/curve-processor';
 export { default as Gradients } from './core/gradients';
 export { default as rectToBox } from './core/utils/rect-to-box';
+export { createPatternFill } from './core/pattern';

package/dist/es2015/chart/area-chart/area-segment.js

@@ -2,6 +2,7 @@ import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
 import LineSegment from '../line-chart/line-segment';
 
 import { append, deepExtend, isFunction, last } from '../../common';
+import { createPatternFill } from '../../core/pattern';
 
 class AreaSegment extends LineSegment {
     constructor(linePoints, currentSeries, seriesIx, prevSegment, stackPoints) {
@@ -26,10 +27,10 @@ class AreaSegment extends LineSegment {
         });
 
         this.createFill({
-            fill: {
+            fill: createPatternFill(series.pattern, {
                 color: color,
                 opacity: series.opacity
-            },
+            }),
             stroke: null
         });
 

package/dist/es2015/chart/bar-chart/bar.js

@@ -6,7 +6,7 @@ import { CHART_POINT_ROLE_DESCRIPTION, CHART_POINT_CLASSNAME, CHART_POINT_ROLE,
 
 import hasGradientOverlay from '../utils/has-gradient-overlay';
 
-import { ChartElement, Point } from '../../core';
+import { ChartElement, createPatternFill, Point } from '../../core';
 
 import PointEventsMixin from '../mixins/point-events-mixin';
 import NoteMixin from '../mixins/note-mixin';
@@ -145,10 +145,10 @@ class Bar extends ChartElement {
         rect.size.width = Math.round(rect.size.width);
 
         const path = this.rectVisual = draw.Path.fromRect(rect, {
-            fill: {
+            fill: createPatternFill(options.pattern, {
                 color: this.color,
                 opacity: options.opacity
-            },
+            }),
             stroke: {
                 color: this.getBorderColor(),
                 width: border.width,

package/dist/es2015/chart/bubble-chart/bubble.js

@@ -5,6 +5,7 @@ import { BORDER_BRIGHTNESS } from '../constants';
 
 import { CENTER } from '../../common/constants';
 import { deepExtend } from '../../common';
+import { createPatternFill } from '../../core/pattern';
 
 class Bubble extends LinePoint {
     constructor(value, options) {
@@ -45,10 +46,10 @@ class Bubble extends LinePoint {
                 width: border.width,
                 opacity: border.opacity
             },
-            fill: {
+            fill: createPatternFill(this.options.pattern, {
                 color: markers.background,
                 opacity: highlight.opacity
-            }
+            })
         });
 
         highlightGroup.append(shadow, overlay);

package/dist/es2015/chart/bullet-chart/bullet.js

@@ -14,6 +14,7 @@ import { alignPathToPixel, deepExtend, defined, getTemplate, setDefaultOptions,
 import BarLabel from '../bar-chart/bar-label';
 import { CHART_POINT_ROLE_DESCRIPTION, CHART_POINT_CLASSNAME, CHART_POINT_ROLE } from '../constants';
 import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
+import { createPatternFill } from '../../core/pattern';
 
 class Bullet extends ChartElement {
     constructor(value, options) {
@@ -120,10 +121,10 @@ class Bullet extends ChartElement {
 
         const options = this.options;
         const body = draw.Path.fromRect(this.box.toRect(), {
-            fill: {
+            fill: createPatternFill(options.pattern, {
                 color: this.color,
                 opacity: options.opacity
-            },
+            }),
             stroke: null
         });
 

package/dist/es2015/chart/candlestick-chart/candlestick.js

@@ -11,6 +11,7 @@ import hasGradientOverlay from '../utils/has-gradient-overlay';
 
 import { WHITE, LEFT, TOP } from '../../common/constants';
 import { alignPathToPixel, deepExtend, defined, setDefaultOptions, valueOrDefault } from '../../common';
+import { createPatternFill } from '../../core/pattern';
 
 class Candlestick extends ChartElement {
     constructor(value, options) {
@@ -81,10 +82,10 @@ class Candlestick extends ChartElement {
 
     createBody(container, options) {
         const body = draw.Path.fromRect(this.realBody.toRect(), {
-            fill: {
+            fill: createPatternFill(options.pattern, {
                 color: this.color,
                 opacity: options.opacity
-            },
+            }),
             stroke: null
         });
 

package/dist/es2015/chart/constants.js

@@ -122,6 +122,7 @@ const MOUSEWHEEL_ZOOM_RATE = 0.3;
 
 const DRILLDOWN = "drilldown";
 const DRILLDOWN_FIELD = "drilldown";
+const PATTERN_FIELD = "pattern";
 
 const MIN_MOVING_AVERAGE_PERIOD = 2;
 
@@ -158,6 +159,7 @@ export {
     TRENDLINE_MOVING_AVERAGE,
     TRENDLINE_POLYNOMIAL,
     TRENDLINE_POWER,
+    PATTERN_FIELD,
     CHART_POINT_ROLE, CHART_POINT_CLASSNAME, CHART_POINT_ROLE_DESCRIPTION,
     LEGEND_ITEM_ROLE, LEGEND_ITEM_CLASSNAME,
     LEGEND_ITEM_ARIA_ROLE_DESCRIPTION

package/dist/es2015/chart/donut-chart/donut-chart.js

@@ -10,6 +10,8 @@ const DONUT_SECTOR_ANIM_DELAY = 50;
 class DonutChart extends PieChart {
     addValue(value, sector, fields) {
         const segmentOptions = deepExtend({}, fields.series, { index: fields.index });
+        segmentOptions.pattern = fields.pattern || segmentOptions.pattern;
+
         this.evalSegmentOptions(segmentOptions, value, fields);
 
         this.createLegendItem(value, segmentOptions, fields);

package/dist/es2015/chart/funnel-chart/funnel-chart.js

@@ -85,6 +85,8 @@ class FunnelChart extends ChartElement {
 
     createSegment(value, fields) {
         const seriesOptions = deepExtend({}, fields.series);
+        seriesOptions.pattern = fields.pattern || seriesOptions.pattern;
+
         this.evalSegmentOptions(seriesOptions, value, fields);
 
         this.createLegendItem(value, seriesOptions, fields);

package/dist/es2015/chart/funnel-chart/funnel-segment.js

@@ -7,6 +7,7 @@ import { WHITE } from '../../common/constants';
 import { deepExtend, setDefaultOptions, getTemplate } from '../../common';
 import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 import { CHART_POINT_CLASSNAME, CHART_POINT_ROLE, CHART_POINT_ROLE_DESCRIPTION } from '../constants';
+import { createPatternFill } from '../../core/pattern';
 
 class FunnelSegment extends ChartElement {
     constructor(value, options, segmentOptions) {
@@ -74,10 +75,10 @@ class FunnelSegment extends ChartElement {
         const options = this.options;
         const border = options.border;
         const path = draw.Path.fromPoints(this.points, {
-            fill: {
+            fill: createPatternFill(options.pattern, {
                 color: options.color,
                 opacity: options.opacity
-            },
+            }),
             stroke: {
                 color: border.color,
                 opacity: border.opacity,

package/dist/es2015/chart/heatmap-chart/heatmap-chart.js

@@ -116,6 +116,7 @@ class HeatmapChart extends ChartElement {
         let pointOptions = this.pointOptions(series, fields.seriesIx);
         let color = fields.color || series.color;
 
+        pointOptions.pattern = fields.pattern || pointOptions.pattern;
         pointOptions = this.evalPointOptions(pointOptions, value, fields);
 
         if (isFunction(series.color)) {

package/dist/es2015/chart/heatmap-chart/heatmap-point.js

@@ -148,6 +148,7 @@ class HeatmapPoint extends ChartElement {
             rotation: markerOptions.rotation,
             background: this.color,
             border: this.markerBorder(),
+            pattern: options.pattern,
             borderRadius: markerOptions.borderRadius,
             opacity: this.series.opacity || options.opacity,
             zIndex: valueOrDefault(options.zIndex, this.series.zIndex),

package/dist/es2015/chart/legend/legend-item.js

@@ -108,14 +108,32 @@ class LegendItem extends BoxElement {
         return this._markerLineArea;
     }
 
+    _reduceSize(object, prop, factor = 0.6) {
+        if (typeof object[prop] === 'number') {
+            object[prop] = object[prop] * factor;
+        }
+    }
+
     _createSquare() {
         const options = this.options;
         if (options.type === AREA) {
+            let pattern = options.pattern || (options.series || {}).pattern;
+            if (pattern) {
+                if (typeof pattern === 'function') {
+                    pattern = pattern(options.series);
+                }
+                pattern = structuredClone(pattern);
+                this._reduceSize(pattern, 'gap');
+                this._reduceSize(pattern, 'width');
+                this._reduceSize(pattern, 'radius');
+            }
+
             this._square = new LegendItemSquare(Object.assign({}, {border: options.border,
                 vAlign: options.markers.visible ? BOTTOM : CENTER,
                 highlight: this._highlightOptions()},
                 options.area,
-                {background: options.area.background || options.markerColor}));
+                {pattern: pattern,
+                background: options.area.background || options.markerColor}));
             this.markerWrap.append(this._square);
         }
         return this._square;

package/dist/es2015/chart/line-chart/line-point.js

@@ -115,6 +115,7 @@ class LinePoint extends ChartElement {
             background: options.background,
             border: this.markerBorder(),
             opacity: options.opacity,
+            pattern: this.options.pattern,
             zIndex: valueOrDefault(options.zIndex, this.series.zIndex),
             animation: options.animation,
             visual: options.visual,