Question

I am using jqPlot for bar graph and I want to show x-axis as legend.

Screenshot attached…

Code:

var s1 = [2.5, 6.3, 7.4, 10]; 
var ticks = ['a', 'b', 'c', 'd']; 
plot2 = $.jqplot('chart2', [s1], { 
seriesDefaults: { 
     renderer:$.jqplot.BarRenderer, rendererOptions:{ varyBarColor : true }, 
     pointLabels: { show: true }, showLabel: true,   }, 
     series: [ {label: 'Cups'}, {label: 'Dishes'}, ], 
     legend: { show: true, placement: 'outside', //rendererOptions: {numberColumns: 2}   }, 
     axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks }, 
             yaxis:{  tickOptions:{ formatString:'%.2f%' } } }

Answer 1

Here’s an example of how to do this:

var s1 = [2.5, 6.3, 7.4, 10]; 
var ticks = ['a', 'b', 'c', 'd']; 
plot2 = $.jqplot('chart1', [s1,[],[],[]], { //give it extra blank series
seriesDefaults: { 
       renderer: $.jqplot.BarRenderer, 
       rendererOptions: { varyBarColor : true }, 
       pointLabels: { show: true }, 
       showLabel: true
     }, 
     series: [ {}, 
               {renderer: $.jqplot.LineRenderer}, // set our empty series to the lineRenderer, so the bar plot isn't padded for room
               {renderer: $.jqplot.LineRenderer},
               {renderer: $.jqplot.LineRenderer} ], 
     legend: { show: true, placement: 'outside', labels: ticks},  // give the legend the tick labels
     axes:   { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks }}, 
     yaxis:  {  tickOptions:{ formatString:'%.2f%' } }
});

Produces: