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.

Share:
19,719
Adam Storr
Author by

Adam Storr

Product Design Lead @ Palantir --- Designer/Developer --- Sailor

Updated on June 15, 2022

Comments

  • Adam Storr
    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]
            }]
        });