barRoundedCorner

by AbhishekRohan

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


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

CSS

body {
    font-family:helvetica, sans-serif;
    font-size:.7em;
}

JavaScript

Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
	return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
};
Highcharts.chart('container', {
    chart: {
        type: 'column',
      
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
   tooltip: {
   enabled : false
   },
    plotOptions: {
    
            column: {
                grouping: false,
               borderRadius : 20,
               pointPadding : 0,
              bottom : 0
            },
            		scatter: {
		/* 	marker: {
			  symbol: 'line',
			  lineWidth: 2,
			  radius: 0,
			  lineColor: '#EFAF19'
			} */
		}
        },
  series: [
        {
        name : "data1",
        color : "#519DD1",
        data : [29.9, 71.5, 106.4, 129.2, 144.0, 176.0] 
        },
       {
              name: 'Bottoms',
              type: 'scatter',
          //  pointPadding: 0.1,
            showInLegend: false,
              pointPlacement: 0, 
              color : "#519DD1",
              marker: {
                symbol: 'line',
                lineWidth: 20,
                radius: 17,
                lineColor: '#519DD1'
              },
              data: [5,5,5,5,5,5]
            } 
        ]
});