图例对齐问题JQPlot

Question

Folks,

We are having some difficulty in aligning the legends of group bar chart.

Basically we want to align legends horizontally in a single raw but legends are coming in different line

also legends are overlapping with axis we tried marginTop,marginLeft but it is not taking any effect.

Code

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />

<div id="chart2" style="height:400px;width:300px; "></div>

<script>

$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 2];
var s3 = [7, 5, 3, 3];
var ticks = ['a', 'b', 'c', 'd'];
plot2 = $.jqplot('chart2', [s1, s2, s3], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true,stackValue:true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
legend: {
renderer: jQuery.jqplot.EnhancedLegendRenderer,
show: true, 
location: 's',
placement: 'outside',
rendererOptions: {
numberRows: '1',
numberColumns: '3'
}
}

});
});

Answer 1

You need to load the enhancedLegendRenderer in order to use it :

<script type="text/javascript" src="plugins/jqplot.enhancedLegendRenderer.min.js"></script>

Please see a working example here (using enhancedLegendRenderer as an external resources)