add image on data point

using pointstyle add image on any point

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

JavaScript

var ctx = document.getElementById("myChart").getContext("2d");


var sun = new Image();
sun.src = 'https://i.imgur.com/yDYW1I7.png';

var cloud = new Image();
cloud.src = 'https://i.imgur.com/DIbr9q1.png';


var myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [
        {
            label: "London",
            fill: false,
            borderColor: "rgba(192,192,75,1)",
            pointBackgroundColor: "#fff",
            pointRadius: 5,
            pointStyle:sun,
            data: [4,4.5,6,8,12,15,17,16,14,11,7,5],
        }
    ]
},
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        tooltips: {
        	mode: "label"
        }
    }
});