The chart is not showing up on Angular-Chart.js

Having trouble with Angular-chart.js and can't seem to get it working. Here is the code I have for my JavaScript and HTML page:


(function(){
 angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];
 });
})(); 


<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js
    "></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css
    " />
    <script src="angular-chart.min.js
    "></script>
    <script src="app.js"></script>
</head>

<body ng-app="app">
    <div ng-controller="BarCtrl">
        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"></canvas>
    </div>

</body>

</html>

Struggling to find where the error might be, any help would be greatly appreciated.

Answer №1

It appears that angular-chart.js may not fully support the latest version 2 of Chart.js. Below is an example showcasing a functional chart using v1.1.1 of chart.js

angular.module("app", ["chart.js"]).controller("BarCtrl", function($scope) {
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
});
<!DOCTYPE html>
<html>

<head>
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1879767f6d74796a726b5829362d362b">[email protected]</a>" data-semver="1.5.3" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/jtblin/angular-chart.js/master/dist/angular-chart.min.css" />
  <script src="app.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="BarCtrl">
    <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
  </div>
</body>

</html>

Answer №2

Your data binding is incorrect

<canvas id="bar" class="chart chart-bar" data="chart-data" labels="chart-labels" ></canvas>

You do not have the variables chart-data or chart-labels in your controller. They were named differently.

In reality, the attributes are reversed. It should be chart-data="data" chart-labels="labels"

Check out this example from

<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>

Answer №3

When working with HTML, the attribute "chart-data" should be written as chart-data="data"

Answer №4

When I ran your code, I encountered a similar error:

(mid value)[e] does not function angular chart

It appears to be a problem with version compatibility as I faced the same issue when using my own project. I recommend using V1.1.1 of Chart.js, as suggested by @dustin earlier.

Take a look at this sandbox.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming the appearance of the menu element in Vue using transitions

In my Vue app, I have this SCSS code that I'm using to create a smooth transition effect from the left for a menu when the isVisible property is set to true. However, I am encountering an issue where the transition defined does not apply and the menu ...

Issue with jQuery animation delay functionality experiencing issues specifically in Google Chrome browser

While browsing through similar questions, I couldn't find one quite like mine where the effect was working on one window but not on a subsequent one. I'm using jQuery library version 3.4.1. The code has been tested and is functioning as expected ...

Node seems to be having trouble with exporting and requiring, as it claims the class is not defined

Within my codebase, I have created three essential classes: TypeChecker: require('./type_error_checker/TypeErrorChecker'); require('./transpiler/Transpiler'); class TypeChecker { constructor() { console.log("TypeChecker i ...

Matching wildcard paths using Express

Seeking help with routing in Express. I am trying to have both /m/objectID and /m/someslug/ObjectID directed to the same function. My current setup is as follows: app.get("/m/:id", ...); app.get("/m/(.*)/:id", ...); The first route is working properly, b ...

How can I quickly upload a file while load balancing?

I recently developed an application in node js that includes a load balancing feature. I set up separate servers - one for the database and another for managing requests. The issue arises when users upload files using multer in Express, as the file gets up ...

Create a simulated constructor to generate an error

Currently, I am faced with a challenge of writing a test that is expected to fail when trying to instantiate the S3Client object. It seems like Vitest (similar to Jest) replaces the constructor with its own version when mocked, preventing my original const ...

What is the best way to construct a GET request with a URL that includes parameters?

I'm attempting to retrieve data from the server through a get request using the following URL: url = /api/projects/:projectId/scenarios What is the best way to accomplish this using $http.get in AngularJS?. ...

Color scheme for navigation bar carousel item background color

I have a navigation bar and carousel within the same section. I want to change the background color of both the navigation bar and carousel item when the carousel indicator becomes active. Any suggestions on how to achieve this using a jQuery function? H ...

In React Native, what exactly does it signify when you run the packager with the `--clearCache` flag?

Whenever I run my React Native apps, I rely on the command react-native run-ios. However, while debugging, it recommended using the "--clearCache" flag when running the packager. Can someone explain what this suggestion means? What exactly is the package ...

Building an interactive user interface using the power of Node JS, MongoDB, and Sails JS

Currently, I am in the process of creating an app using Sails, MongoDB, and Node JS for the backend. I plan on utilizing Sail's API features but am looking for the most effective way to incorporate real-time functionality into the app. One approach I ...

Utilizing React JS to dynamically adjust the z-index upon clicking a component

My goal is to create a functionality where clicking on a box will move it to the top, with the previous box now underneath. For a better understanding, please refer to the following code snippet. https://codesandbox.io/s/optimistic-payne-4644yf?file=/src/ ...

Activate NavLink based on multiple paths leading to the same component

There are two routes ("/" and "/home") that display the same component: const router = createBrowserRouter([ { path: "/", element: <ContentWrapper />, errorElement: <p>404</p>, children: [ ...

Is there a way to filter an array of dates without using the map function when a click

After finally grasping how to pass and retrieve data in React, I encountered an issue. I have a click handler called this.SortASC, and when I click on the title, I want to sort the titles alphabetically. However, I'm having trouble getting this functi ...

Unidentified function error triggered by jQuery when clicked

Having trouble accessing a function defined by my colleague for a click event. The code snippet provided below is causing issues, any ideas on what could be wrong? function Start(data) { this.move= function() { .... }; $('.button').click( ...

Check if a rotated rectangle lies within the circular boundary of the canvas

I have a rectangular shape that has been rotated using the ctx.rotate method, and there is also an arc on the canvas. My goal is to determine if any part of the rectangle lies within the boundaries of the arc. See the example below: https://i.sstatic.net/ ...

What is the best way to close a popup window?

Is there a way to close my popup? function hidePopup(){ document.getElementById("popup-1").classList.remove("active"); } @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); .popup .overlay{ positio ...

Adjust the div's height to 0

I need to dynamically set the height of a div element with a height of 34px to 0px. However, this div does not have a specific class or ID, so I can't use traditional DOM manipulation methods like .getElementById(), .getElementByClassName, or .getElem ...

What is the process for submitting and storing a collection of files in a database as a list?

I am trying to implement a feature in my MVC project where users can upload multiple files and see them listed before submitting the form. However, I am facing some challenges with finding a solution for this. Demo: My goal is to allow users to add multi ...

Turn off choices by utilizing data type attribute values within select2 version 4

I'm attempting to deactivate the options by using the data-type attribute specified for each option in select2. Unfortunately, my attempts have been unsuccessful thus far. In addition, I am encountering this error within the change event handler: ...

managing browser pop-ups in selenium with the help of JavaScript

My objective is to input a username and password in the popup box that shows up every time the page loads. I am utilizing selenium for this purpose, and unfortunately, all attempts I've made so far have been unsuccessful. I attempted to use the follo ...