Hello kc,
X-axis label rotation can be achieved by setting the labels.angle property of xAxis, as in the following example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_textrotation.htm?arctic.
You can also display column/bar labels and format them however you like with the series formatFunction callback function. Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>jqxChart Bar Series Example</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare chart data
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: "Top 5 most populated countries",
description: "Statistics for 2011",
showLegend: true,
enableAnimations: true,
padding: { left: 20, top: 5, right: 20, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
xAxis:
{
dataField: 'Country',
gridLines: { visible: true },
flip: false
},
valueAxis:
{
flip: true,
labels: {
visible: true,
formatFunction: function (value) {
return parseInt(value / 1000000);
}
}
},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'column',
orientation: 'horizontal',
columnsGapPercent: 50,
toolTipFormatSettings: { thousandsSeparator: ',' },
series: [
{ dataField: 'Population', displayText: 'Population (millions)',
labels: {
visible: true,
verticalAlignment: 'top',
offset: { x: 0, y: 15 }
},
formatFunction: function (value, index, series) {
return series.displayText + ': ' + value;
}
}
]
}
]
};
// setup the chart
$('#chartContainer').jqxChart(settings);
});
</script>
</head>
<body class='default'>
<div id='chartContainer' style="width: 850px; height: 500px;">
</div>
</body>
</html>
Best Regards,
Dimitar
jQWidgets team
http://www.jqwidgets.com/
