How to make label font size responsive?

[stmalk]

Hi, I'm trying to make both plugin data labels as well as X-Axis tick labels responsive so they change font size according to screen resolution. I couldn't find any solution to this issue and so far a simple bar chart does not resize properly as labels start to overlap and don't fit the boundaries.
I tried to change font size dynamically by adding a plugin:

plugins: [{
    beforeDraw: function(c) {
      var chartHeight = c.chart.height;
      c.scales['x-axis-0'].options.ticks.fontSize = chartHeight * 4 / 100;
    }
  }],

but it does nothing.

Is there any way to achieve that?

Thank you

Edit(SB): snippet has been moved in this jsfiddle

[simonbrunel]

That should be easy for the data labels using scriptable options and context.chart.width (fiddle):

font: function(context) {
  var width = context.chart.width;
  var size = Math.round(width / 32);
    return {
      size: size,
      weight: 600
    };
}

However, this plugin don't deal with axis tick labels, you will have better results asking stackoverflow.