Menu
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?
937
Some of the pattern-fill options have changed in recent versions. Please see our updated documentation for the current API. Highcharts v6.1.0 brings new and improved pattern fills to charts and maps.
Highcharts v6.1.0 brings new and improved pattern fills to charts and maps. The old pattern fill plugin is now obsolete, and a new official “pattern-fill.js” module has been added. The new module allows us to set colors in a chart as pattern fills, analogous to linearGradient and radialGradient in the color options.
The new module allows us to set colors in a chart as pattern fills, analogous to linearGradient and radialGradient in the color options. Wherever there is a color option, a pattern fill can be used. Both custom defined SVG patterns and image patterns are supported. To enable this new functionality, load the pattern-fill.js module.
Note, however, that intelligent sizing of image patterns is currently not available for patterns with user defined IDs. By default, Highcharts will automatically give all patterns an internal ID, and reuse all identical patterns. Never miss important news, tips, and tricks that will help you get the most out of your Highcharts products.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
