CODEWITHSUNDEEP
csstwitter-bootstrapfontshighcharts
fatCop
fatCop

Reputation: 2576

How to change the font family of Highchart to Bootstrap css default font family

I want to change the font of title, data label and tooltip to Bootstrap default default font in the pie chart (I'm using Highchart library to show the chart). I'm How can I change these? Tried to add fontFamily but it didn't work.

var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: $(element).attr('id'),
                        backgroundColor: '#F8F8F8'
                    },
                    title: {
                        text: "Space Used by Users",
                        fontFamily: 'Helvetica'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}: {point.sizeText}',
                                style: {
                                    fontSize: '11px'
                                }
                            },
                            showInLegend: true
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.sizeText}</b>'
                    },
                    series: [{
                        type: 'pie',
                        data: [
                            {
                                name: 'Personal Usage',
                                y: scope.item.personalUsage,
                                sizeText: scope.item.personalUsageSizeText
                            },
                            {
                                name: 'Shared Usage',
                                y: scope.item.sharedUsage,
                                sizeText: scope.item.sharedUsageSizeText
                            }
                        ]
                    }]
                });

How to change the font to default bootstrap?

Upvotes: 16

Views: 16153

Answers (1)

majorhavoc
majorhavoc

Reputation: 2415

You are only setting the font for the chart title. The below code sets the font globally for the pie chart.

    Highcharts.setOptions({
    chart: {
        style: {
            fontFamily: 'Helvetica'
        }
    }
   });

Upvotes: 33

Related Questions