I have a requirement to add color background in between 2 splines using JQchart.
Is there a possibility to do this using JQChart.

I have defined spline series data like below,

var mal1 = [ [ 0, 44.9251 ], [ 0.5, 47.97812 ], [ 1.5, 52.19859 ]];
var mal2 = [ [ 0, 45.56841 ], [ 0.5, 48.55809 ], [ 1.5, 52.72611 ]];
var mal3 = [ [ 0, 46.55429 ], [ 0.5, 49.4578 ], [ 1.5, 53.55365 ]];
var mal4 = [ [ 0, 48.18937 ], [ 0.5, 50.97919 ], [ 1.5, 54.9791 ]];

And series is defined like this:

series : [{ type : 'spline',
markers : null,
data : mal1
}, {
type : 'spline',
markers : null,
data : mal2
}, {
type : 'spline',
markers : null,
data : mal3
}, {
type : 'spline',
markers : null,
data : mal4
}];
I want blue color background between data series mal1 and mal2 ,
yellow color background between data series mal2 and mal3 ,
red color background between data series mal3 and mal4.

Please try this code and let us know:

var mal1 = [[0, 44.9251, 45.56841], [0.5, 47.97812, 48.55809], [1.5, 52.19859, 52.72611]];
var mal2 = [[0, 45.56841, 46.55429], [0.5, 48.55809, 49.4578], [1.5, 52.72611, 53.55365]];
var mal3 = [[0, 46.55429, 48.18937], [0.5, 49.4578, 50.97919], [1.5, 53.55365, 54.9791]];


$('#boyChildChart00').jqChart(
{
title : {
text : ''
},
legend : {
visible : false
},
paletteColors : {
type : 'customColors',
customColors : [ 'blue', 'blue', 'blue', 'blue', 'blue',
'blue', 'blue', 'blue', 'blue', 'red' ]
},
axes : [ {
type : 'age',
location : 'bottom',
minimum : 0,
interval : 3,
maximum : 36,
majorGridLines : {
lineWidth : 2,
strokeStyle : 'blue',
interval : 3
},
minorGridLines : {
lineWidth : 1,
strokeStyle : 'blue',
interval : 0.6
},
title : {
text : '',
fillStyle : 'blue'
},
strokeStyle : 'blue',
}, {
type : 'length',
location : 'top',
minimum : 0,
interval : 3,
maximum : 36,
title : {
text : '',
fillStyle : 'blue'
},
strokeStyle : 'blue',
}, {
name : 'y1',
location : 'left',
minimum : 30,
interval : 10,
maximum : 120,
majorGridLines : {
lineWidth : 2,
strokeStyle : 'blue',
interval : 10
},
minorGridLines : {
lineWidth : 1,
strokeStyle : 'blue',
interval : 1
},
title : {
text : '',
fillStyle : 'blue'
},
strokeStyle : 'blue',
}, {
name : 'y1',
location : 'left',
minimum : 11.81,
interval : 3.93,
maximum : 47.24,
strokeStyle : 'blue',
title : {
text : '',
fillStyle : 'blue'
},
majorGridLines : {
strokeStyle : 'blue',
interval : 3.93
}
}, {
name : 'y1',
location : 'right',
minimum : 30,
interval : 10,
maximum : 120,
strokeStyle : 'blue',
title : {
text : '',
fillStyle : 'blue'
},
strokeStyle : 'blue',
majorGridLines : {
strokeStyle : 'blue',
interval : 10
}
}, {
name : 'y1',
location : 'right',
minimum : 11.81,
interval : 3.93,
maximum : 47.24,
strokeStyle : 'blue',
title : {
text : '',
fillStyle : 'blue'
},
strokeStyle : 'blue',
majorGridLines : {
strokeStyle : 'blue',
interval : 3.93
}

} ],
series : [ {
type : 'spline',
markers : null,
data : mal1
}, {
type : 'spline',
markers : null,
data : mal2
}, {
type : 'spline',
markers : null,
data : mal3
} ]
});