[Solved]-Making the labels responsive in chart js-Chart.js

You can do this, but it's a bit hack-y.

First the data labels. In the datalabels config section, you can try something like:

            /* Adjust data label font size according to chart size */
            font: function(context) {
                var width = context.chart.width;
                var size = Math.round(width / 32);

                return {
                    weight: 'bold',
                    size: size
                };
            }

Change the size calculation as necessary.

For the y-axis labels, there's an answer here, however apparently since Chart.js 2.7.0, the line:

c.scales['y-axis-0'].options.ticks.fontSize

..should be changed to:

c.scales['y-axis-0'].options.ticks.minor.fontSize

(ref)

So to scale the y-axis labels font size according to chart height, it might look like:

plugins: [{
    /* Adjust axis labelling font size according to chart size */
    beforeDraw: function(c) {
        var chartHeight = c.chart.height;
        var size = chartHeight * 5 / 100;
        c.scales['y-axis-0'].options.ticks.minor.fontSize = size;
    }
}]

Note: This requires "maintainAspectRatio:" to be set to "true".

There's still one problem however, and that's that the part of the chart containing the y-axis labels will remain at the same pixel width even when resized.

We need to also resize this area to keep it at a constant % of the overall chart width, e.g. 40%, instead of a fixed pixel width (added to yAxes config section):

        /* Keep y-axis width proportional to overall chart width */
        afterFit: function(scale) {
            var chartWidth = scale.chart.width;
            var new_width=chartWidth*0.4;

            scale.width = new_width;
        }

(You might not notice this as a problem with your original example, since there is a oversized line that seems to cause the y-axis width to keep expanding when the window is enlarged. But when the labels don't overflow, then the width stays constant unless the above is used.)

Complete jsFiddle: https://jsfiddle.net/0kxt25v3/2/ (fullscreen)

I'm not sure about wrapping labels on to the next line, you might just need to pre-process the labels to limit the maximum number of characters per label.

I also haven't attempted to scale the x-axis label font sizes, but it should be easy enough to add it in to the "beforeDraw:" section.