title: Adding a Title to a Chart.js line graph
body: <p>I'm trying to use fillText to draw on a chart.js canvas after it is rendered and it will not work.  The best I can do is change the font of the chart.  Here is my code.</p>
  
  <pre><code>var options = {
  
      //Boolean - If we show the scale above the chart data           
      scaleOverlay: false,
  
      //Boolean - If we want to override with a hard coded scale
      scaleOverride: false,
  
      //** Required if scaleOverride is true **
      //Number - The number of steps in a hard coded scale
      scaleSteps: null,
      //Number - The value jump in the hard coded scale
      scaleStepWidth: null,
      //Number - The scale starting value
      scaleStartValue: null,
  
      //String - Colour of the scale line 
      scaleLineColor: "rgba(0,0,0,.1)",
  
      //Number - Pixel width of the scale line    
      scaleLineWidth: 1,
  
      //Boolean - Whether to show labels on the scale 
      scaleShowLabels: true,
  
      //Interpolated JS string - can access value
      scaleLabel: "&lt;%=value%&gt;",
  
      //String - Scale label font declaration for the scale label
      scaleFontFamily: "'Arial'",
  
      //Number - Scale label font size in pixels  
      scaleFontSize: 12,
  
      //String - Scale label font weight style    
      scaleFontStyle: "normal",
  
      //String - Scale label font colour  
      scaleFontColor: "#666",
  
      ///Boolean - Whether grid lines are shown across the chart
      scaleShowGridLines: true,
  
      //String - Colour of the grid lines
      scaleGridLineColor: "rgba(0,0,0,.05)",
  
      //Number - Width of the grid lines
      scaleGridLineWidth: 1,
  
      //Boolean - Whether the line is curved between points
      bezierCurve: true,
  
      //Boolean - Whether to show a dot for each point
      pointDot: true,
  
      //Number - Radius of each point dot in pixels
      pointDotRadius: 3,
  
      //Number - Pixel width of point dot stroke
      pointDotStrokeWidth: 1,
  
      //Boolean - Whether to show a stroke for datasets
      datasetStroke: true,
  
      //Number - Pixel width of dataset stroke
      datasetStrokeWidth: 2,
  
      //Boolean - Whether to fill the dataset with a colour
      datasetFill: true,
  
      //Boolean - Whether to animate the chart
      animation: false,
  
      //Number - Number of animation steps
      animationSteps: 60,
  
      //String - Animation easing effect
      animationEasing: "easeOutQuart",
  
      //Function - Fires when the animation is complete
      onAnimationComplete: null
  
  }
  </code></pre>
  
  <p>Chart Data labels and points are arrays.</p>
  
  <pre><code>                   var chartData = {
                          labels: labels,
                          datasets: [
                              {
                                  fillColor: "rgba(220,220,220,0.5)",
                                  strokeColor: "rgba(220,220,220,1)",
                                  pointColor: "rgba(220,220,220,1)",
                                  pointStrokeColor: "#fff",
                                  data: points
                              }
                          ]
                      }
  
                      var ctx = $("#" + item.logon).get(0).getContext("2d");
                      var chart = new Chart(ctx).Line(chartData, options);
  </code></pre>
  
  <p>This is done with JSON data and after the call I have:</p>
  
  <pre><code>                $("canvas").each(function (i, item) {
                      var context = $(this).get(0).getContext("2d");
                      context.textBaseline = 'top';
                      context.fillText('Test', 0, 0);
                  });
  </code></pre>
  
  <p>The graphs just load normally without any text.  If I use the context.font then all of the labels on each canvas is changed.  I have turned off loading animation.  Any ideas?</p>