Chartjs-Radar charts for chartjs always stay filled

by

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>

Leave a comment