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
Hi
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