I'm currently tackling a project that requires me to showcase two different plots on the same chart, one being a "SPLINE" and the other a "COLUMN". My aim is to assign distinct background colors to each of these plots. Please note that I am referring to the background color rather than the color of the series itself.
https://i.stack.imgur.com/s7okA.png
Specifically, I am looking to have a unique color for the spline chart and another for the navigator and column chart.
I will include the necessary code below:
chartOptions = {
chart: {
styledMode: true,
marginTop: 51,
marginRight: 40,
marginLeft: 20,
backgroundColor: '#FCFFC5'
},
navigator: {
top: 1,
series: {
type: 'spline'
},
adaptToUpdatedData: true,
xAxis: {
labels: {
enabled: false,
}
}
},
rangeSelector: false,
plotOptions: {
series: {
showInNavigator: true,
gapSize: 0
}
},
xAxis:{
labels: {
enabled: true,
},
tickColor: 'white',
events: {
afterSetExtremes: (e) => {
var fromDate = e.min;
var toDate = e.max;
if(this.timeout){
clearTimeout(this.timeout);
this.timeout = 0;
}
this.timeout = setTimeout(
() => {
console.log("hello");
this.restService.updateDates({fromDate: moment(fromDate).format("YYYY-MM-DD"), toDate: moment(toDate).format("YYYY-MM-DD")});
}, 1000
);
}
}
},
yAxis: [
{
type: 'logarithmic',
min: 0.1,
labels: {
align: 'left',
x: 5,
formatter: function () {
if (this.value === 0.1) {
return 0;
} else {
return Highcharts.Axis.prototype.defaultLabelFormatter.call(this);
}
}
},
height: '100%',
offset: 0,
lineWidth: 2,
},
{
type: 'logarithmic',
min: 0.1,
labels: {
align: 'right',
x: -5,
formatter: function () {
if (this.value === 0.1) {
return 0;
} else {
return Highcharts.Axis.prototype.defaultLabelFormatter.call(this);
}
}
},
top: '110%',
height: '30%',
lineWidth: 2,
offset:0,
//labels : { x : 5, align: 'left' }
},
{
opposite: true,
height: '70%',
offset: 0,
lineWidth: 2,
left:'-100%',
labels : { x : -5, align: 'left' }
},
{
opposite: true,
top: '70%',
height: '30%',
lineWidth: 2,
offset:0,
left:'-100%',
labels : { x : -5, align: 'left' }
}
],
series: [
],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> Db',
valueDecimals: 0,
split: true
},
responsive: {
rules: [{
condition: {
maxWidth: 4500
},
chartOptions: {
chart: {
height: 400
},
subtitle: {
text: null
},
navigator: {
enabled: true
}
}
}]
}
};