I'm working with Highcharts and am having trouble applying x axis label styles through my theme... it works correctly if I apply it when I create a chart.. but the theme options seem to be ignored only for the x axis. The same styles work correctly for the y axis.
Code below. Thanks!
Theme
Highcharts.theme = {
chart: {
zoomType: 'x'
},
plotOptions: {
column: {
borderColor: null,
borderWidth: 1,
borderRadius: 3,
shadow: true
},
line: {
lineWidth: 3,
shadow: false,
marker: {
radius: 10
}
}
},
xAxis: {
gridLineColor: '#ebebeb',
lineColor: '#ebebeb',
minorGridLineColor: '#ebebeb',
tickColor: '#ebebeb',
plotLines: [{
color: '#ebebeb'
}],
showLastLabel: true,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
},
formatter: function () {
return this.value;
}
},
title: {
text: "TEST"
}
},
yAxis: {
gridLineColor: '#ebebeb',
lineColor: '#ebebeb',
minorGridLineColor: '#ebebeb',
tickColor: '#ebebeb',
plotLines: [{
color: '#ebebeb'
}],
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
},
formatter: function () {
return this.value;
}
},
title: {
text: null
}
}
};
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
And the chart I'm applying it to:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'showChart'
},
colors: [{
linearGradient: perShapeGradient,
stops: [
[0, 'rgba(32, 106, 166, 0.3)'],
[1, 'rgba(32, 106, 166, 0)']
]
}, {
linearGradient: perShapeGradient,
stops: [
[0, 'rgba(120, 99, 181, 0.3)'],
[1, 'rgba(120, 99, 181, 0)']
]
},
],
xAxis: [{
type: 'datetime',
labels: {
formatter: function () {
var monthStr = Highcharts.dateFormat('%l:%M %P', this.value);
return monthStr;
}
}
}],
series: [{
name: 'Public Views',
type: 'area',
marker: {
symbol: 'url(/Assets/images/marker_blue.png)'
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2009, 9, 6, 0, 0, 0),
data: [502, 435, 309, 247, 302, 434, 568, 702, 935, 809, 647, 502, 834, 526, 302, 335, 409, 647, 702, 634, 668, 902, 935, 1009]
}, {
name: 'Company Views',
type: 'area',
marker: {
symbol: 'url(/Assets/images/marker_purple.png)'
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2009, 9, 6, 0, 0, 0),
data: [406, 307, 211, 133, 221, 367, 366, 506, 707, 611, 333, 221, 567, 466, 106, 107, 281, 433, 221, 567, 466, 606, 607, 811]
}]
});
I'm working with Highcharts and am having trouble applying x axis label styles through my theme... it works correctly if I apply it when I create a chart.. but the theme options seem to be ignored only for the x axis. The same styles work correctly for the y axis.
Code below. Thanks!
Theme
Highcharts.theme = {
chart: {
zoomType: 'x'
},
plotOptions: {
column: {
borderColor: null,
borderWidth: 1,
borderRadius: 3,
shadow: true
},
line: {
lineWidth: 3,
shadow: false,
marker: {
radius: 10
}
}
},
xAxis: {
gridLineColor: '#ebebeb',
lineColor: '#ebebeb',
minorGridLineColor: '#ebebeb',
tickColor: '#ebebeb',
plotLines: [{
color: '#ebebeb'
}],
showLastLabel: true,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
},
formatter: function () {
return this.value;
}
},
title: {
text: "TEST"
}
},
yAxis: {
gridLineColor: '#ebebeb',
lineColor: '#ebebeb',
minorGridLineColor: '#ebebeb',
tickColor: '#ebebeb',
plotLines: [{
color: '#ebebeb'
}],
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
},
formatter: function () {
return this.value;
}
},
title: {
text: null
}
}
};
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
And the chart I'm applying it to:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'showChart'
},
colors: [{
linearGradient: perShapeGradient,
stops: [
[0, 'rgba(32, 106, 166, 0.3)'],
[1, 'rgba(32, 106, 166, 0)']
]
}, {
linearGradient: perShapeGradient,
stops: [
[0, 'rgba(120, 99, 181, 0.3)'],
[1, 'rgba(120, 99, 181, 0)']
]
},
],
xAxis: [{
type: 'datetime',
labels: {
formatter: function () {
var monthStr = Highcharts.dateFormat('%l:%M %P', this.value);
return monthStr;
}
}
}],
series: [{
name: 'Public Views',
type: 'area',
marker: {
symbol: 'url(/Assets/images/marker_blue.png)'
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2009, 9, 6, 0, 0, 0),
data: [502, 435, 309, 247, 302, 434, 568, 702, 935, 809, 647, 502, 834, 526, 302, 335, 409, 647, 702, 634, 668, 902, 935, 1009]
}, {
name: 'Company Views',
type: 'area',
marker: {
symbol: 'url(/Assets/images/marker_purple.png)'
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2009, 9, 6, 0, 0, 0),
data: [406, 307, 211, 133, 221, 367, 366, 506, 707, 611, 333, 221, 567, 466, 106, 107, 281, 433, 221, 567, 466, 606, 607, 811]
}]
});
- There is no real error.. the xAxis properties set when the chart is created seems to overwrite the xAxis theme options. – Adam Storr Commented Jul 12, 2012 at 21:21
-
I found the issue.. the
[]around thexAxisproperties when I create the chart causes thexAxisoptions in the theme to be ignored.. removing the[]fixed it. – Adam Storr Commented Jul 12, 2012 at 21:45
1 Answer
Reset to default 11yAxis: [{
gridLineColor: '#ebebeb',
lineColor: '#ebebeb',
minorGridLineColor: '#ebebeb',
tickColor: '#ebebeb',
plotLines: [{
color: '#ebebeb'
}],
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
},
formatter: function () {
return this.value;
}
},
title: {
text: null
}
}]
Note the extra [] around the braces for yAxis. Not required for x. As yAxis could have a second y axis.