Highcharts -- Can't apply style to x axis labels
19,719
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
}
}]
Note the extra [] around the braces for yAxis. Not required for x. As yAxis could have a second y axis.
Author by
Adam Storr
Product Design Lead @ Palantir --- Designer/Developer --- Sailor
Updated on June 15, 2022Comments
-
Adam Storr almost 2 years
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] }] });