title: Gradient color for each bar in a bar graph using ChartJS
body: <p>I'm trying to create a bar graph using ChartJS, which will look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/8W60c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8W60c.png" alt="enter image description here"></a></p>
  
  <p>I want to know how can I add gradient color for <strong>each</strong> of the bars separately, <strong>and</strong> according to their heights.</p>
  
  <p>I found a very close solution <a href="https://stackoverflow.com/questions/29447579/chart-js-add-gradient-instead-of-solid-color-implementing-solution">here</a>, but it sets the <code>createLinearGradient</code> for the whole graph, not for individual bars.</p>
  
  <p>Also, <a href="https://stackoverflow.com/questions/25594478/different-color-for-each-bar-in-a-bar-chart-chartjs">this</a> solution is more closer, if I create gradients for each bars, but then, I want to set gradients according to the bars height.</p>
  
  <p>Is there a way to specify <code>stopPoints</code> according to the bar height, and not coordinates on the <code>&lt;canvas /&gt;</code> element?</p>
  
  <p>Or maybe a way to <em>calculate</em> graph coordinates according to a specific bar height?</p>
  
  <p>Thanks in advance :)</p>