Adding Image inside Linechart points in ChartJs - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Adding Image inside Linechart points in ChartJs

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from   w  w w .j  a va  2s .  c  o  m*/
var ctx = document.getElementById("myChart").getContext("2d");
var sun = new Image();
sun.src = 'http://www.java2s.com/style/demo/Opera.png';
var cloud = new Image();
cloud.src = 'http://www.java2s.com/style/demo/Opera.png';
Chart.pluginService.register({
    afterUpdate: function(chart) {
        chart.config.data.datasets[0]._meta[0].data[7]._model.pointStyle = sun;
        chart.config.data.datasets[1]._meta[0].data[2]._model.pointStyle = cloud;
    }
});
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [
        {
            label: "Tokyo",
            fill: false,
            borderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointRadius: 5,
            data: [7,7,9.5,14.5,18,22,25.5,26.5,23.5,18,14,9.5],
        },
        {
            label: "London",
            fill: false,
            borderColor: "rgba(192,192,75,1)",
            pointBackgroundColor: "#fff",
            pointRadius: 5,
            data: [14,4.5,16,8,2,1,7,16,14,11,7,5],
        }
    ]
},
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        tooltips: {
           mode: "label"
        }
    }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" height="200"></canvas>  
   </body>
</html>

Related Tutorials