title: Chart.JS - show values on top of points
body: <p>Good evening, </p>
  
  <p>I'm trying to build a line chart that represents API response time. The problem is that I didn't find any solution in Chart.JS documentation. Is there any native solution or any solution using canvas api? </p>
  
  <p>I want to get the chart looking like this:
  <a href="https://i.stack.imgur.com/ZRPKj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZRPKj.png" alt="enter image description here"></a></p>
  
  <p>Here is the code that I've used to generate the chart</p>
  
  <pre><code>&lt;script&gt;
      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {
          type: 'line',
          data: {
              labels: hoursArrFirst,
  
              datasets: [{
                  label: 'First Brand API',
                  data: timeArrProftit,
                  borderWidth: 1,
                  backgroundColor: [
                      'rgba(255, 99, 132, 0.05)',
                      'rgba(255, 159, 64, 0.05)'
                  ],
                  borderColor: [
                      'rgba(255,99,132,1)',
                      'rgba(255, 59, 64, 1)'
                  ]
              },{
                  label: 'Second Brand API',
                  data: timeArrSecond,
                  borderWidth: 1,
                  backgroundColor: [
                      'rgba(132, 255, 99, 0.05)',
                      'rgba(64, 255, 159, 0.05)'
                  ],
                  borderColor: [
                      'rgba(32,155,99,1)',
                      'rgba(64,155, 59, 1)'
                  ]
              },{
                  label: 'Third Brand API' ,
                  data: timeArrThird,
                  borderWidth: 1,
                  backgroundColor: [
                      'rgba(32, 99, 255, 0.05)',
                      'rgba(64, 59, 255, 0.05)'
                  ],
                  borderColor: [
                      'rgba(32, 99, 120, 1)',
                      'rgba(64, 59, 120, 1)'
                  ]
              }]
  
  
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
          }
      });
  
  
  &lt;/script&gt;
  </code></pre>