Chart.js Custom Image for Each Point
<p>I'm using Chart.js and I'm looking for help with custom images for each point on a scatter graph. I've tried using a javascript array of images but it isn't working. I'm new to canvas and html5.</p>

<p>What I would like is for each point to be a small profile picture of the user instead of a circle.</p>

<p>An example would be greatly appreciated.</p>

<p>I currently have:</p>

<pre><code>var ctx = document.getElementById("member-graph-scatter");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: 'Miles / Feet',
                data: [&lt;?php echo $member_scatter_graph_miles_climbing; ?&gt;],
                backgroundColor: "rgba(255,99,132,0.6)",
                borderColor: "rgba(75,192,192,1)",
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Feet Climbed (ft)'
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Miles Ridden (miles)'
                    },
                    type: 'linear',
                    position: 'bottom'
                }]
            },
            showLines: false
        }
    });
</code></pre>

<p>This graph works fine, however, the points are obviously default circles.</p>

<p>According to documentation I need to use:</p>

<p>"If the option is an image, that image is drawn on the canvas using drawImage. Image, Array" viewable at: <a href="http://www.chartjs.org/docs/" rel="noreferrer">http://www.chartjs.org/docs/</a></p>