title: Chart.js Box Annotations Fill Entire Chart
body: <p>I am trying to plot a simple chart, but want to colour the upper and lower parts of the chart red to indicate a value out of range, and the center part of the chart green to indicate an acceptable value.</p>
  
  <p>Using chartjs-plugin-annotation.js and three Box Annotations, I am almost there.  Unfortunately the three boxes don't seem to want to honour the 'yMax' and 'yMin' coordinates I specify.  The boxes expand out to the edges in the Y direction.  This is what I want them to do in the X direction.  But in the Y direction I'm trying to specify the demarcation between the central, green "ok" area and the upper and lower "danger" zones.</p>
  
  <p>If someone can point me in the direction of a solution, I'd very much appreciate it!  Here is my code attempt:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;  
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Test Chart&lt;/title&gt;
      &lt;script src='./moment.js'&gt;&lt;/script&gt;
      &lt;script src='./Chart.js'&gt;&lt;/script&gt;
      &lt;script src='./chartjs-plugin-annotation.js'&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;canvas id='TestChart' width='1200' height='300'&gt;
      &lt;script&gt;
        var user_notes = [ '','','','','Note One','','','','',
                          'Note Two','','','','','','','','','','' ];
        new Chart (
          document.getElementById( 'TestChart' ), {
            'type' : 'line',
            'data' : {
            'datasets' : [{
              'label' : 'Test Chart',
              'fill' : false,
              'borderColor' : '#000000',
              'colour' : '#c0ffa0',           
              'lineTension' : 0.4, 
              'pointHitRadius' : 10,
              'pointRotation' : 45,
              'pointRadius' : [ 5,5,5,5,9,5,5,5,5,9,5,5,5,5,5,5,5,5,5,5 ],
      //          'pointRadius' : (item, data) =&gt; {   // function better but 
      //            console.log( 'TEST pointRadius' );// can't get it to work
      //            return 7;
      //          },
              'pointStyle' : [ 'circle','circle','circle','circle','rect',
                                'circle','circle','circle','circle','rect',
                                'circle','circle','circle','circle','circle',
                                'circle','circle','circle','circle','circle' ],         
      //          'pointStyle' : (item, data) =&gt; {    // function better but
      //            console.log( 'TEST pointStyle' ); // can't get it to work
      //            return 'triangle';
      //          },
              'pointBackgroundColor' : [ '#ffa0c0', '#ffa0c0', '#ffa0c0',
                                          '#c0ffa0', '#c0ffa0', '#c0ffa0',
                                          '#c0ffa0', '#ffa0c0', '#c0ffa0',
                                          '#c0ffa0', '#c0ffa0', '#c0ffa0',
                                          '#c0ffa0', '#c0ffa0', '#c0ffa0',
                                          '#c0ffa0', '#ffa0c0', '#c0ffa0',
                                          '#c0ffa0', '#c0ffa0' ],                 
      // a function call would be better 
      // but can't get either of the following to work
      //          // function type one
      //          'pointBackgroundColor' : (item, data) =&gt; {
      //            console.log( 'pointBackgroundColor TEST' );
      //            return '#c0ffa0';
      //          },
  
      //          // function type two
      //          'pointBackgroundColor' : function( context ) {
      //            var v = context.dataset.data[c_index];
      //            console.log( 'pointBackgroundColor TEST: v = ' + v );
      //            return
      //                (v &lt;= 3.9) || (v &gt;= 6)
      //                    ? '#ffa0c0'   // draw extreme values in red
      //                    : '#c0ffa0';  // else, values in green
      //          },
  
              'data' : [
                  { x: new Date( '2019-11-03 07:19' ), y: 3.9 },
                  { x: new Date( '2019-11-04 07:31' ), y: 3.8 },
                  { x: new Date( '2019-11-05 08:15' ), y: 3.6 },
                  { x: new Date( '2019-11-06 08:20' ), y: 4.2 },
                  { x: new Date( '2019-11-07 08:08' ), y: 4.2 },
                  { x: new Date( '2019-11-08 08:00' ), y: 4.2 },
                  { x: new Date( '2019-11-09 08:18' ), y: 4.4 },
                  { x: new Date( '2019-11-10 07:59' ), y: 3.5 },
                  { x: new Date( '2019-11-11 08:02' ), y: 4.8 },
                  { x: new Date( '2019-11-12 08:23' ), y: 4.4 },
                  { x: new Date( '2019-11-13 07:54' ), y: 4.0 },
                  { x: new Date( '2019-11-14 08:00' ), y: 4.3 },
                  { x: new Date( '2019-11-15 08:11' ), y: 4.2 },
                  { x: new Date( '2019-11-16 08:11' ), y: 4.9 },
                  { x: new Date( '2019-11-17 08:10' ), y: 4.9 },
                  { x: new Date( '2019-11-18 08:15' ), y: 5.8 },
                  { x: new Date( '2019-11-19 07:10' ), y: 6.1 },
                  { x: new Date( '2019-11-20 08:03' ), y: 5.1 },
                  { x: new Date( '2019-11-21 07:51' ), y: 4.7 },
                  { x: new Date( '2019-11-22 07:56' ), y: 4.3 }
              ]
            }]
          },
  
          options: {
            'point' : {
              'borderColor' : '#000000',
            },
  
            'tooltips' : {
              'mode' : 'index',
              'bodyFontSize' : 24,
              'footerFontSize' : 18,
              'footerFontColor' : '#ffeb6d',
              'axix' : 'y',
              'callbacks' : {
                'title' : (item, data) =&gt; {
                  var when = item[0].xLabel.split( ' ' );
                  var newT = when[0] + ' ' + when[1] + ' ' + when[3];
                  return newT.substring(0, newT.length - 3);
                },
                'label' : (item, data) =&gt; {
                  return item.yLabel.toFixed( 1 ) + ' Units';
                },
                'footer' : (item, data) =&gt; {
                  return user_notes[ item[0].index ];
                },
              },
            },        // end tooltips
  
            'legend' : { 
              'onClick' : 'null',
              // 'display' : 'false',
              'position' : 'top',
            },
  
            'scales' : {
              'xAxes' : [ {
                'type' : 'time',
                'ticks' : { 
                  'time' : { 'displayFormats' : { 'day' : 'D MMM' } },
                } 
              } ],
              'yAxes' : [ {
                'display' : 'true',
                'position' : 'right',
                'ticks' : {
                  'suggestedMax' : 9.0,
                  'suggestedMin' : 3.0,
                }
              } ],
            },        // end scales
  
            'annotation' : {
              'drawTime' : 'beforeDatasetsDraw',
              'annotations' : [{
                'type' : 'box',
                'id' : 'top-red',
                'xScaleID' : 'xAxes',
                'yScaleID' : 'yAxes',
                'yMin' : '5.9',        //ignored
                'borderWidth' : 0,
                'borderColor' : 'rgba(255,200,200,0.3)',
                'backgroundColor' : 'rgba(255,200,200,0.3)',
              },{
                'type' : 'box',
                'id' : 'middle-green',
                'xScaleID' : 'xAxes',
                'yScaleID' : 'yAxes',
                'yMax' : '5.9',       // ignored
                'yMin' : '4.0',       // ignored
                'borderWidth' : 0,
                'borderColor' : 'rgba(200,255,200,0.3)',
                'backgroundColor' : 'rgba(200,255,200,0.3)',
              },{
                'type' : 'box',
                'id' : 'bottom-red',
                'xScaleID' : 'xAxes',
                'yScaleID' : 'yAxes',
                'yMax' : '4.0',        // ignored
                'borderWidth' : 0,
                'borderColor' : 'rgba(255,200,200,0.3)',
                'backgroundColor' : 'rgba(255,200,200,0.3)',
              }]
            }         // end annotation
          }       // end options
        }
      );
    &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>