Is it possible to set a different fill color based on a given threshold value in Chart.js?

Question

Is it possible to have different fill colors for values ​​above or below a given threshold value in Chart.js ( Chart.js )?

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.

Example: Example high-level charts

HTML

<script src="http://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 400px"></div> 

Js

 $(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 } }] }); }); 

Answer 1

I did a similar operation using the gradient command, then applied this to backgroundColor:

 var ctx = document.getElementById("YearsExperience").getContext("2d"); var gradientStroke = ctx.createLinearGradient(0, 1200, 0, 0); gradientStroke.addColorStop(0, "#80b6f4"); gradientStroke.addColorStop(0.2, "#94d973"); gradientStroke.addColorStop(0.4, "#80b6f4"); gradientStroke.addColorStop(1, "#94d973"); var YearsExperience = new Chart(ctx, { type: 'bar', data: { labels: ArrLabel[idx], datasets: [{ label: 'Years of experience', data: ArrData[idx], backgroundColor: gradientStroke }] }, options: { scales: { xAxes: [{gridLines: {display:false}}], yAxes: [{ ticks: { beginAtZero:true } }] }, events: ['none'],animation: { easing: "easeInOutBack" } } }); 

An example output can be seen here: http://neophytte.mine.nu/portfolio/skills.html