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>


Related Query

More Query from same tag