too large bar width in jqplot

Question

I'm new to jqplot, when I want to draw a bar chart, x axis is date, interval is 1 day. This is part of my code:

     axesDefaults:{                                                                  
          tickRenderer: $.jqplot.CanvasAxisTickRenderer,                              
         tickOptions:{
            fontSize:'10pt',
         },                                                                          
    },                                                                              
     axes:{                                                                          
         xaxis:{
            renderer:$x_renderer,                                                   
             tickOptions:{
               formatString:'%Y-%#m-%#d',                                          
            },
            rendererOptions:{                                                       
                 tickOptions:{
                     angle:-90,                                                      
                 }                                                                   
              },                                                                      
             label:'$label',
             tickInterval:'86400000',
         },
         yaxis:{                                                                     
            tickOptions:{
               formatString:'%.2f',                                                
             },                                                                      
           autoscale:true                                                          
         }, 
    },                                                                              
     highlighter:{ 
         show:true,                                                                  
    },

But I find the width of each bar is too large to cover each other. How to fix it?

Thanks!

Answer 1

The AnthonyLeGovic answer is indeed correct, but if you need to change the column width according to the number of data points you can do the following:

// Get the size of the container of the plot
var width = jQuery(containerName).width();

// Divide by the number of data points.
width = width / number_of_data_points;

// Reduce the width to a % of the total for each data point.
width = (width * 20) / 100;

// Set the value
$.jqplot(containerName, [data],
{
    // whatever
    // ...

    seriesDefault:
    {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: { barWidth: width }
    }

    // whatever
    // ...
}

Note that I'm not taking into account the width of the legend. The legend width can only be obtained after plotting, so if you want to reduce the column width considering even the width of the legend you must do it after plotting, and then replot.

I've prepared a fiddle that shows an example.

Hope it helps.

Answer 2

You can specify it in your series options :

seriesDefault:{
   renderer: $.jqplot.BarRenderer,
   rendererOptions: {
      barWidth: 5
   }
}

Don't forget to include barRenderer plugins. For more documentations about bar chart on jqplot please take a look at : Jqplot documentation