{"id":16201677,"url":"https://github.com/txbm/angular-chartjs","last_synced_at":"2025-12-12T03:58:59.840Z","repository":{"id":57178138,"uuid":"12887507","full_name":"txbm/angular-chartjs","owner":"txbm","description":"Directive set for the ChartJS library. Supports data bindings and attribute-level specification for chart specific options. The only Angular ChartJS module that supports ALL chart options as HTML5 attributes :)","archived":false,"fork":false,"pushed_at":"2015-09-25T19:49:01.000Z","size":1339,"stargazers_count":144,"open_issues_count":5,"forks_count":38,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-11T20:55:50.770Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/txbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-09-17T06:01:13.000Z","updated_at":"2025-03-11T07:05:27.000Z","dependencies_parsed_at":"2022-08-30T06:50:16.625Z","dependency_job_id":null,"html_url":"https://github.com/txbm/angular-chartjs","commit_stats":null,"previous_names":["petermelias/angular-chartjs"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/txbm%2Fangular-chartjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/txbm%2Fangular-chartjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/txbm%2Fangular-chartjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/txbm%2Fangular-chartjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/txbm","download_url":"https://codeload.github.com/txbm/angular-chartjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814907,"owners_count":20352037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T09:39:32.614Z","updated_at":"2025-10-07T18:03:27.435Z","avatar_url":"https://github.com/txbm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## angular-chartjs\n\n\n[![Build Status](http://img.shields.io/travis/petermelias/angular-chartjs.svg)](https://travis-ci.org/petermelias/angular-chartjs)\n[![Coverage](http://img.shields.io/coveralls/petermelias/angular-chartjs.svg)](https://coveralls.io/r/petermelias/angular-chartjs)\n[![NPM Downloads](http://img.shields.io/npm/dm/angular-chartjs.svg)](https://www.npmjs.org/package/angular-chartjs)\n[![NPM Version](http://img.shields.io/npm/v/angular-chartjs.svg)](https://www.npmjs.org/package/angular-chartjs)\n[![Github Issues](http://img.shields.io/github/issues/petermelias/angular-chartjs.svg)](https://github.com/petermelias/angular-chartjs/issues)\n\n\nA fully functional directive set for the ChartJS library. Supports data bindings and attribute-level specification for chart specific options.\n\n### Installation\n\n##### Using Bower\n\n```bash\nbower install ng-chartjs\n```\n\n##### Using NPM\n\n```bash\nnpm install angular-chartjs\n```\n\n\n##### Setup\n\n```html\n\u003c!--\nInclude Angular ~1.2.21\nInclude Chart.js \u003e= v1.0.1-beta.3\n--\u003e\n\u003cscript type=\"text/javascript\" src=\"bower_components/ng-chartjs/dist/angular-chartjs.js\"\u003e\u003c/script\u003e\n```\n\nand in your app init...\n\n```javascript\nvar app = angular.module('myApp', ['chartjs']);\n```\n\n### Usage\n\nThere is a directive for each of the 6 chart types in ChartJS. Data is set on the $scope in the controller and the options can be passed in via the controller and / or overridden on the directive call.\n\nIn the template...\n\n```html\n\u003cdiv ng-controller=\"testCtrl\"\u003e\n\t\u003ccjs-doughnut dataset=\"someData\" options=\"someOptions\" segement-stroke-width=\"5\"\u003e\u003c/cjs-doughnut\u003e\n\n\t\u003c!--\n\t\u003ccjs-bar\u003e\u003c/cjs-bar\u003e\n\t\u003ccjs-line\u003e\u003c/cjs-line\u003e\n\t\u003ccjs-radar\u003e\u003c/cjs-radar\u003e\n\t\u003ccjs-polar\u003e\u003c/cjs-polar\u003e\n\t\u003ccjs-pie\u003e\u003c/cjs-pie\u003e\n\t--\u003e\n\u003c/div\u003e\n```\n\nIn the controller...\n\n```javascript\nmyapp.controller('testCtrl', function ($scope) {\n\t$scope.someData = {\n\t\tlabels: [\n        'Apr', \n        'May', \n        'Jun'\n      ],\n      datasets: [\n        {\n          data: [1, 7, 15, 19, 31, 40]\n        },\n        {\n          data: [6, 12, 18, 24, 30, 36]\n        }\n      ]\n\t};\n\n\t$scope.someOptions = {\n\t\tsegementStrokeWidth: 20,\n\t\tsegmentStrokeColor: '#000'\n\t};\n});\n```\n\nThis will result in a Doughnut chart using the dataset from the controller with a StrokeColor of #000 and a StrokeWidth of 5 because options set on the directive attributes override controller level settings for maximum flexibility.\n\n### Examples\n\nIf you want to see an example for every chart, download the library and go to the ```test/app``` directory. Launch ```index.html``` in a browser and all of the charts will load. You will find the test controller in the ```test/app/js``` directory.\n\nAll charts and options work. No actual JS (beyond the dataset) is required to use this directive set unless you want to bulk specify many options, in which case it's better to do that in the controller.\n\nYou can also run this example online through the following plunker: http://embed.plnkr.co/pC7gJ7/preview\n\n\n### Tests\n\n```bash\ngulp test\n```\n\n### Demo\n\nOpen a browser pointed at ```demo/index.html```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftxbm%2Fangular-chartjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftxbm%2Fangular-chartjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftxbm%2Fangular-chartjs/lists"}