After replot the chart grid lines are disappear - jqplot

Question

I am using jqplot charting library to draw the bar chart in my application.
I have used following code to draw the horizontal bar chart.
var plot = $.jqplot('chart', [dataSlices], {
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -55 },
rendererOptions: {
barDirection: 'horizontal',
barMargin: 5,
highlightMouseOver: false,
fillToZero: true
}
},
axesDefaults: {
},
axes: {
grid: {
drawBorder: false
},
xaxis: {
pad: 0,
tickOptions: {
show: true,
mark: 'cross',
thousandsSeparator: ',',
formatString: "%d"
},
numberTicks: null,
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels,
tickOptions: {
showMark: false,
showGridline: false
}
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 0,
shadow: false
},
series: [{ color: '#f39f02' }]
});
$.jqplot.thousandsSeparator = ',';
//$.jqplot.formatString = "%'d";
gridCanvas = $($('.jqplot-grid-canvas')[0])
seriesCanvas = $($('.jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
plot.replot({ resetAxes: true });
I am getting the chart without grid lines.
Is there any idea, how to do this?

Answer 1

Call the following lines after replot, you will get the expected result
gridCanvas = $($(item + ' .jqplot-grid-canvas')[0])
seriesCanvas = $($(item + ' .jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
I tried its working fine for me,.

Answer 2

GridLineColor set to white (#FFFFFF) explains why you aren't wiewing vertical lines.
BorderWidth set to 0 explains why you aren't viewing borders of your plot (drawn with a size of 0px)
If you doesn't need particular color and/or size of your grid (vertical lines and border) remove the grid part of your code.
If you need particular color and/or size choose carefully your values (#FFFFFF if your background if already white - or a borderWidth of 0px) :
grid: {
gridLineColor: '#FF0000',
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 2,
shadow: false
},
Please see working example here (I have delete yAxisLabels and add fictional data in order to draw a plot)