jQuery Chart

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

by Stéphane Cabaret

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: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, itemIndex) {

        return sampleData[itemIndex].Country;
      },
      toolTipFormatFunction: function(value, itemIndex) {
        var label = sampleData[itemIndex].Country + ': ' + 	sampleData[itemIndex].Percent + '%';
        return label;
      }
    }]
  }]
};

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