Highcharts Demo

author(s): Øystein Moseng

by AbhishekRohan

HTML

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

<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart:{
     
    },
    title: {
        text: ''
    },
    plotOptions : {
						
              pointPadding:20
              },
         
   xAxis :{
   gridLineWidth : 0,
   visible:false
       /* categories:["Standard-$312M","ELA-Net New- $117.8M","ELA-$94.1M","ELA Renewal- $73.4M","SPF-$75M"] */
   },
   yAxis :{
   gridLineWidth : 0,
   },
 /*    series: [{
        type: 'column',
        //borderColor: Highcharts.getOptions().colors[0],
        borderRadius:5,
    color: {
        pattern: {
            path: 'M 0 3 L 10 3 M 0 8 L 10 8',
            width: 5,
            height: 10
        }
    },
    keys: ['y', 'color.pattern.color'],
    data: [
        [1, '#f00'],
        [2, '#00ff00'],
        [3, 'blue'],
         [2, 'purple'],
        [3, 'orange']
    ]
    },
    ], */
    legend:{
        	layout : 'horizontal',
						enabled : true,
						symbolHeight : 10,
						symbolWidth : 10,
						symbolRadius : 5,
						y : 0,
						x : 10,
						itemStyle : {
							color : '#555555',
							fontSize : '15px',
							fontWeight : 'regular'
						},
           symbolBackgroundColor: '#FCFFC5'
    },
series:[
		{ name:"abc",
     type: 'column',
        //borderColor: Highcharts.getOptions().colors[0],
        borderRadius:5,
    color: {
        pattern: {
            path: 'M 0 3 L 10 3 M 0 8 L 10 8',
            width: 5,
            height: 10
        }
    },
    keys: ['y', 'color.pattern.color'],
   data:[2]
    },
    { name:"def",
     type: 'column',
        //borderColor: Highcharts.getOptions().colors[0],
        borderRadius:5,
    color: {
        pattern: {
            path: 'M 0 3 L 10 3 M 0 8 L 10 8',
            width: 5,
            height: 10
        }
    },
    keys: ['y', 'color.pattern.color'],
    data:[3]},
    { name:"ghi",
     type: 'column',
        //borderColor: Highcharts.getOptions().colors[0],
        borderRadius:5,
    color: {
        pattern: {
            path: 'M 0 3 L 10 3...