title: ChartJS ticks values are not correct
body: <p>I'm working on Angular version <code>11.0.4</code>, I'm using <strong>ng2-charts</strong> version <code>2.4.2</code>.
  I have to render basic line charts, with some custom features.
  One of the features consists of color some grid lines based on external API values.</p>
  <p>Here's an example: for the <strong>yValue 2</strong>  I want to have the red color.
  <a href="https://i.stack.imgur.com/76Zp7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/76Zp7.png" alt="enter image description here" /></a></p>
  <p>Since I haven't found a good solution for this problem, I'm trying this:
  inside the LineChart Options, there's the <strong>yAxes</strong> object inside <strong>scales</strong>.
  There's a series of callbacks ( here's the documentation <a href="https://www.chartjs.org/docs/next/axes/#callbacks" rel="nofollow noreferrer">https://www.chartjs.org/docs/next/axes/#callbacks</a> ) which gives me the values of the ticks after being rendered. Based on those values I update the color values of the grid lines.</p>
  <p>The problem is that every single callbacks that the interface provides give a series of values that are not the ones the chart renders.</p>
  <p>This is what I have written:</p>
  <pre><code>      scales: {
      ...this.lineChartOptions.scales,
      yAxes: [{
        ticks: {
          beginAtZero: true
        }          
       afterTickToLabelConversion: (scale) =&gt; {
          console.log(scale);
          return scale;
        }
      }],
  </code></pre>
  <p>This is what the console.log prints:</p>
  <p><a href="https://i.stack.imgur.com/75j0y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/75j0y.png" alt="enter image description here" /></a></p>
  <p>And this is what the chart renders:</p>
  <p><a href="https://i.stack.imgur.com/uqZYM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uqZYM.png" alt="enter image description here" /></a></p>
  <p>As you can see the console.log prints <strong>10 values from 18 to 0</strong>.
  The chart renders the tick values from 19 to 17.</p>
  <p><strong>HTML code:</strong></p>
  <pre><code>&lt;canvas id=&quot;chartContainer&quot; baseChart width=&quot;400&quot; height=&quot;400&quot; [datasets]=&quot;lineChartData&quot; [labels]=&quot;lineChartLabels&quot;
  [options]=&quot;lineChartOptions&quot; [colors]=&quot;lineChartColors&quot; [legend]=&quot;lineChartLegend&quot; [chartType]=&quot;lineChartType&quot;
  [plugins]=&quot;lineChartPlugins&quot;&gt;
  </code></pre>