title: Can I set different fill color based on a given threshold in Chart.js?
body: <p>Is it possible to have different fill colors for values above or below a given threshold in Chart.js (<a href="http://www.chartjs.org/" rel="noreferrer">Chart.js</a>)?</p>
  
  <p>I can't find any option to do this in Chart.js, has anyone done something like this before? I prefer to use Chart.js over Highcharts.</p>
  
  <p>Like this: <a href="http://jsfiddle.net/cdty408f/" rel="noreferrer">Highcharts example</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="height: 400px"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$(function () {
      $('#container').highcharts({
          chart: {
              type: 'area'
          },
          xAxis: {
              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
          },
          yAxis: {
              title: {
                  text: '$'
              }
          },
          title: {
              text: 'Win/Loss'
          },
          series: [{
              name: 'Avg. ($)',
              data: [546, 342, -234, -540, 103, -345],
              threshold: -1,
              negativeFillColor: 'rgba(255,0,0,0.5)',
              fillColor: 'rgba(0,204,0,0.5)',
              lineColor: 'rgba(0,0,0,1)',
              marker: {
                  fillColor: 'rgba(255,255,255,1)',
                  lineColor: 'rgba(0,0,0,1)',
                  lineWidth: 1
              }
          },{
              name: 'User ($)',
              data: [-640, -665, -700, -640, -630, -623],
              fillOpacity: 0,
              lineColor: 'rgba(20, 94, 204, 1)',
              marker: {
                  fillColor: 'rgba(255,255,255,1)',
                  lineColor: 'rgba(20, 94, 204, 1)',
                  lineWidth: 1
              }
          }]
      });
  });
  </code></pre>