CSS Question

Google visualization - Change size legend AnnotationChart

I have a AnnotationChart in my page with several columns. When the chart is built the legends that are created in the top have a small fontsize. It's possible to increase the font size of this legend?

I created a plunker with a small example of this kind of chart.



google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Kepler-22b mission');
data.addColumn('string', 'Kepler title');
data.addColumn('string', 'Kepler text');
data.addColumn('number', 'Gliese 163 mission');
data.addColumn('string', 'Gliese title');
data.addColumn('string', 'Gliese text');
data.addRows([
[new Date(2314, 2, 15), 12400, undefined, undefined,
10645, undefined, undefined],
[new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
15766, 'Gallantors', 'First Encounter'],
[new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
34334, 'Gallantors', 'Statement of shared principles'],
[new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
66467, 'Gallantors', 'Mysteries revealed'],
[new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
79463, 'Gallantors', 'Omniscience achieved']
]);

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

var options = {
displayAnnotations: true,
legendPosition: 'newRow',
displayZoomButtons: false
};

chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id='chart_div' style='width: 900px; height: 500px;'></div>




Answer Source

you could use css to change the font-size...

#chart_div_AnnotationChart_legendContainer {
  font-size: 12pt;
}

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['annotationchart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Kepler-22b mission');
  data.addColumn('string', 'Kepler title');
  data.addColumn('string', 'Kepler text');
  data.addColumn('number', 'Gliese 163 mission');
  data.addColumn('string', 'Gliese title');
  data.addColumn('string', 'Gliese text');
  data.addRows([
    [new Date(2314, 2, 15), 12400, undefined, undefined,
                            10645, undefined, undefined],
    [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                            12374, undefined, undefined],
    [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                            15766, 'Gallantors', 'First Encounter'],
    [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                            34334, 'Gallantors', 'Statement of shared principles'],
    [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                            66467, 'Gallantors', 'Mysteries revealed'],
    [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                            79463, 'Gallantors', 'Omniscience achieved']
  ]);

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

  var options = {
    displayAnnotations: true,
    legendPosition: 'newRow',
    displayZoomButtons: false
  };

  chart.draw(data, options);
}
#chart_div_AnnotationChart_legendContainer {
  font-size: 12pt;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id='chart_div' style='width: 900px; height: 500px;'></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download