chart.js how to display max value?

Question

I need to display max-value like in the picture on the top right corner. Is it even possible with chart.js options? I assume it will work with plugin, but I have no idea how to make it

new Chart(document.getElementById('chart'), {
type: 'line',
data: {
labels: [0, 1, 2, 3, 4, 5],
datasets: [{
  label: 'series 1',
  data: [0, 2, 4, 3, 1, 0]
}]
},
options: {
maintainAspectRatio: false,
scales: {
  xAxes: [{
    gridLines: {
      display: false, // must be false since we're going to draw our 
      own 'gridlines'!
      color: 'rgba(255, 0, 0, .2)', // can still set the colour.
      lineWidth: 5 // can still set the width.
    }
  }],
  yAxes: [{
    gridLines: {
      display: false
    },
    ticks: {
      beginAtZero: true
    }
  }]
}
},

});

Answer 1

JavaScript code

var maxVal = Math.max.apply(null, data) // 4 document.getElementById("demo").innerHTML = maxVal;

Html Code

MaxValue

you know already y-axis data, so using Math.max.apply function pass the y-axis data array into the function and find the maximum value in the array and store it in the variable finally display the element using either use DOM by id innerhtml or canvas object to display the element in the above graph. alignment using css