Question

I have a bar chart, created using JqPlot. It renders as follows:

Here is the jQuery code for the bar chart:

$(document).ready(function(){

    var plots = [[['US',330]], [['GB',300]], [['IN',230]], [['AU',70]], [['RoW',70]]]
    var plot1 = $.jqplot('TopCountries', plots, {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        animate: true,
            // Will animate plot on calls to plot1.replot({resetAxes:true})
            animateReplot: true,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            pointLabels: { show: true, location: 'n', edgeTolerance: -15 },
            rendererOptions: {
            fillToZero: true,
            barWidth: 15,
            shadow: false
            }
        },
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[

        ],
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                //ticks: ticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                //tickOptions: {formatString: '$%d'}
            }
        }
    });
});

This is perfect however I would like the bars themselves to be thicker. If I change the barWidth to be higher, the bars do get thicker, however seem to align to the left, causing bars to appear off the graph, e.g.

Ideally I would like the bars to sit just above the ticks. I’ve played around with the edgeTolerance, fillToZero, yaxis pad, etc. however these don’t seem to make a difference.

Any one know what I can do?

Answer 1

You have two errors :
– in plots ‘[‘ are not well placed
– add varyBarColor: true

var plots = [['US',330], ['GB',300], ['IN',230], ['AU',70], ['RoW',70]];
var plot1 = $.jqplot('chartgaugeidentauto', [plots], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
animate: true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot: true,
seriesDefaults:{
    renderer:$.jqplot.BarRenderer,
    pointLabels: { 
        show: true, 
        location: 'n', 
        edgeTolerance: -15 
    },
    rendererOptions: {
        fillToZero: true,
        barWidth: 15,
        shadow: false,
        varyBarColor: true
    }
},
// Custom labels for the series are specified with the "label"
// option on the series option.  Here a series option object
// is specified for each series.
series:[
],
axes: {
    // Use a category axis on the x axis and use our custom ticks.
    xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        //ticks: ticks
    },
    // Pad the y axis just a little so bars can get close to, but
    // not touch, the grid boundaries.  1.2 is the default padding.
    yaxis: {
        pad: 1.05,
        //tickOptions: {formatString: '$%d'}
    }
}
});

Result :