Radar charts for chartjs always stay filled - charts

Question

I am trying to use the datasetFill option for the radar charts for chartjs and I noticed that the charts always stay filled even when I set datasetFill to false. Here is a link to a fiddle that gives an example of what I'm trying to do http://jsfiddle.net/5gHVY/143/. Here is the code below:
//line chart data
var lineData = {
labels: ["Jan", "Feb", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(255,255,0,100)",
strokeColor: "rgba(63,169,245,1)",
pointColor: "rgba(63,169,245,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
}, {
fillColor: "rgba(255,255,255,0)",
strokeColor: "rgba(102,45,145,1)",
pointColor: "rgba(102,45,145,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}]
}
var lineOptions = {
animation: true,
pointDot: true,
scaleOverride : true,
scaleShowGridLines : false,
scaleShowLabels : true,
scaleSteps : 4,
scaleStepWidth : 25,
scaleStartValue : 25,
datasetFill: false,
};
var radarOptions = {
datasetFill: false,
};
//radar chart data
var radarData = {labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
datasets : [
{
fillColor: "rgba(102,45,145,.1)",
strokeColor: "rgba(102,45,145,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor: "rgba(63,169,245,.1)",
strokeColor: "rgba(63,169,245,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
//Create Line chart
var ctx = document.getElementById("lineChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineData, lineOptions);
//Create Radar chart
var ctx2 = document.getElementById("radarChart").getContext("2d");
var myNewChart2 = new Chart(ctx2).Radar(radarData, radarOptions);

Answer 1

edit: A pull request was just merged to fix this issue (https://github.com/nnnick/Chart.js/pull/1127), you will need to build the chart.js main file though as it is only in the src for the moment, just clone the project and run the gulp build.
The radar draw method is not taking this option into acount. Until a fix is present in the main Chart js you can extend the radar chart and override the draw method to take this option into account
Chart.types.Radar.extend({
// Passing in a name registers this chart in the Chart namespace in the same way
name: "RadarAlt",
draw : function(ease){
var easeDecimal = ease || 1,
ctx = this.chart.ctx;
this.clear();
this.scale.draw();
Chart.helpers.each(this.datasets,function(dataset){
//Transition each point first so that the line and point drawing isn't out of sync
Chart.helpers.each(dataset.points,function(point,index){
if (point.hasValue()){
point.transition(this.scale.getPointPosition(index, this.scale.calculateCenterOffset(point.value)), easeDecimal);
}
},this);
//Draw the line between all the points
ctx.lineWidth = this.options.datasetStrokeWidth;
ctx.strokeStyle = dataset.strokeColor;
ctx.beginPath();
Chart.helpers.each(dataset.points,function(point,index){
if (index === 0){
ctx.moveTo(point.x,point.y);
}
else{
ctx.lineTo(point.x,point.y);
}
},this);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = dataset.fillColor;
if(this.options.datasetFill)
{
ctx.fill();
}
//Now draw the points over the line
//A little inefficient double looping, but better than the line
//lagging behind the point positions
Chart.helpers.each(dataset.points,function(point){
if (point.hasValue()){
point.draw();
}
});
},this);
}
});
here it is in action
Chart.types.Radar.extend({
// Passing in a name registers this chart in the Chart namespace in the same way
name: "RadarAlt",
draw: function(ease) {
var easeDecimal = ease || 1,
ctx = this.chart.ctx;
this.clear();
this.scale.draw();
Chart.helpers.each(this.datasets, function(dataset) {
//Transition each point first so that the line and point drawing isn't out of sync
Chart.helpers.each(dataset.points, function(point, index) {
if (point.hasValue()) {
point.transition(this.scale.getPointPosition(index, this.scale.calculateCenterOffset(point.value)), easeDecimal);
}
}, this);
//Draw the line between all the points
ctx.lineWidth = this.options.datasetStrokeWidth;
ctx.strokeStyle = dataset.strokeColor;
ctx.beginPath();
Chart.helpers.each(dataset.points, function(point, index) {
if (index === 0) {
ctx.moveTo(point.x, point.y);
} else {
ctx.lineTo(point.x, point.y);
}
}, this);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = dataset.fillColor;
if (this.options.datasetFill) {
ctx.fill();
}
//Now draw the points over the line
//A little inefficient double looping, but better than the line
//lagging behind the point positions
Chart.helpers.each(dataset.points, function(point) {
if (point.hasValue()) {
point.draw();
}
});
}, this);
}
});
var radarOptions = {
datasetFill: false,
};
//radar chart data
var radarData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Partying", "Running"],
datasets: [{
fillColor: "rgba(102,45,145,.1)",
strokeColor: "rgba(102,45,145,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
}, {
fillColor: "rgba(63,169,245,.1)",
strokeColor: "rgba(63,169,245,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}]
}
//Create Radar chart
var ctx2 = document.getElementById("radarChart").getContext("2d");
var myNewRadarChart = new Chart(ctx2).RadarAlt(radarData, radarOptions);
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="radarChart" width="800" height="650"></canvas>