CODEWITHSUNDEEP
javascripthighcharts
Amanda
Amanda

Reputation: 12747

Can I set a default color for all texts in Highcharts?

I'm struggling to do something that I think ought to be simple in Highcharts. I want the background dark grey and all the axis labels, title, etc texts light gray.

I can almost accomplish this by adding a lot of "color" declarations, but ... that seems repetitive and I'm sure there's a better way. 

 $(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',
            // WHY CAN't I SET A GLOBAL "COLOR" HERE?
            backgroundColor: '#272b30'
        },
        title: {
            text: "Title Title",
            align: 'left',
            style: {
                // DEFINE IT ONCE FOR THE TITLE
                color: '#99aabb'
            }
        },
        legend: {
            // DEFINE AGAIN FOR LEGEND BORDER
            borderColor: '#99aabb',

            // AND FOR LEGEND ITEMS
            itemStyle: {
                color: '#99aabb'
            }
        },
        xAxis: {
            categories: ["2016", "2017", "2018", "2019", "2020"]                
        },
        yAxis: {
            title: {
                text: 'axis label',
                style: {
                    // DEFINE ONE MORE FOR THE AXIS LABEL
                    color: '#99aabb'
                }
            }    
        },
        series: [{
            name: 'Series',
            data: [61, 55, 67, 88, 59]
        }, {
            name: 'Other Series',
            data: [20, 15, 17, 22, 28]
        }, ]
    });
});

I am confident that I'm missing something super obvious here!

Upvotes: 1

Views: 500

Answers (3)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can define global variable, which will keep color, and then set theme with defined variable.

http://www.highcharts.com/demo/line-basic/grid

But you'll still have to explicitly theme each component to get the color from that variable.

Upvotes: 0

Sergei Zahharenko
Sergei Zahharenko

Reputation: 1524

You can actually do it programmatically... just a little function which will lighten base color for you:

function shadeColor(color, percent) {   
    var num = parseInt(color,16),
    amt = Math.round(2.55 * percent),
    R = (num >> 16) + amt,
    G = (num >> 8 & 0x00FF) + amt,
    B = (num & 0x0000FF) + amt;
    return (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (G<255?G<1?0:G:255)*0x100 + (B<255?B<1?0:B:255)).toString(16).slice(1);
}

then set and use the base color as variable

var baseColor = '272b30'

now you can dynamically can generate your skin.

 $(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',
            // WHY CAN't I SET A GLOBAL "COLOR" HERE?
            backgroundColor: '#' + baseColor
        },
        title: {
            text: "Title Title",
            align: 'left',
            style: {
                // DEFINE IT ONCE FOR THE TITLE
                color: '#' + shadeColor(baseColor,70)
            }
        },
        legend: {
            // DEFINE AGAIN FOR LEGEND BORDER
            borderColor: '#' + shadeColor(baseColor,70),

            // AND FOR LEGEND ITEMS
            itemStyle: {
                color: '#' + shadeColor(baseColor,70)
            }
        },
        xAxis: {
            categories: ["2016", "2017", "2018", "2019", "2020"]                
        },
        yAxis: {
            title: {
                text: 'axis label',
                style: {
                    // DEFINE ONE MORE FOR THE AXIS LABEL
                    color: '#' + shadeColor(baseColor,70)
                }
            }    
        },
        series: [{
            name: 'Series',
            data: [61, 55, 67, 88, 59]
        }, {
            name: 'Other Series',
            data: [20, 15, 17, 22, 28]
        }, ]
    });
});

Upvotes: 0

Anto Jurković
Anto Jurković

Reputation: 11258

You can color legend using itemStyle, for example:

legend: {
            itemStyle: {
                color: '#000000',
                fontWeight: 'bold'
            }
        },

See docs Highchart Options Reference

Upvotes: 1

Related Questions