<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_basic" style="width: 900px; height: 600px;"></div>
JavaScript
google.charts.load('current', {
'packages': ['sankey']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'
];
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'Biomass', 'small HOB', 68 ],
[ 'small HOB', 'Albania', 212 ],
[ 'Biomass', 'stoves', 106 ],
[ 'stoves', 'Albania', 106 ],
[ 'Electricity', 'electric appliance', 551 ],
[ 'electric appliance', 'Albania', 551 ],
[ 'Coal (lignite)', 'small HOB', 2 ],
[ 'LFO', 'small HOB', 71 ],
[ 'LPG', 'small HOB', 71 ],
[ 'other fuel', 'other appliance', 19 ],
[ 'other appliance', 'Albania', 19 ]
]);
// Sets chart options.
var options = {
width: 900,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
But, I need to change font size and type, and not sure how to do it. In the guidelines, it says that next option should be used:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Arial',
fontSize: 12,
color: '#871b47',
bold: true,
italic: true } } },
};
When I paste it, it changes the font type and size, but I loose custom colors that I also need.
Would be grateful if someone could help! Thanks in advance!