[Chartjs]-How to position chart details next to a chart responsive for multiple devices?

Chart.plugins.register({
   chartUpdated: false,
   preload: false,
   imageLoaded: false,
   image: new Image(),
   loadImage: function(chart) {
      var _this = this;
      this.image.onload = function() {
         _this.imageLoaded = true;
         _this.drawScale(chart, this);
      }
      this.image.src = 'https://i.imgur.com/YDRy5jA.png'; // image URL
   },
   drawScale: function(chart, img) {
      var ctx = chart.ctx,
         y_axis = chart.scales['y-axis-0'],
         topY = y_axis.top,
         bottomY = y_axis.bottom,
         scaleHeight = bottomY - topY,
         scaleOffset = scaleHeight * (img.width / img.height * 100) / 100;
      chart.options.layout = {
         padding: {
            left: scaleOffset
         }
      }
      ctx.drawImage(img, 0, topY, scaleOffset, scaleHeight);
      if (!this.chartUpdated) {
         chart.update();
         this.chartUpdated = true;
      }
   },
   afterDraw: function(chart, ease) {
      if (!this.preload) {
         this.loadImage(chart);
         this.preload = true;
      } else if (this.imageLoaded) this.drawScale(chart, this.image);
   }
});

Chart.plugins.register({
   beforeDraw: function(chart) {
      var ctx = chart.chart.ctx,
         x_axis = chart.scales['x-axis-0'],
         topY = chart.scales['y-axis-0'].top,
         bottomY = chart.scales['y-axis-0'].bottom;
      x_axis.options.gridLines.display = false;
      for (i = 0; i <= x_axis.ticks.length; i++) {
         var x = i === x_axis.ticks.length ?
            x_axis.right :
            x_axis.getPixelForValue(x_axis.ticks[i]);
         ctx.save();
         ctx.beginPath();
         ctx.lineWidth = 1;
         ctx.strokeStyle = x_axis.options.gridLines.color;
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.stroke();
         ctx.restore();
      }
   }
});

var options = {
   type: 'bar',
   data: {
      labels: ["1", "2", "3", "4", "5"],
      datasets: [{
         borderWidth: 2,
         borderColor: "#5d5d5d",
         pointBorderColor: "#5d5d5d",
         pointBackgroundColor: "#5d5d5d",
         pointBorderWidth: 5,
         type: 'line',
         data: [26, 26, 33, 28, 30],
         fill: false,
         lineTension: 0
      }, {
         borderWidth: 3,
         pointBorderColor: "#b8b8b8",
         pointBackgroundColor: "#b8b8b8",
         pointBorderWidth: 10,
         type: 'line',
         data: [26, 26, 29, 28, 29],
         fill: false,
         lineTension: 0
      }, {
         data: [0, 0, 0, 0, 0],
         fill: false,
         lineTension: 0
      }]
   },
   options: {
      responsive: true,
      //maintainAspectRatio: false,
      hover: {
         mode: null
      },
      legend: {
         display: false
      },
      tooltips: {
         enabled: false
      },
      hover: {
         mode: null
      },
      scales: {
         xAxes: [{
            gridLines: {
               // drawBorder: false,
            },
         }],
         yAxes: [{
            display: false,
            ticks: {
               suggestedMin: 0,
               max: 60,
               beginAtZero: true
            }
         }]
      }
   }
}

var ctx = document.getElementById('canvas').getContext('2d');
var myChart = new Chart(ctx, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas" width="400"></canvas>