angular chart is not visible even though it's there in the page

Question

angular chart is not visible even though it's there in the page

1.3k views Asked by CDR At 05 October 2017 at 16:32

I am working with angular-chart.js and it's not visible in my page, I have put the charts in the directive.

Code I used:

<div class="row">
    <div class="cold-md-12">
        <canvas class="chart chart-line"
                chart-data="data"
                chart-labels="labels"
                chart-series="series"
                chart-options="options"
                chart-dataset-override="datasetOverride"
                chart-click="onClick"
                style="display:block;width:500px;height:400px;">
        </canvas>
    </div>
</div>

Controller:

app.controller('detailsController',['$scope',function($scope){

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
      ];

    $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];

    $scope.options = {
        scales: {
          yAxes: [
            {
              id: 'y-axis-1',
              type: 'linear',
              display: true,
              position: 'left'
            },
            {
              id: 'y-axis-2',
              type: 'linear',
              display: true,
              position: 'right'
            }
          ]
        }
      };
}]);

The controller was placed correctly and the developer tools are not showing any error, also I get the element only problem is the visibility of the map.

Original Q&A

There are 3 answers

**Sajeetharan** · Answer 1 · 2017-10-05 16:38:07

It works fine with the following,

DEMO

angular.module("app", ["chart.js"])


.controller("ChartCtrl", function($scope) {
  $scope.moisture = {heading:"Moisture"};
    $scope.ph = {heading:"Ph Level"};
    $scope.tempreture = {heading:"Soil Temp"};
    $scope.water = {heading:"Environment"};

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
      ];

    $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];

    $scope.options = {
        scales: {
          yAxes: [
            {
              id: 'y-axis-1',
              type: 'linear',
              display: true,
              position: 'left'
            },
            {
              id: 'y-axis-2',
              type: 'linear',
              display: true,
              position: 'right'
            }
          ]
        }
      };

});

<!DOCTYPE html>
<html>
<head>
  <title>radar Chart</title>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>   
</head>
<body ng-app="app">
  <div ng-controller="ChartCtrl" style="width:360px">
       <canvas class="chart chart-bar"  chart-click="onClick" chart-data="data" chart-labels="labels" chart-options="options"  ></canvas>
  </div>
 </body>
</html>

**Naren Murali** · Answer 2 · 2017-10-05 16:39:50

The code seems fine. Since you have not provided the complete code with the issues, I can only guess.

Did you include 'chart.js' in the module dependencies (angular.module('chartDemo', ['chart.js'])).
Did you include all the libraries needed.

Please find below a JSFiddle for the same. Let me know if the issue persists, also please replicate the issue using the provided JSFiddle and share back!

JSFiddle Demo

**Sibaram Sahu** · Answer 3 · 2018-10-10 14:00:02

Update the plugins

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
 <script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>

http://plnkr.co/edit/d6T8TpXJiKpXplJrsOAS?p=preview

Be carefull about the angular-chart.min.js file.

TechQA.

angular chart is not visible even though it's there in the page

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULAR-CHART

Related Questions in ANGULAR-CHARTIST.JS

Popular Questions

Popular Tags

Trending Questions