How to add a border to the title in highcharts

1
votes

I want to add custom css rules to the title of a chart generated by highcharts. More precisely i am trying to add a backgound and a border. i tried several approaches however the most stable one is as follows; 

 title: {
            style: {
                color: '#FF00FF',
                fontWeight: 'bold',
                background-color: 'green',
                border: '1px'
            }
        },

This code works for the color and weight of the font but other options do not work , i also tried (backgroundColor)

ex.=> http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/title/style/

1
javascriptcsshighcharts

1 Answers

10
votes

The problem is that SVG text elements doesn't have border property, so it can't be set. Solution then is to set useHTML:true for title, and render HTML tags instead. For example: http://jsfiddle.net/3bQne/668/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    title: {
        useHTML: true,
        style: {
            color: '#FF00FF',
            fontWeight: 'bold',
            'background-color': 'green',
            border: '1px solid black'
        }
    },
    xAxis: {
        categories: ['01/02/2012','01/03/2012','01/04/2012','01/05/2012','01/06/2012','01/07/2012'],
        labels: {
            rotation: -90,
            align: 'right'
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]        
    }]
});