title: Chartjs change values on resize
body: <p>I'm using chartjs for generating charts on the page. If I resize the canvas the chart change the values on the graph. It happens only if I use my custom plugin.</p>
  
  <pre><code>plugins: [horizonalLinePlugin]
  </code></pre>
  
  <p>If I remove custom plugin it works fine. I'm also not sure what hook should I use. It would be best if the new line I try to render will be behind the grid lines.</p>
  
  <p>Why is this happening?
  Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function median(values) {
    values.sort(function(a, b) {
      return a - b;
    });
  
    if (values.length === 0) return 0
  
    var half = Math.floor(values.length / 2);
  
    if (values.length % 2)
      return values[half];
    else
      return (values[half - 1] + values[half]) / 2.0;
  }
  
  var horizonalLinePlugin = {
    beforeDraw: function(chartInstance) {
      var yValue;
      var yMinValue;
      var yMaxValue;
      var yScale = chartInstance.scales["y-axis-0"];
      var canvas = chartInstance.chart;
      var ctx = canvas.ctx;
      var index;
      var line;
      var style;
  
      if (chartInstance.data.datasets[0].data) {
        yValue = median(chartInstance.data.datasets[0].data);
        yMinValue = chartInstance.options.scales.yAxes[0].ticks.min;
        yMaxValue = chartInstance.options.scales.yAxes[0].ticks.max;
        ctx.lineWidth = 3;
  
        if (yValue) {
          ctx.beginPath();
          ctx.moveTo(26, ((canvas.height - 25) * ((yMaxValue - yValue) / (yMaxValue - yMinValue))));
          ctx.lineTo(canvas.width - 15, ((canvas.height - 25) * ((yMaxValue - yValue) / (yMaxValue - yMinValue))));
          ctx.strokeStyle = '#f4f4f4';
          ctx.fillStyle = '#f4f4f4';
          ctx.stroke();
        }
  
        return;
      }
    }
  };
  //Chart.pluginService.register(horizonalLinePlugin);
  
  var randomScalingFactor = function() {
    return Math.ceil(Math.random() * 10.0 + Math.random() * 60.0);
  };
  
  var config = {
    plugins: [horizonalLinePlugin],
    type: 'line',
    data: {
      labels: ['12.6.', '13.6.', '14.6.', '15.6.', '16.6.', '17.6.', '18.6.', '19.6.', '20.6.'],
      datasets: [{
        label: '',
        backgroundColor: '#2198e8',
        borderColor: '#2198e8',
        borderWidth: 3,
        fill: false,
        pointRadius: 2,
        data: [
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor()
        ],
      }]
    },
    options: {
      responsive: true,
      legend: {
        display: false
      },
      title: {
        display: false,
        text: ''
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
      hover: {
        mode: 'nearest',
        intersect: true
      },
      scales: {
        yAxes: [{
          gridLines: {
            drawBorder: false,
            color: ['#f4f4f4'],
            lineWidth: [1]
          },
          ticks: {
            min: 0,
            max: 100,
            stepSize: 10
          }
        }]
      }
    }
  };
  
  window.onload = function() {
    var ctx = document.getElementById('statistics-graph').getContext('2d');
    window.myLine = new Chart(ctx, config);
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"&gt;&lt;/script&gt;
  &lt;div class="graph-element"&gt;
    &lt;canvas id="statistics-graph"&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for any help.</p>