title: Chart.js changing the color of the max value bar
body: <p>I'm new to JS, I want to create a bar chart where the column with the max value has a different color compared to the others. I can create the chart but I don't manage to access the single column properties. I have been looking for answers on the web but none of the solutions I have found so far helped me. The workflow is the following:</p>
  
  <ol>
  <li>I ask the user for a text input,</li>
  <li>Once the user press a button the script calls a function in python (I use python flask) that returns me an array of values and labels,</li>
  <li>Then a chart appears on the webpage with these values and labels.</li>
  </ol>
  
  <p>Everything works fine, I'm just not able to change the color of a single bar.</p>
  
  <p>Here is the JS:</p>
  
  <pre><code>$(function() {
      $('a#process_input').bind('click', function() {
          $.getJSON('/background_process', {
              smile: $('input[name="text_string"]').val(),
          }, function(data) {
              $("#result").text(data.output);
              var labels = data.labels;
              var values = data.values;
  
              Chart.defaults.global.responsive = false;
  
              var chartData = {
                labels : labels,
                datasets : [{
                    label: 'data_label',
                    fill: true,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data : values,
                    scaleShowLabels: true,
                    spanGaps: false
                  }]
                }
  
                // get chart canvas
              var ctx = document.getElementById("myCanvas").getContext("2d");
  
              // create the chart using the chart canvas
              var myChart = new Chart(ctx, {
                type: 'bar',
                data: chartData,
                options: {
                          scaleShowValues: true,
                          scales: {
                                      yAxes: [{
                                                  ticks: {
                                                          beginAtZero: true
                                                          }
                                              }],
                                      xAxes: [{
                                                  ticks: {
                                                          autoSkip: false
                                                          }
                                              }]
                                  }
                          }
  
                  });
  
          });
  
      });
  });
  </code></pre>
  
  <p>Here is an example of what I mean:
  <img src="https://i.stack.imgur.com/SZVME.png" alt="max_value_different_color"></p>