CODEWITHSUNDEEP
javascriptchartschart.js
Yerlan Yeszhanov
Yerlan Yeszhanov

Reputation: 2439

chart.js how to display max value?

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
    }
  }]
}
},

});

enter image description here

Upvotes: 0

Views: 1825

Answers (1)

siva adhithya
siva adhithya

Reputation: 69

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

Upvotes: 1

Related Questions