Highcharts Demo with Pattern fills

Pattern fills https://www.highcharts.com/docs/chart-design-and-style/pattern-fills

by Ankit Patidar

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>

<div id="container"></div>

<a href="https://www.highcharts.com/docs/chart-design-and-style/pattern-fills" target="_blank">Refral link</a>

JavaScript

Highcharts.chart('container', {
    title: {
        text: 'Pattern fill plugin demo'
    },
    legend: {
        enabled: true
    },
    series: [{
        showInLegend: true,
        type: 'column',
        borderColor: Highcharts.getOptions().colors[0],
        data: [{
            y: 1,
            color: {
                patternIndex: 0
            }
        }, {
            y: 1,
            color: {
                patternIndex: 1
            }
        }, {
            y: 1,
            color: {
                patternIndex: 2
            }
        }, {
            y: 1,
            color: {
                patternIndex: 3
            }
        }, {
            y: 1,
            color: {
                patternIndex: 4
            }
        }, {
            y: 1,
            color: {
                patternIndex: 5
            }
        }, {
            y: 1,
            color: {
                patternIndex: 6
            }
        }, {
            y: 1,
            color: {
                patternIndex: 7
            }
        }, {
            y: 1,
            color: {
                patternIndex: 8
            }
        }, {
            y: 1,
            color: {
                patternIndex: 9
            }
        }, {
            y: 1,
            /* color: {
              color1: "#ffffff",
              height: 6,
              pattern: "https://rc.lsquared.com/assets/images/no-data-stripe.png",
              width: 6
            } */
            /* color: {
                pattern: {
                    image: 'https://rc.lsquared.com/assets/images/no-data-stripe.png',
                    width: 6,
                    height: 6
                }
            }, */
            "color": {
        			"pattern": {
                "image": "https://rc.lsquared.com/assets/images/no-data-stripe.png",
                "width": 6,
                "height": 6
              }
      			},
        },
        {
        		y:1,
            "deviceName": "my...