TitleAndSubtitle

by kzoon

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style=" height:400px; border: 1px solid black;"></div>

JavaScript

var marginTopCorrection = 11; //default 1, 11 for tight margin 

var titleFontSize = 16; //default 16
var subTitleFontSize = 12;//default 12

var yTitle = titleFontSize-marginTopCorrection ;//default 15
var ySubTitle = yTitle + subTitleFontSize + 3 ; //default 40

var chart = new Highcharts.Chart({
    credits: {
        enabled: false
},


    chart: {
        renderTo: 'container',
        type: 'column', backgroundColor: 'yellow'
    },
    title: {
        text: 'My Title comes here'
        ,y:yTitle 
,        style: {
            color: '#3E576F',
            fontSize: '' + titleFontSize + 'px'
        }

//,
//                y: yTitle
//,
//        style: {
 //           color: '#3E576F',
 //           fontSize: '16px'
//        }


        //defaults:        
        //margin: 15,
        //y:15,
        //style: {
        //    color: '#3E576F',
        //    fontSize: '16px'
        //}
    },
    subtitle: {
        text: 'my subtitle'
        ,y:ySubTitle 
      ,style: {
            color: '#6d869f',
            fontSize: '' + subTitleFontSize + 'px'

        }
//        y: ySubTitle
        //defaults:        
        //y: 30,
        //style: {
        //    color: '#6d869f',
        //    fontSize: '12px'
        //}
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },

    series: [
        {
        data: [29.9, 71.5, 106.4]},
    {
        data: [129.9, 171.5, 150]},
    {
        data: [97, 34, 75]},
    {
        data: [15, 98, 121]}


    ]
});