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: ''
    },
                     credits: {
      enabled: false
  },
 plotOptions: {
                column: {
                    pointPadding: 0.5,
                    borderWidth: 0,
                    pointWidth:40
                },

                series:{
                	dataLabels : {
								formatter : function() {
									return this.y// formatNumber(this.y, "$");
								},
								enabled : true,
								aligh : "center",
								y : -10,
								style : {
									fontSize : "15px",
									fontWeight : 'normal',
									crop : false,
									overflow : "none"
								}
							},
                }
                
            },
         
   xAxis :{
   gridLineWidth : 0,
   lineWidth: 1,
   left: -10, 
   min:0,
   labels:{
  enabled: false
},

 /*   visible:false   */
       /* categories:["Standard-$312M","ELA-Net New- $117.8M","ELA-$94.1M","ELA Renewal- $73.4M","SPF-$75M"] */
   },
   yAxis :{
    min: 0,
    lineWidth: 1,
         bottom: 0, 
    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 : 20,
						x : -20,
						itemStyle : {
							color : '#555555',
							fontSize : '15px',
							fontWeight : 'regular'
						},
      margin:10
    },
series:[
		{ name:"abc",
     type: 'column',
        //borderColor: Highcharts.getOptions().colors[0],
        borderRadius:5,
       ...