jQuery Chart

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

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxChart' style="width:830px; height:400px;"></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 = {
     title: "Mobile browsers share in Dec 2011",
     description: "(source: wikipedia.org)",
     enableAnimations: true,
     showLegend: true,
     showBorderLine: true,
     legendLayout: {
         left: 700,
         top: 160,
         width: 300,
         height: 200,
         flow: 'vertical'
     },
     padding: {
         left: 5,
         top: 5,
         right: 5,
         bottom: 5
     },
     titlePadding: {
         left: 0,
         top: 0,
         right: 0,
         bottom: 10
     },
     source: sampleData,
     colorScheme: 'scheme03',
     seriesGroups: [{
         type: 'pie',
         showLabels: true,
         series: [{
             dataField: 'Percent',
             displayText: 'Country',
             labelRadius: 170,
             initialAngle: 15,
             radius: 145,
             centerOffset: 0,
             formatFunction: function (value) {
                 if (isNaN(value)) return value;
                 return parseFloat(value) + '%';
             },
         }]
     }]
 };

 // setup the chart
 $('#jqxChart').jqxChart(settings);