JavaScript Chart

Set the padding property of the jqxChart. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxChart' style="width:530px; height:400px; position: relative; left: 0px; top: 0px;"></div>

JavaScript

var sampleData = [{
     Country: 'China',
     Population: 1347350000,
     Percent: 19.18
 }, {
     Country: 'India',
     Population: 1210193422,
     Percent: 17.22
 }, {
     Country: 'USA',
     Population: 313912000,
     Percent: 4.47
 }, {
     Country: 'Indonesia',
     Population: 237641326,
     Percent: 3.38
 }, {
     Country: 'Brazil',
     Population: 192376496,
     Percent: 2.74
 }];
 // prepare jqxChart settings
 var settings = {
     showLegend: true,
     title: "Top 5 most populated countries",
     description: "Statistics for 2011",
     enableAnimations: true,
     padding: {
         left: 0,
         top: 0,
         right: 0,
         bottom: 0
     },
     titlePadding: {
         left: 90,
         top: 0,
         right: 0,
         bottom: 10
     },
     source: sampleData,
     categoryAxis: {
         dataField: 'Country',
         showGridLines: true,
         flip: false
     },
     colorScheme: 'scheme01',
     seriesGroups: [{
         type: 'column',
         orientation: 'horizontal',
         columnsGapPercent: 100,
         toolTipFormatSettings: {
             thousandsSeparator: ','
         },
         valueAxis: {
             flip: true,
             unitInterval: 100000000,
             maxValue: 1500000000,
             displayValueAxis: true,
             description: '',
             formatFunction: function (value) {
                 return parseInt(value / 1000000);
             }
         },
         series: [{
             dataField: 'Population',
             displayText: 'Population (millions)'
         }]
     }]
 };
 // setup the chart
 $('#jqxChart').jqxChart(settings);