CODEWITHSUNDEEP
javascriptchartsfontsgoogle-visualization
wordsforthewise
wordsforthewise

Reputation: 15787

Change font on google bar chart

I'm trying to change the font for everything on a google bar chart. It works for everything but the tooltip. At least, I think it's called the tooltip--it's the font that shown when you mouse over a bar. I think I'm doing it correctly according to the docs:

<!doctype html>
<html>
    <head>
        <style>
            @font-face {
                font-family: bebas;
                src: url(BebasNeue.otf);
            }
        </style>
    </head>
    <body>
        <h1 style="font-family:bebas;">This font changed</h1>
        <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
               <div id="cheese_plot" style="width: 900px; height: 500px; font-family:bebas;"></div>

        <script type="text/javascript">
            google.setOnLoadCallback(drawStuff);

            var rawdata = [["Swiss", 90],
                ["Cheddah", 75],
                ["'Merican", 35],
                ["Le bleu", 65],
                ['Stinky', 70]];
            var labels = [['Cheese', 'Pieces']];

            var fullArray = labels.concat(rawdata);

            function drawStuff() {
                var data = new google.visualization.arrayToDataTable(
                    fullArray
                );



                var options = {
                    annotations: {textStyle: { fontName: 'bebas' }},
                    hAxis: {textStyle: { fontName: 'bebas' }, titleTextStyle: { fontName: 'bebas' }},
                    vAxis: {textStyle: { fontName: 'bebas' }, titleTextStyle: { fontName: 'bebas' }},
                    titleTextStyle: { fontName: 'bebas' },
                    tooltip: {textStyle: {fontName: 'bebas' }},
                    fontName: 'bebas',
                    fontSize: 24,
                    title: 'Cheeseses',
                    width: 900,
                    legend: { position: 'none' },
                    chart: { title: 'Cheese',
                    subtitle: 'pieces' },
                    bars: 'horizontal',
                    axes: {
                    x:  {0: { side: 'top', label: 'Pieces'}}},
                    bar: { groupWidth: "90%" }
                };

                var chart = new google.charts.Bar(document.getElementById('cheese_plot'));
                chart.draw(data, google.charts.Bar.convertOptions(options));
              };
        </script>
    </body>
</html>

Here are the docs: https://developers.google.com/chart/interactive/docs/gallery/barchart?hl=it#data-format

I am trying to use a custom font I got from here: http://www.dafont.com/bebas-neue.font

Is this a google charts bug, am I doing something wrong; is this even possible?

Upvotes: 1

Views: 3277

Answers (1)

Charles Clayton
Charles Clayton

Reputation: 17966

Material Charts are still in beta so convertOptions probably just isn't working for the tooltip. Use CSS instead.

#cheese_plot text{
    font-family:'bebas' !important;
}

Edit: The tooltips are nested within two <g> elements, whereas none of the other text blocks are, so you can isolate the tooltip CSS like so if you'd like:

#cheese_plot g g text{
    font-family:'bebas' !important;
    fill:red !important;
}

JSFiddle

Upvotes: 3

Related Questions