How Would I Be Able Display The Title In Two Lines With A Different Font Size For Each Line?

I am using Google Chart API to create a time-line graph and want to modify the title of the graph into two lines. Question: How would I be able display the two lined chart title,

Solution 1:

unbeknownst to the other answer, modifications to the chart, should only be made on the chart's 'ready' event. else, the elements may not exist yet, when the modification is tried.

here, we determine the text content of the label we want to change. find the label containing the content, then reduce the font size of the element.

// listen for chart ready event
google.visualization.events.addListener(chart, 'ready', function () {
  // get label copy to changevar labelContent = options.title.substring(options.title.indexOf('\n') + 1);

  // get chart labelsvar labels = chart.getContainer().getElementsByTagName('text');

  // find chart labelfor (var i = 0; i < labels.length; i++) {
    if (labels[i].textContent === labelContent) {
      // reduce font sizevar currentFontSize = parseInt(labels[i].getAttribute('font-size'));
      labels[i].setAttribute('font-size', currentFontSize - 4);
      break;
    }
  }
});

note: the font size may vary, depending on the size of the chart. unless the font size is explicitly set in the chart options. also, the event listener must be assigned after the chart is created, and before the chart is drawn.

see following working snippet...

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

functiondrawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date \& Time');
data.addColumn('number', "Triggered Events");
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
	[newDate(2021, 11, 31, 0, 0, 0), 0, ''],


	[newDate(2021, 11, 31, 3, 41, 44), 0, ''],
	[newDate(2021, 11, 31, 3, 41, 44), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],

	[newDate(2021, 11, 31, 5, 56, 41), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
	[newDate(2021, 11, 31, 5, 56, 41), 0, ''],

	[newDate(2021, 11, 31, 9, 40, 48), 0, ''],
	[newDate(2021, 11, 31, 9, 40, 48), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],

	[newDate(2021, 11, 31, 12, 11, 5), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
	[newDate(2021, 11, 31, 12, 11, 5), 0, ''],

	[newDate(2021, 11, 31, 12, 45, 57), 0, ''],
	[newDate(2021, 11, 31, 12, 45, 57), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],

	[newDate(2021, 11, 31, 15, 14, 6), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
	[newDate(2021, 11, 31, 15, 14, 6), 0, ''],

	[newDate(2022, 0, 1, 0, 0, 0), 0, '']
]);   //End data.addRows([])var options = {
	title:'Generated 3 Events\nAverage Event Duration: 2h 24m 27s',
	tooltip: {textStyle: {fontName: 'Lucida Console', fontSize: 12} },
	width: 1100,
	height: 500,
	lineWidth: 1,
	chartArea:{width: 900, height:150 },
	series: { 0: { color: '#188785', areaOpacity: 1.0}},
	legend: {position: 'none'},
	enableInteractivity: true,

	hAxis: {
		title: 'Date \& Time',
		titleTextStyle: {bold: false, italic: false},
		format: 'dd/MM/yyyy HH:mm',
		slantedText:true,
		slantedTextAngle:90,
		gridlines: {color: 'none'},
		},  //End hAxisvAxis: {
		title: 'Events Triggered',
		titleTextStyle: {bold: false, italic: false},
		viewWindow: {min: 0, max: 1},
		ticks: [{ v: 0, f: 'Event Off'}, {v: 1, f: 'Event On'}],
		gridlines: { color: 'transparent' }
		},  //End vAxis

	};  //End var optionsvar chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

  // listen for chart ready event
  google.visualization.events.addListener(chart, 'ready', function () {
    // get label copy to changevar labelContent = options.title.substring(options.title.indexOf('\n') + 1);

    // get chart labelsvar labels = chart.getContainer().getElementsByTagName('text');

    // find chart labelfor (var i = 0; i < labels.length; i++) {
      if (labels[i].textContent === labelContent) {
        // reduce font sizevar currentFontSize = parseInt(labels[i].getAttribute('font-size'));
        labels[i].setAttribute('font-size', currentFontSize - 4);
        break;
      }
    }
  });

  chart.draw(data, options);
}

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>

---

EDIT

for multiple lines, use the split method, instead of substring.

then change the font size of all matching labels, except the first.

// get label copy to changevar labelContent = options.title.split('\n');

// get chart labelsvar labels = chart.getContainer().getElementsByTagName('text');

// loop chart title lines, beginning with second linefor (var l = 1; l < labelContent.length; l++) {
  // find chart labelfor (var i = 0; i < labels.length; i++) {
    if (labels[i].textContent === labelContent[l]) {
      // reduce font sizevar currentFontSize = parseInt(labels[i].getAttribute('font-size'));
      labels[i].setAttribute('font-size', currentFontSize - 4);
      break;
    }
  }
}

see following working snippet...

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

functiondrawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date \& Time');
data.addColumn('number', "Triggered Events");
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
	[newDate(2021, 11, 31, 0, 0, 0), 0, ''],


	[newDate(2021, 11, 31, 3, 41, 44), 0, ''],
	[newDate(2021, 11, 31, 3, 41, 44), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],

	[newDate(2021, 11, 31, 5, 56, 41), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
	[newDate(2021, 11, 31, 5, 56, 41), 0, ''],

	[newDate(2021, 11, 31, 9, 40, 48), 0, ''],
	[newDate(2021, 11, 31, 9, 40, 48), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],

	[newDate(2021, 11, 31, 12, 11, 5), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
	[newDate(2021, 11, 31, 12, 11, 5), 0, ''],

	[newDate(2021, 11, 31, 12, 45, 57), 0, ''],
	[newDate(2021, 11, 31, 12, 45, 57), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],

	[newDate(2021, 11, 31, 15, 14, 6), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
	[newDate(2021, 11, 31, 15, 14, 6), 0, ''],

	[newDate(2022, 0, 1, 0, 0, 0), 0, '']
]);   //End data.addRows([])var options = {
	title:'Generated 3 Events\nAverage Event Duration: 2h 24m 27s\nLine 3\nLine 4\nLine 5',
	tooltip: {textStyle: {fontName: 'Lucida Console', fontSize: 12} },
	width: 1100,
	height: 500,
	lineWidth: 1,
	chartArea:{width: 900, height:150 },
	series: { 0: { color: '#188785', areaOpacity: 1.0}},
	legend: {position: 'none'},
	enableInteractivity: true,

	hAxis: {
		title: 'Date \& Time',
		titleTextStyle: {bold: false, italic: false},
		format: 'dd/MM/yyyy HH:mm',
		slantedText:true,
		slantedTextAngle:90,
		gridlines: {color: 'none'},
		},  //End hAxisvAxis: {
		title: 'Events Triggered',
		titleTextStyle: {bold: false, italic: false},
		viewWindow: {min: 0, max: 1},
		ticks: [{ v: 0, f: 'Event Off'}, {v: 1, f: 'Event On'}],
		gridlines: { color: 'transparent' }
		},  //End vAxis

	};  //End var optionsvar chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

  // listen for chart ready event
  google.visualization.events.addListener(chart, 'ready', function () {
    // get label copy to changevar labelContent = options.title.split('\n');

    // get chart labelsvar labels = chart.getContainer().getElementsByTagName('text');

    // loop chart title lines, beginning with second linefor (var l = 1; l < labelContent.length; l++) {
      // find chart labelfor (var i = 0; i < labels.length; i++) {
        if (labels[i].textContent === labelContent[l]) {
          // reduce font sizevar currentFontSize = parseInt(labels[i].getAttribute('font-size'));
          labels[i].setAttribute('font-size', currentFontSize - 4);
          break;
        }
      }
    }
  });

  chart.draw(data, options);
}

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>