CODEWITHSUNDEEP
javascriptjqueryjqplot
telandor
telandor

Reputation: 869

Overlapping bars with JQPlot

I am creating a chart with JQPlot. The chart will contain several series, each series with two bars. The second bar of each series should be partly covered by the first bar. I tried to achieve this goal by setting barPadding to a negative value:

seriesDefaults:{
    renderer:$.jqplot.BarRenderer,
    rendererOptions: {
        varyBarColor: false,
        fillToZero: true,
        barPadding: -5,      // number of pixels between adjacent bars in the same group (same category or bin).
        barDirection: 'vertical', // vertical or horizontal.
        barWidth: 20,     // width of the bars.  null to calculate automatically.
        shadowOffset: 0    // offset from the bar edge to stroke the shadow.                        
    },
},

This indeed makes the bars overlapping but the second bar overlaps the first one. enter image description here

I would like it vice versa.

Is this possible with JQPlot or does anyone know another library with this possibility?

Upvotes: 0

Views: 1249

Answers (1)

zs2020
zs2020

Reputation: 54543

There is no such configuration in jqplot. However there is a hacky way to do it by setting the z-index.

$('#chart .jqplot-series-canvas:first').css( "z-index", 99999);

Demo

Upvotes: 1

Related Questions