title: Adding icons to specific coordinates in chart.js
body: <hr>
  
  <h2>CHART JS</h2>
  
  <p>i am using chart js to plot the chart  my requirement is to plot the icons on the chart on date basis of  the y axis.
  i can able to plot the chart , but i want to plot multiple icons on that chart instead of one icon.
  Below is the working code in html and the chart image link** i've tried the stack overflow links  it's not working <code>can anybody help me out on this</code>
  Edited with new codes which is working</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-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="ja"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Line Chart Test&lt;/title&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"&gt;&lt;/script&gt;
    &lt;script language="JavaScript"&gt;
    var img = new Image();
    img.onload = function () {
    var size = 20;
    
    
      Chart.types.Line.extend({
      name: "LineAlt",
      draw: function() {
        Chart.types.Line.prototype.draw.apply(this, arguments);
  
        var scale = this.scale;
        [
         { x: 1, y: 50 }, 
    { x: 1, y: 45 }, 
    { x: 1, y: 40 }, 
    { x: 1, y: 35 }, 
    { x: 1, y: 30 }, 
    { x: 1, y: 25 }, 
    { x: 1, y: 20 }, 
    { x: 1, y: 15 }, 
    { x: 1, y: 10 }, 
    { x: 2, y: 40 },
    { x: 2, y: 40 },
    { x: 3, y: 30 },
          { x: 4, y: 10 },
    { x: 4, y: 15 }
        ].forEach(function(p) {
          ctx.drawImage(img, scale.calculateX(p.x) - size / 2, scale.calculateY(p.y) - size / 2, size, size);
        })
      }
    });
    
      var data = {
          labels: ["Dec", "Jan", "Feb", "March", "April", "May", "June"],
          datasets: [
              {
                  label: "My Second dataset",
                  fillColor: "rgba(151,187,205,0.2)",
                  strokeColor: "rgba(151,187,205,1)",
                  pointColor: "rgba(151,187,205,1)",
                  pointStrokeColor: "#fff",
                  pointHighlightFill: "#fff",
                  pointHighlightStroke: "rgba(151,187,205,1)",
                  data: [25, 45, 35, 14, 81, 22, 85]
              },{
                  label: "Prime and Fibonacci",
                  fillColor: "rgba(220,220,220,0.2)",
                  strokeColor: "rgba(220,220,220,1)",
                  pointColor: "rgba(220,220,220,1)",
                  pointStrokeColor: "#fff",
                  pointHighlightFill: "#fff",
                  pointHighlightStroke: "rgba(220,220,220,1)",
                  data: [2, 3, 5, 7, 11, 13, 17]
              }
          ]
      };
      var ctx = document.getElementById("lineChart").getContext("2d");
      var options = { };
      var lineChart = new Chart(ctx).LineAlt(data,  options);
    }
    
    img.src = 'D:/WorkSpace/angchart/WebContent/images/MD.png';
    
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="box"&gt;
      &lt;canvas id="lineChart" height="450" width="800"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/ZibEe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZibEe.png" alt="enter image description here"></a></p>
  
  <p>so could any body can help me out of this on how to add a mutiple images in that chart or code</p>