score:3
Accepted answer
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>
Source: stackoverflow.com
Related Query
- Highchart Pattern fill
- How to use highchart pattern fill in angular?
- Using a fill pattern instead of colour with HighCharts
- How to fill data dynamically in Highchart
- How to fill dynamic json value in drill down highchart
- Highchart - Bell curve fill colour based on percentage
- Why does my highchart only expand horizontally to fill its containing div, and not vertically?
- Highcharts pattern fill how to bring the shapes closer together?
- Adding a pattern fill to a black and white column graph in Highcharter
- Strange character in the Highstock source code
- Content must fill available space down to footer and highchart must be reponsive (no scrolling allowed)
- Highcharts custom pattern fill shows different stroke width
- Why does my Highchart look different when I transfer my code from Jsfiddle to my server?
- highchart set fill color
- I had follow someone code samples and try apply to my HighChart program but I can't get it work at all
- Column based Highchart drilldown series assign color code to each column
- x-axis, y-axis lines does not appear, when I include 3D chart library of HighChart in my code
- HighCharts Pattern Fill striped
- How would I fill a table from highchart data?
- Differtent pattern color for every single column in highchart
- why my highchart code is not working?
- How to make Highchart fill the whole bootstrap window?
- In HighMaps how can we pattern fill a world map?
- Fill graph area with a gradient in HighChart
- How to ser Highchart Grid Color pattern
- How to render Gantt Highchart from data source
- Highchart spline Cut Off when reach to maximum scale value. How can it fixed?. I have attached may sample code on body
- spline chart highchart to fill the color in series
- I am trying to include india map in my highchart code
- Highchart map does not support IRS country code
More Query from same tag
- Highcharts pie chart hide zero sector
- Custom Chart with Highcharts / Highstock
- Setting highcharts datalabels backgroundColor with the same color of its piechart series
- highcharts.js add mouseOver function or hover states (implement breaks chart?)
- Change height of Highcharts with JavaScript. By default only re-sizes on window re-size
- Type Labels on Stacked and grouped column - Highcharts
- Issues with xAxis labels and useHTML #1
- Javascript/jQuery plug-in Highcharts does not recognize my data array. Is it my syntax?
- How can you set colors per level in a Highcharts Sunburst chart?
- R Package Highcharter: How do I drilldown to multiple series stacked column graph?
- Highcharts chart.renderer.images not lining up with platbands
- What is wrong with this highcharts.js code?
- (Highcharts) button inside tooltip can't trigger
- Empty space above plot lines in Highcharts
- Using Highcharts with minutes, seconds and milliseconds as Data not working
- Highcharts title alignment
- Highcharts skip columns when plotting
- How to convert to jpg and download div containing highchart and dynamically generated html table?
- Highcharts tool-tip show extra data
- Highcharts null endpoints flush with chart sides
- Highchart multiple bar charts in a single webpage
- Highcharts polar chart wind rose data from JSON
- highcharts pie apply a modal for each section
- Highcharts Node.js export server : Connection error
- change x-axis label on zooming with date
- Manipulate highcharts bar
- Extend Highcharts Export
- giving a javascript number fixed width after decimal while remaining a number
- Highcharts - Bubble chart - Moving gridlines
- How to disable dragging of Highcharts annotations?