Change Font Size Jquery Hightcharts

Question

is there any way to change font size of chart in hightcharts jquery?? i've tried the fontsize option, but it doesn't works at all..

i tried to make the legend font smaller so that it can fit to the cart with no new line created if the legend to long. maybe anyone ever tried it??

here is my script:

options = {

                   chart: {

                    backgroundColor: {

                    linearGradient:[0, 0, 500, 500],

                    stops: [

                        [0, 'rgb(255,255,255)'],

                        [1, 'rgb(237,236, 250)']]},

                    type:    tGraf,

                    renderTo: contGrafik,

                    defaultSeriesType: 'column',

                    width: sWidth

                   },

                   title: {

                      text: 'Human Resources',

                      style: {

                            font: 'normal 14px Verdana, sans-serif',

                            color : 'black'

                        }

                   },

                    subtitle: {

                        text: '',

                        style: {

                            font: 'normal 11px Verdana, sans-serif',

                            color : '#000099'

                        }

                    },

                   xAxis: {

                    title: {

                        text : ''

                    },

                    labels: {

                        rotation: 0,

                        align: 'right',

                        style: {

                            font: 'normal 11px Verdana, sans-serif',

                            color : 'black'

                        }

                     },

                   },

                   yAxis: {

                        allowDecimals : false ,

                       labels: {

                        align: 'right',

                            style: {

                                font: 'normal 11px Verdana, sans-serif',

                                color : 'black'

                            }

                        },

                        gridLineColor: '#EEEFE1',

                        title: {

                            text: 'Employees',

                            style: {

                                font: 'normal 13px Verdana, sans-serif',

                                color : 'black'

                            }

                        }

                   },

                    plotOptions: {

                    column: {

                        dataLabels : {

                            enabled : true,

                            formatter: function() {

                                 return this.y;

                              }

                            },

                        cursor: 'pointer'

                        }},

                    legend: {

                        itemWidth : uLegend, 
                        style: {

                                font: 'normal 5px Verdana, sans-serif',

                                color : 'black',

                            }

                        symbolPadding: 2,

                        symbolWidth: 15,

                        backgroundColor: '#FFFF99',

                        itemStyle: {

                            cursor: 'pointer',

                            color: '#3E576F'

                        },

                        width: 600,

                        align: 'center',

                        layout: 'horizontal'},

                    tooltip: {

                      formatter: function() {

                         return '<b>'+ this.series.name +'</b><br/>'+this.y + ' Orang';

                      }

                   }

                };

Solution

You might be looking for itemStyle option of a legend:

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