Remove gridlines in AngularCharts

Question

I am using AngularCharts which is a AgnularJS wrapper for Chart.js. I want to remove all grid lines from my chart so there is just the actual line chart only. But the grids are not being removed.

Controller

 $scope.labelsx2 = [" ", " ", " ", " Time ago ", " ", " ", " "];
 $scope.seriesx2 = [' '];
 $scope.datax2 = [
    [65, 59, 80, 81, 56, 55, 40]
 ]; 
 $scope.options = {
            scaleShowGridLines : false
          };     


 $scope.labelsx2 = [" ", " ", " ", " Time ago ", " ", " ", " "];
 $scope.seriesx2 = [' '];
 $scope.datax2 = [
    [65, 59, 80, 81, 56, 55, 40]
 ]; 
 $scope.options = {
            scaleShowGridLines : false
          };

Chart.html

<canvas id="line" class="chart chart-line" data="datax2" labels="labelsx2" legend="true" series="seriesx2" options="{showTooltips: false}"></canvas>

score 5 · Answer 1 · answered Jul 15 '16 at 11:55

you can apply below option to remove grid lines.This works for me.

$scope.options = {
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false
                    }
        }],
                yAxes: [{
                    gridLines: {
                        display: false
                    }
        }]
            }
        };

Thanks.

score 0 · Answer 2 · answered Jul 13 '16 at 10:19

0

The problem is in the html:

Remove the options="{showTooltips: false}" to chart-options="options"

<canvas id="line" class="chart chart-line" data="datax2" labels="labelsx2" legend="true" series="seriesx2" chart-options="options"></canvas>

answered Jul 13 '16 at 10:19

Karan

1,048
2
20
38

Remove gridlines in AngularCharts

2 Answers2