The following charts demonstrate some options of the EnhancedLegendRendrer. Some of the enhancements are:

• Control of number of rows and/or columns.
• Clickable swatches and labels to toggle series on/off.
• Placement of legend inside or outside of the plot (this has since been added to the default legend functionality).
• Ability to hide legend swatches and or labels.

The first plot has legend labels in 3 columns. They are clickable.

$(document).ready(function(){

   s1 = [1,6,9,8];
   s2 = [4,3,1,2];
   s3 = [6,2,4,1];
   s4 = [1,2,3,4];
   s5 = [4,3,2,1];
   s6 = [8,2,6,3];

   plot1 = $.jqplot('chart1',[s1, s2, s3, s4, s5, s6],{
       stackSeries: true,
        seriesDefaults: {
            fill: true,
            showMarker: false
        },
       legend:{
           renderer: $.jqplot.EnhancedLegendRenderer,
           show:true,
           labels:['Fog', 'Rain', 'Frost', 'Sleet', 'Hail', 'Snow'],
           rendererOptions:{
               numberColumns:3
           }
		},
		axes: {
		    xaxis:{min:1, max:4},
		    yaxis:{min:0, max:35}
		}
   });
});

The second chart has legend labels in 2 columns placed outside of the plot. The showLabels option is false, but the labels are still clickable.

The legend renderer's "seriesToggle" option has been set to 900 to produce a slow, 900 ms fade. You can set this to a number or to 'fast', 'normal' or 'slow'.

Also, the disableIEFading option is set to false to allow fading on IE (as opposed to simple show/hide). In IE, series will be toggled with a show()/hide() method by default as opposed to fadeIn()/fadeOut() because of poor performance on some machines.

$(document).ready(function(){
    plot2 = $.jqplot('chart2',[s1, s2, s3, s4, s5, s6],{
        stackSeries: true,
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer
        },
        legend:{
            renderer: $.jqplot.EnhancedLegendRenderer,
            show:true,
            showLabels: true,
            labels:['Fog', 'Rain', 'Frost', 'Sleet', 'Hail', 'Snow'],
            rendererOptions:{
                numberColumns:1,
                seriesToggle: 900,
                disableIEFading: false
            },
            placement:'outside',
            shrinkGrid: true
        },
        axes: {
            xaxis:{renderer: $.jqplot.CategoryAxisRenderer},
            yaxis:{min:0, max:35}
        }
    });
});

The third plot has legend labels in 1 row outside and below the chart area. The showSwatches option is false, but the labels are still clickable.

$(document).ready(function(){
   plot3 = $.jqplot('chart3',[s1, s2, s3, s4, s5, s6],{
       stackSeries: true,
        seriesDefaults: {
            fill: false,
            showMarker: false
        },
       legend:{
           renderer: $.jqplot.EnhancedLegendRenderer,
           show:true,
           showSwatches: false,
           labels:['Fog', 'Rain', 'Frost', 'Sleet', 'Hail', 'Snow'],
           rendererOptions:{
               numberRows:1
           },
           placement:'outside',
           location:'s',
           marginTop: '30px'
		},
		axes: {
		    xaxis:{min:1, max:4},
		    yaxis:{min:0, max:35}
		}
   });
});

The fourth chart is a pie plot. Pie plots use their own legend renderer, since a pie plot is only 1 series. The pie legend renderer has also been updated to handle custom rows/columns, although it is not clickable.

$(document).ready(function(){
    plot4 = $.jqplot('chart4', [[['A',25],['B',14],['C',7],['D', 13],['E', 11],['F',35]]], {
      seriesDefaults:{
          renderer:$.jqplot.PieRenderer
      },
      legend:{
          show:true, 
          rendererOptions:{
              numberColumns:2
          }
      }      
    });
   
 });