开发者

Change Font Size Jquery Hightcharts

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'

                        }

           开发者_C百科        },

                    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';

                      }

                   }

                };


You might be looking for itemStyle option of a legend:

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


I am sure the answer given by Igor is good, but if you want to change the text at every place in you graph in one shot, just open the highchart.js file and put the desired font style over there. Just providing the modification which I have done in my case:

style:{fontFamily:' "Exo 2", sans-serif',fontSize:"12px"},backgroundColor:"#FFFFFF"

Here I have changed "Lucida" to "Exo 2". :)


https://www.sitepoint.com/auto-text-fill-resize-plugins/

check this site, you will find 5 ways to resize the size using the jquery, i have tried the first one, it already worked

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜