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,
        xAxisID: "bottom-x-axis",
        data: [7, 7, 9.5, 8.5, 18, 22, 50.5, 26.5, 23.5, 18, 14, 9.5],
      },
      {
        label: "Weather",
        labels: ['Up', 'down', 'left', 'right', 'right', 'right', 'right', 'right', 'right', 'right', 'right', 'right'],
        fill: false,
        borderColor: "rgba(192,192,75,1)",
        pointBackgroundColor: "#fff",
        pointRadius: 5,
        xAxisID: "top-x-axis",
        data: [7, 7, 9.5, 8.5, 18, 22, 50.5, 26.5, 23.5, 18, 14, 9.5]
      },
      {
        label: "Direction",
        fill: false,
        borderColor: "rgba(192,192,75,1)",
        pointBackgroundColor: "#fff",
        pointRadius: 5,
        data: [100, 4.5, 6, 19, 12, 15, 17, 10, 10, 11, 7, 5],
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        id: "top-x-axis",
        type: "linear",
        position: "top",
      }, {
        id: "bottom-x-axis",
        type: "linear",
        position: "bottom",
      }],
    },
    tooltips: {
      mode: "label"
    },
  }
});