Is it possible to have different fill colors for values above or below a given threshold 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.
Like this: Highcharts example
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
}
}]
});
});
I did a similar thing using gradientStroke command, then applying this to the 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 of the output can be seen here: http://neophytte.mine.nu/portfolio/skills.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With