highcharts/modules/pictorial.js

JavaScript charting framework

!/**
 * Highcharts JS v12.6.0 (2026-04-13)
 * @module highcharts/modules/pictorial
 * @requires highcharts
 *
 * Pictorial graph series type for Highcharts
 *
 * (c) 2010-2026 Highsoft AS
 * Author: Torstein Hønsi, Magdalena Gut
 *
 * A commercial license may be required depending on use.
 * See www.highcharts.com/license
 */function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(t._Highcharts,t._Highcharts.Series.types.column,t._Highcharts.Chart,t._Highcharts.SeriesRegistry,t._Highcharts.Series,t._Highcharts.StackItem,t._Highcharts.SVGRenderer):"function"==typeof define&&define.amd?define("highcharts/modules/pictorial",["highcharts/highcharts"],function(t){return e(t,t.Series,["types"],["column"],t.Chart,t.SeriesRegistry,t.Series,t.StackItem,t.SVGRenderer)}):"object"==typeof exports?exports["highcharts/modules/pictorial"]=e(t._Highcharts,t._Highcharts.Series.types.column,t._Highcharts.Chart,t._Highcharts.SeriesRegistry,t._Highcharts.Series,t._Highcharts.StackItem,t._Highcharts.SVGRenderer):t.Highcharts=e(t.Highcharts,t.Highcharts.Series.types.column,t.Highcharts.Chart,t.Highcharts.SeriesRegistry,t.Highcharts.Series,t.Highcharts.StackItem,t.Highcharts.SVGRenderer)}("u"<typeof window?this:window,(t,e,r,i,s,a,o)=>(()=>{"use strict";var n={184:t=>{t.exports=a},448:t=>{t.exports=e},512:t=>{t.exports=i},540:t=>{t.exports=o},820:t=>{t.exports=s},944:e=>{e.exports=t},960:t=>{t.exports=r}},h={};function l(t){var e=h[t];if(void 0!==e)return e.exports;var r=h[t]={exports:{}};return n[t](r,r.exports,l),r.exports}l.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return l.d(e,{a:e}),e},l.d=(t,e)=>{for(var r in e)l.o(e,r)&&!l.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},l.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var p={};l.d(p,{default:()=>to});var c=l(944),d=l.n(c);l(448);let{doc:f,win:u}=d();function g(t,e,r,i={}){let s="function"==typeof t&&t.prototype||t;Object.hasOwnProperty.call(s,"hcEvents")||(s.hcEvents={});let a=s.hcEvents;d().Point&&t instanceof d().Point&&t.series&&t.series.chart&&(t.series.chart.runTrackerClick=!0);let o=t.addEventListener;o&&o.call(t,e,r,!!d().supportsPassiveEvents&&{passive:void 0===i.passive?-1!==e.indexOf("touch"):i.passive,capture:!1}),a[e]||(a[e]=[]);let n={fn:r,order:"number"==typeof i.order?i.order:1/0};return a[e].push(n),a[e].sort((t,e)=>t.order-e.order),function(){A(t,e,r)}}function m(t,e){let r;for(r in t||(t={}),e)t[r]=e[r];return t}function x(t){return y(t)&&"number"==typeof t.nodeType}function y(t,e){let r;return!!t&&"object"==typeof t&&(!e||"[object Array]"!==(r=Object.prototype.toString.call(t))&&"[object Array Iterator]"!==r)}function w(t,...e){let r,i=[t,...e],s={},a=function(t,e){return"object"!=typeof t&&(t={}),b(e,function(r,i){if("__proto__"!==i&&"constructor"!==i){let s;!y(r,!0)||(s=r?.constructor,y(r,!0)&&!x(r)&&s?.name&&"Object"!==s.name)||x(r)?t[i]=e[i]:t[i]=a(t[i]||{},r)}}),t};!0===t&&(s=i[1],i=Array.prototype.slice.call(i,2));let o=i.length;for(r=0;r<o;r++)s=a(s,i[r]);return s}function b(t,e,r){for(let i in t)Object.hasOwnProperty.call(t,i)&&e.call(r||t[i],t[i],i,t)}function _(){let t=arguments,e=t.length;for(let r=0;r<e;r++){let e=t[r];if(null!=e)return e}}function A(t,e,r){function i(e,r){let i=t.removeEventListener;i&&i.call(t,e,r,!1)}function s(r){let s,a;t.nodeName&&(e?(s={})[e]=!0:s=r,b(s,function(t,e){if(r[e])for(a=r[e].length;a--;)i(e,r[e][a].fn)}))}let a="function"==typeof t&&t.prototype||t;if(Object.hasOwnProperty.call(a,"hcEvents")){let t=a.hcEvents;if(e){let a=t[e]||[];r?(t[e]=a.filter(function(t){return r!==t.fn}),i(e,r)):(s(t),t[e]=[])}else s(t),delete a.hcEvents}}Array.prototype.find;let{animObject:v}=d(),{getOptions:S}=d(),M=function(){let t=[],e=S().colors,r=0;for(let i of["M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5","M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5","M 2 0 L 2 5 M 4 0 L 4 5","M 0 2 L 5 2 M 0 4 L 5 4","M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5"])t.push({path:i,color:e[r++],width:5,height:5,patternTransform:"scale(1.4 1.4)"});for(let i of(r=5,["M 0 0 L 5 10 L 10 0","M 3 3 L 8 3 L 8 8 L 3 8 Z","M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0","M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11","M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9"]))t.push({path:i,color:e[r++],width:10,height:10});return t}();function C(t,e){let r=JSON.stringify(t),i=r.length||0,s=0,a=0,o;if(e){o=Math.max(Math.floor(i/500),1);for(let t=0;t<i;t+=o)s+=r.charCodeAt(t);s&=s}for(;a<i;++a)s=(s<<5)-s+r.charCodeAt(a),s&=s;return s.toString(16).replace("-","1")}function k(){if(this.renderer&&(this.renderer.defIds||[]).filter(t=>t&&t.indexOf&&0===t.indexOf("highcharts-pattern-")).length){for(let t of this.series)if(t.visible)for(let e of t.points){let t=e.options&&e.options.color;t&&t.pattern&&(t.pattern._width="defer",t.pattern._height="defer")}this.redraw(!1)}}function E(){let t={},e=this.renderer,r=(e.defIds||[]).filter(t=>t.indexOf&&0===t.indexOf("highcharts-pattern-"));if(r.length)for(let i of([].forEach.call(this.renderTo.querySelectorAll('[color^="url("], [fill^="url("], [stroke^="url("]'),r=>{let i=r.getAttribute("fill")||r.getAttribute("color")||r.getAttribute("stroke");i&&(t[i.replace(e.url,"").replace("url(#","").replace(")","")]=!0)}),r))!t[i]&&(!function(t,e){let r=t.length;for(;r--;)if(t[r]===e){t.splice(r,1);break}}(e.defIds,i),e.patternElements[i]&&(e.patternElements[i].destroy(),delete e.patternElements[i]))}function O(){let t=this.options.color;t&&(t.pattern||void 0!==t.patternIndex)&&("string"==typeof t.pattern?.path&&(t.pattern.path={d:t.pattern.path}),this.color=this.options.color=w(this.series.options.color,t))}function L(t){let e=t.args[0],r=t.args[1],i=t.args[2],s=this.chartIndex||0,a=e.pattern,o="#333333";if(void 0!==e.patternIndex&&M&&(a=M[e.patternIndex]),!a)return!0;if(a.image||"string"==typeof a.path||a.path&&a.path.d){let t=i.parentNode&&i.parentNode.getAttribute("class");if(t=t&&t.indexOf("highcharts-legend")>-1,("defer"===a._width||"defer"===a._height)&&P.call({graphic:{element:i}},a),t||!a.id||a.anchorToPoint){let t,e;(a=w({},a)).anchorToPoint&&(t=w({},a),t._x=(e=i.getBBox?i.getBBox():{x:0,y:0,width:32,height:32}).x,t._y=e.y,a=t),a.id="highcharts-pattern-"+s+"-"+C(a)+C(a,!0)+(a.anchorToPoint?"-anchored":"")}this.addPattern(a,!this.forExport&&_(a.animation,this.globalAnimation,{duration:100})),o=`url(${this.url}#${a.id+(this.forExport?"-export":"")})`}else o=a.color||o;return i.setAttribute(r,o),e.toString=function(){return o},!1}function H(){let t=this.chart.isResizing;if(this.isDirtyData||t||!this.chart.hasRendered)for(let e of this.points){let r=e.options&&e.options.color;r&&r.pattern&&(t&&!(e.shapeArgs&&e.shapeArgs.width&&e.shapeArgs.height)?(r.pattern._width="defer",r.pattern._height="defer"):e.calculatePatternDimensions(r.pattern))}}function P(t){if(t.width&&t.height&&!t.anchorToPoint)return;let e=this.graphic&&(this.graphic.getBBox&&this.graphic.getBBox(!0)||this.graphic.element&&this.graphic.element.getBBox())||{},r=this.shapeArgs;if(r&&(e.width=r.width||e.width,e.height=r.height||e.height,e.x=r.x||e.x,e.y=r.y||e.y),t.image){if(!e.width||!e.height){t._width="defer",t._height="defer";let e=this.series.chart.mapView&&this.series.chart.mapView.getSVGTransform().scaleY;null!=e&&e<0&&(t._inverted=!0);return}t.aspectRatio&&(e.aspectRatio=e.width/e.height,t.aspectRatio>e.aspectRatio?e.aspectWidth=e.height*t.aspectRatio:e.aspectHeight=e.width/t.aspectRatio),t._width=t.width||Math.ceil(e.aspectWidth||e.width),t._height=t.height||Math.ceil(e.aspectHeight||e.height)}t.anchorToPoint?(t._x=0,t._y=0,t.width||(t._width=e.width),t.height||(t._height=e.height)):(t.width||(t._x=t.x||0,t._x+=e.x-Math.round(e.aspectWidth?Math.abs(e.aspectWidth-e.width)/2:0)),t.height||(t._y=t.y||0,t._y+=e.y-Math.round(e.aspectHeight?Math.abs(e.aspectHeight-e.height)/2:0)))}function T(t,e){let r=_(e,!0),i=v(r),s=t.color||"#333333",a=t.height||("number"==typeof t._height?t._height:0)||32,o=t.width||("number"==typeof t._width?t._width:0)||32,n=t.anchorToPoint?"userSpaceOnUse":t.patternContentUnits||"userSpaceOnUse",h=t=>this.rect(0,0,o,a).attr({fill:t}).add(f),l,p=t.id,c;if(!p&&(this.idCounter=this.idCounter||0,p="highcharts-pattern-"+this.idCounter+"-"+(this.chartIndex||0),++this.idCounter),this.forExport&&(p+="-export"),this.defIds=this.defIds||[],this.defIds.indexOf(p)>-1)return;this.defIds.push(p);let d={id:p,patternUnits:"userSpaceOnUse",patternContentUnits:n,width:o,height:a,x:t._x||t.x||0,y:t._y||t.y||0};t._inverted&&(d.patternTransform="scale(1, -1)",t.patternTransform&&(t.patternTransform+=" scale(1, -1)")),t.patternTransform&&(d.patternTransform=t.patternTransform);let f=this.createElement("pattern").attr(d).add(this.defs);return f.id=p,t.path?(c=y(t.path)?t.path:{d:t.path},t.backgroundColor&&h(t.backgroundColor),l={d:c.d},this.styledMode||(l.stroke=c.stroke||s,l["stroke-width"]=_(c.strokeWidth,2),l.fill=c.fill||"none"),c.transform&&(l.transform=c.transform),this.createElement("path").attr(l).add(f),f.color=s):t.image&&(r?this.image(t.image,0,0,o,a,function(){this.animate({opacity:_(t.opacity,1)},i),A(this.element,"load")}).attr({opacity:0}).add(f):this.image(t.image,0,0,o,a).add(f)),t.image&&r||void 0===t.opacity||[].forEach.call(f.element.childNodes,e=>{e.setAttribute("opacity",t.opacity)}),this.patternElements=this.patternElements||{},this.patternElements[p]=f,f}function G(t){let e=this.options.color;e&&e.pattern&&!e.pattern.color?(delete this.options.color,t.apply(this,[].slice.call(arguments,1)),e.pattern.color=this.color,this.color=this.options.color=e):t.apply(this,[].slice.call(arguments,1))}function B(){if(!this.chart?.mapView)return;let t=this.chart.renderer,e=t.patternElements;t.defIds?.length&&e&&this.points.filter(function(t){return!!t.graphic&&(t.graphic.element.hasAttribute("fill")||t.graphic.element.hasAttribute("color")||t.graphic.element.hasAttribute("stroke"))&&!t.options.color?.pattern?.image&&!!t.group?.scaleX&&!!t.group?.scaleY}).map(function(e){return{id:(e.graphic?.element.getAttribute("fill")||e.graphic?.element.getAttribute("color")||e.graphic?.element.getAttribute("stroke")||"").replace(t.url,"").replace("url(#","").replace(")",""),x:e.group?.scaleX||1,y:e.group?.scaleY||1}}).filter(function(t,e,r){return""!==t.id&&-1!==t.id.indexOf("highcharts-pattern-")&&!r.some(function(r,i){return r.id===t.id&&i<e})}).forEach(function(t){let r=t.id;e[r].scaleX=1/t.x,e[r].scaleY=1/t.y,e[r].updateTransform("patternTransform")})}var R=l(960),j=l.n(R),I=l(512),W=l.n(I);let D={rescalePatternFill:function(t,e,r,i,s=1){let a=t&&t.attr("fill"),o=a&&a.match(/url\(([^)]+)\)/);if(o){let a=document.querySelector(`${o[1]} path`);if(a){let o=a.getBBox();if(0===o.width){let e=a.parentElement;t.renderer.box.appendChild(a),o=a.getBBox(),e.appendChild(a)}let n=1/(o.width+s),h=e/i/o.height,l=o.width/o.height,p=r/e,c=-o.width/2;l<p&&(n=n*l/p),a.setAttribute("stroke-width",s/(r*n)),a.setAttribute("transform",`translate(0.5, 0)scale(${n} ${h}) translate(${c+s*n/2}, ${-o.y})`)}}},invertShadowGroup:function(t,e){let r=e.chart.inverted;r&&t.attr({rotation:90*!!r,scaleX:r?-1:1})},getStackMetrics:function(t,e){let r=t.len,i=0;return e&&null!=e.max&&(i=t.toPixels(e.max,!0),r=t.len-i),{height:r,y:i}}},U=W().seriesTypes.column.prototype.pointClass,{rescalePatternFill:V,getStackMetrics:X}=D,$=class extends U{setState(){super.setState.apply(this,arguments);let t=this.series,e=t.options.paths;if(this.graphic&&this.shapeArgs&&e){let r=e[this.index%e.length];V(this.graphic,X(t.yAxis,r).height,this.shapeArgs.width||0,this.shapeArgs.height||1/0,this.series.options.borderWidth||0)}}};var Y=l(820),F=l.n(Y),N=l(184),q=l.n(N),z=l(540),Z=l.n(z);let J=W().seriesTypes.column;({compose:function(t,e,r){let i=e.prototype.pointClass,s=i.prototype;if(!s.calculatePatternDimensions){var a,o;let n;g(t,"endResize",k),g(t,"redraw",E),m(s,{calculatePatternDimensions:P}),g(i,"afterInit",O),g(e,"render",H),a=e.prototype,n=a[o="getColor"],a[o]=function(){let t=arguments,e=this;return G.apply(this,[function(){return n.apply(e,arguments.length?arguments:t)}].concat([].slice.call(arguments)))},g(e,"afterRender",B),g(e,"mapZoomComplete",B),m(r.prototype,{addPattern:T}),g(r,"complexColor",L)}},patterns:M}).compose(j(),F(),Z());let{animObject:K}=d(),{getStackMetrics:Q,invertShadowGroup:tt,rescalePatternFill:te}=D;class tr extends J{animate(t){let{chart:e,group:r}=this,i=K(this.options.animation),s=[this.getSharedClipKey(),i.duration,i.easing,i.defer].join(","),a=e.sharedClips[s];if(t&&r){let t=e.getClipBox(this);a||(t.y=t.height,t.height=0,a=e.renderer.clipRect(t),e.sharedClips[s]=a),r.clip(a)}else if(a&&!a.hasClass("highcharts-animating")){let t=e.getClipBox(this);a.addClass("highcharts-animating").animate(t,i)}}animateDrilldown(){}animateDrillupFrom(){}pointAttribs(t){let e=super.pointAttribs.apply(this,arguments),r=this.options.paths;if(t&&t.shapeArgs&&r){let i=r[t.index%r.length],{y:s,height:a}=Q(this.yAxis,i),o=i.definition;o!==t.pathDef?(t.pathDef=o,e.fill={pattern:{path:{d:o,fill:e.fill,strokeWidth:e["stroke-width"],stroke:e.stroke},x:t.shapeArgs.x,y:s,width:t.shapeArgs.width||0,height:a,patternContentUnits:"objectBoundingBox",backgroundColor:"none",color:"#ff0000"}}):t.pathDef&&t.graphic&&delete e.fill}return delete e.stroke,delete e.strokeWidth,e}getExtremes(){let t=super.getExtremes.apply(this,arguments),e=this.options.paths;return e&&e.forEach(function(e){null!=e.max&&null!=t.dataMax&&e.max>t.dataMax&&(t.dataMax=e.max)}),t}}function ti(t){let e=Object.keys(t.points).filter(t=>t.split(",").length>1),r=t.axis.chart.series,i=e.map(t=>parseFloat(t.split(",")[0])),s=-1;i.forEach(t=>{r[t]&&r[t].visible&&(s=t)});let a=t.axis.chart.series[s];if(a&&a.is("pictorial")&&t.axis.hasData()&&a.xAxis.hasData()){let e=a.xAxis,r=t.axis.options,i=t.axis.chart,s=t.shadow,o=e.toPixels(t.x,!0),n=i.inverted?e.len-o:o,h=a.options.paths||[],l=t.x%h.length,p=h[l],c=a.getColumnMetrics&&a.getColumnMetrics().width,{height:d,y:f}=Q(a.yAxis,p),u=r.stackShadow,g=_(u&&u.borderWidth,a.options.borderWidth,1);if(!s&&u&&u.enabled&&p)t.shadowGroup||(t.shadowGroup=i.renderer.g("shadow-group").add()),t.shadowGroup.attr({translateX:i.inverted?t.axis.pos:e.pos,translateY:i.inverted?e.pos:t.axis.pos}),t.shadow=i.renderer.rect(n,f,c,d).attr({fill:{pattern:{path:{d:p.definition,fill:u.color||"#dedede",strokeWidth:g,stroke:u.borderColor||"transparent"},x:n,y:f,width:c,height:d,patternContentUnits:"objectBoundingBox",backgroundColor:"none",color:"#dedede"}}}).add(t.shadowGroup),tt(t.shadowGroup,t.axis),te(t.shadow,d,c,d,g),t.setOffset(a.pointXOffset||0,a.barW||0);else if(s&&t.shadowGroup){s.animate({x:n,y:f,width:c,height:d});let r=s.attr("fill"),o=r&&r.match(/url\(([^)]+)\)/);o&&i.renderer.patternElements&&i.renderer.patternElements[o[1].slice(1)].animate({x:n,y:f,width:c,height:d}),t.shadowGroup.animate({translateX:i.inverted?t.axis.pos:e.pos,translateY:i.inverted?e.pos:t.axis.pos}),tt(t.shadowGroup,t.axis),te(s,d,c,d,g),t.setOffset(a.pointXOffset||0,a.barW||0)}}else t.shadow&&t.shadowGroup&&(t.shadow.destroy(),t.shadow=void 0,t.shadowGroup.destroy(),t.shadowGroup=void 0)}function ts(t,e){t.axes&&t.axes.forEach(function(t){t.stacking&&b(t.stacking.stacks,function(t){b(t,function(t){e(t)})})})}function ta(t){ts(t,function(t){t.shadow&&t.shadowGroup&&(t.shadow.destroy(),t.shadowGroup.destroy(),delete t.shadow,delete t.shadowGroup)})}tr.defaultOptions=w(J.defaultOptions,{borderWidth:0}),g(tr,"afterRender",function(){let t=this,e=t.options.paths,r=/url\(([^)]+)\)/;t.points.forEach(function(i){if(i.graphic&&i.shapeArgs&&e){let s=e[i.index%e.length],a=i.graphic.attr("fill"),o=a&&a.match(r),{y:n,height:h}=Q(t.yAxis,s);if(o&&t.chart.renderer.patternElements){let e=t.chart.renderer.patternElements[o[1].slice(1)];e&&e.animate({x:i.shapeArgs.x,y:n,width:i.shapeArgs.width||0,height:h})}te(i.graphic,Q(t.yAxis,s).height,i.shapeArgs.width||0,i.shapeArgs.height||1/0,t.options.borderWidth||0)}})}),g(j(),"render",function(){ts(this,ti)}),g(q(),"afterSetOffset",function(t){if(this.shadow){let{chart:e,len:r}=this.axis,{xOffset:i,width:s}=t,a=e.inverted?i-e.xAxis[0].len:i,o=e.inverted?-r:0;this.shadow.attr({translateX:a,translateY:o}),this.shadow.animate({width:s})}}),g(j(),"afterDrilldown",function(){ta(this)}),g(j(),"afterDrillUp",function(){ta(this)}),tr.prototype.pointClass=$,W().registerSeriesType("pictorial",tr);let to=d();return p.default})());