JSFiddle - React, Tailwind, and code Playground

by AbhishekRohan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

$('#container').highcharts({
setOptions :{
colors : ["#68ead3", "#efaf19", "#3e92cc", "#50b0a2", "#ee8888"]
},
   
    title: {
        text: 'Pattern fill plugin demo'
    },

    series: [{
        type: 'column',
        data: [{
        	y: 1,
            color: 'url(#highcharts-default-pattern-3)'
        }],
    },{
        type: 'column',
        data: [{
        	y: 4,
            color: 'url(#highcharts-default-pattern-3)'
        }],
    },{
        type: 'column',
        data: [{
        	y: 3,
            color: 'url(#highcharts-default-pattern-3)'
        }],
    },{
        type: 'column',
        data: [{
        	y: 7,
            color: 'url(#highcharts-default-pattern-3)'
        }],
    },{
        type: 'column',
        data: [{
        	y: 5,
            color: 'url(#highcharts-default-pattern-3)'
        }],
    }
    ]
    
});