[Solved]-Can I specify a different font size for each row of text in Chart Title?-Chart.js

you can to use filltext() method using chart.js version: 2.7.3

write "network!" and "stackoverflow" (with gradient) on the canvas, using filltext():

var c = document.getelementbyid("mycanvas");
var ctx = c.getcontext("2d");

ctx.font = "20px georgia";
ctx.filltext("network", 10, 50);

ctx.font = "30px verdana";
// create gradient
var gradient = ctx.createlineargradient(0, 0, c.width, 0);
gradient.addcolorstop("0"," magenta");
gradient.addcolorstop("0.5", "blue");
gradient.addcolorstop("1.0", "red");
// fill with gradient
ctx.fillstyle = gradient;
ctx.filltext("stackoverflow", 10, 90);

the filltext() method draws filled text on the canvas. the default color of the text is black. use the font property to specify font and font size, and use the fillstyle property to render the text in another color/gradient.

my fiddle example

update -> you can use animations callbacks (onprogress or oncomplete) to do that eg:

options: {
        animation: {
            onprogress: function(animation) {
                // code above
            }
        }
    }

update 2 -> complete code

var ctx = document.getelementbyid('mychart').getcontext('2d');
var mychart = new chart(ctx, {
    type: 'bar',
    data: {
        labels: ['red', 'blue', 'yellow', 'green', 'purple', 'orange'],
        datasets: [{
            data: [2, 2, 3, 5, 2, 3],
            backgroundcolor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            bordercolor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderwidth: 1
        }]
    },
    options: {
    tooltips: {
         enabled: false
    },
      legend: {
          display: false
      },
        scales: {
            yaxes: [{
                ticks: {
                    beginatzero: true
                }
            }]
        },
        animation: {
            onprogress: function(animation) {
                var c = document.getelementbyid("mychart");
                var ctx = c.getcontext("2d");

                ctx.font = "20px georgia";
                ctx.filltext("1 - network", 45, 30);                

                ctx.font = "30px verdana";
                // create gradient
                var gradient = ctx.createlineargradient(0, 0, c.width, 0);
                gradient.addcolorstop("0", "magenta");
                gradient.addcolorstop("0.5", "blue");
                gradient.addcolorstop("1.0", "red");
                // fill with gradient
                ctx.fillstyle = gradient;
                ctx.filltext("2 - stackoverflow", 45, 70);                
            }
        }
    }
});

full fiddle

i hope helps!