CODEWITHSUNDEEP
chartschart.jsradar-chart
user2970660
user2970660

Reputation: 115

Radar charts for chartjs always stay filled

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);

Upvotes: 1

Views: 2367

Answers (1)

Quince
Quince

Reputation: 15000

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>

Upvotes: 1

Related Questions