JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

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';

Chart.pluginService.register({
    afterUpdate: function(chart) {
        chart.config.data.datasets[1]._meta[0].data[7]._model.pointStyle = sun;
        chart.config.data.datasets[1]._meta[0].data[6]._model.pointStyle = cloud;
    }
});

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: ["8:00", "8:15", "8:30", "8:45", "9:00", "9:15", "9:30", "9:45", "10:00", "10:15", "10:30", "10:45"],
    datasets: [
        {
            label: "Percipitation",
            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: "Weather",
            fill: false,
            borderColor: "rgba(192,192,75,1)",
            pointBackgroundColor: "#fff",
            pointRadius: 5,
            data: [4,4.5,6,8,12,15,17,16,14,11,7,5],
        }
    ]
},
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        tooltips: {
        	mode: "label"
        }
    }
});