Highchart Pattern fill - highcharts

Question

I'm trying to use a pattern as a columnrange to allow the bar chart to work.
The pattern shows up but doesn't use the predefined pattern, so it's only solid blue. Normally it uses the defined pattern which is striped and works perfect on scattercharts and so on.
Here is a snippet showcasing what i mean:
Highcharts.chart('logicalCapacity', {
chart: {
height: 95,
width: 550,
spacingBottom: 0,
marginLeft: 180,
marginRight: 10,
spacingLeft: 0,
marginTop: 2,
animation: false,
backgroundColor: 'transparent'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderColor: 'transparent',
},
bar: {
pointWidth: 7,
},
columnrange: {
grouping: false,
shadow: false,
borderWidth: 0,
}
},
xAxis: {
gridLineColor: '#969696',
gridLineWidth: 1,
categories: ["Differentiering", "Tænkning", "Opfattelse"],
lineColor: '#969696',
tickLength: 0
},
defs: {
patterns: [{
'id': 'custom-pattern',
'path': {
d: 'M10 0 L0 10',
stroke: 'green',
strokeWidth: 10
}
}]
},
yAxis: {
gridLineWidth: 1,
gridLineColor: '#969696',
minorGridLineColor: '#969696',
tickColor: '#969696',
tickWidth: 1,
tickInterval: 10,
minorTickInterval: 5,
min: 0,
max: 100,
title: '',
plotLines: [{
color: '#000',
width: 2,
value: 50,
zIndex: 5
}]
},
series: [
{ "name": "seen", "color": "#d5d5d5", "type": 'bar', "marker": { "symbol": "dot" }, "data": [60, 35, 50], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "wrong", "color": "#817f81", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 20, 0], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "correct", "color": "#000", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 25, 40], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "", pointPadding: -0.3, "type": "columnrange", "marker": { "symbol": "dot" },"lineColor":"transparent", fillColor: { pattern: 'url(#custom-pattern)'}, "data": [[50, 90]], "zIndex": 1, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>
<div id="logicalCapacity"></div>
Hope that someone can point me in the right direction?

Answer 1

You can use Version 1 of the Pattern Fill.
var gfxPath = 'https://raw.githubusercontent.com/highcharts/pattern-fill/master/graphics/';
var chart = new Highcharts.Chart({
chart: {
height: 95,
width: 550,
spacingBottom: 0,
marginLeft: 180,
marginRight: 10,
spacingLeft: 0,
marginTop: 2,
animation: false,
backgroundColor: 'transparent',
renderTo: 'container'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderColor: 'transparent',
},
bar: {
pointWidth: 7,
},
columnrange: {
grouping: false,
shadow: false,
borderWidth: 0,
}
},
xAxis: {
gridLineColor: '#969696',
gridLineWidth: 1,
categories: ["Differentiering", "Tænkning", "Opfattelse"],
lineColor: '#969696',
tickLength: 0
},
defs: {
patterns: [{
'id': 'custom-pattern',
'path': {
d: 'M10 0 L0 10',
stroke: 'green',
strokeWidth: 10
}
}]
},
yAxis: {
gridLineWidth: 1,
gridLineColor: '#969696',
minorGridLineColor: '#969696',
tickColor: '#969696',
tickWidth: 1,
tickInterval: 10,
minorTickInterval: 5,
min: 0,
max: 100,
title: '',
plotLines: [{
color: '#000',
width: 2,
value: 50,
zIndex: 5
}]
},
series: [{
"name": "seen",
"color": "#d5d5d5",
"type": 'bar',
"marker": {
"symbol": "dot"
},
"data": [60, 35, 50],
"fillColor": null,
"lineColor": null,
"zIndex": 3,
"dataLabels": {
"enabled": false
},
"size": 0,
"enableMouseTracking": false
}, {
"name": "wrong",
"color": "#817f81",
"type": 'bar',
"marker": {
"symbol": "dot"
},
"data": [10, 20, 0],
"fillColor": null,
"lineColor": null,
"zIndex": 3,
"dataLabels": {
"enabled": false
},
"size": 0,
"enableMouseTracking": false
}, {
"name": "correct",
"color": "#000",
"type": 'bar',
"marker": {
"symbol": "dot"
},
"data": [10, 25, 40],
"fillColor": null,
"lineColor": null,
"zIndex": 3,
"dataLabels": {
"enabled": false
},
"size": 0,
"enableMouseTracking": false
}, {
type: 'columnrange',
"data": [
[50, 90]
],
color: {
pattern: gfxPath + 'pattern2.png',
width: 6,
height: 6,
// VML only:
color1: 'red',
color2: 'yellow'
}
}]
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill.js"></script>
<div id="container" style="height: 300px"></div>
With version 2
In columnrange data will be as
"data": [{
low: 50,
high: 90,
color: 'url(#highcharts-default-pattern-0)'
}]
Highcharts.chart('logicalCapacity', {
chart: {
height: 95,
width: 550,
spacingBottom: 0,
marginLeft: 180,
marginRight: 10,
spacingLeft: 0,
marginTop: 2,
animation: false,
backgroundColor: 'transparent'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderColor: 'transparent',
},
bar: {
pointWidth: 7,
},
columnrange: {
grouping: false,
shadow: false,
borderWidth: 0,
}
},
xAxis: {
gridLineColor: '#969696',
gridLineWidth: 1,
categories: ["Differentiering", "Tænkning", "Opfattelse"],
lineColor: '#969696',
tickLength: 0
},
defs: {
patterns: [{
'id': 'custom-pattern',
'path': {
d: 'M10 0 L0 10',
stroke: 'green',
strokeWidth: 10
}
}]
},
yAxis: {
gridLineWidth: 1,
gridLineColor: '#969696',
minorGridLineColor: '#969696',
tickColor: '#969696',
tickWidth: 1,
tickInterval: 10,
minorTickInterval: 5,
min: 0,
max: 100,
title: '',
plotLines: [{
color: '#000',
width: 2,
value: 50,
zIndex: 5
}]
},
series: [
{ "name": "seen", "color": "#d5d5d5", "type": 'bar', "marker": { "symbol": "dot" }, "data": [60, 35, 50], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "wrong", "color": "#817f81", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 20, 0], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "correct", "color": "#000", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 25, 40], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
{ "name": "", pointPadding: -0.3, "type": "columnrange", "marker": { "symbol": "dot" },"lineColor":"transparent", fillColor: { pattern: 'url(#custom-pattern)'}, "data": [{
low: 50,
high: 90,
color: 'url(#highcharts-default-pattern-0)'
}], "zIndex": 1, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>
<div id="logicalCapacity"></div>