Re: [visualization-api] fontName styling for Label not working in Gantt chart

11 views

Skip to first unread message

Katene Mitchell

unread,

Oct 27, 2021, 6:32:59 PM10/27/21

to google-visua...@googlegroups.com

Have you tried using fontName: 'Open Sans', instead of fontName: ‘Open Sans’, ?

Cheers

On Thu, 21 Oct 2021 at 12:19, JAda_1111 <jus...@adatasol.com> wrote:

Hey all. I'm having some trouble getting the fontName setting to work in my Gantt chart.

I have a working chart when I remove just the fontName element, but anytime I put that element back into my code, my chart renders completely blank. There are no errors in the inspector console.

I have tried numerous possible values for fontName - it doesn't seem to matter, it's always blank.

I started with the example from the documentation, have been editing it slowly as I go along and learn things.

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) { return days * 24 * 60 * 60 * 1000; }

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows(<<**DATA_ARRAY**>>);     // placeholder

      var options = {
        height: 350,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
                stroke: '#ffe0b2',
                strokeWidth: 2
              }
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'},
          labelStyle: {
            fontName: ‘Open Sans’,
            fontSize: 18,
            color: '#ffffff'
        }
   }
    };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

I have also noticed that changing the label color doesn't seem to do anything. It doesn't break anything, it just doesn't change anything either. Changing fontSize DOES actually work.

What are acceptable values for the fontName element? Why does defining it seem to break my chart? Why does change the color now work for me?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/b886133e-9203-484f-b9e5-e5f638588d93n%40googlegroups.com.

Regards

Katene

__________

Growing old is inevitable, growing up is optional.

Reply all

Reply to author

Forward

0 new messages