{"id":13445744,"url":"https://github.com/chinmaymk/angular-charts","last_synced_at":"2025-05-15T12:05:34.682Z","repository":{"id":12009933,"uuid":"14590842","full_name":"chinmaymk/angular-charts","owner":"chinmaymk","description":"angular directives for creating common charts using d3","archived":false,"fork":false,"pushed_at":"2023-07-04T20:59:39.000Z","size":534,"stargazers_count":1026,"open_issues_count":66,"forks_count":270,"subscribers_count":45,"default_branch":"master","last_synced_at":"2025-04-14T22:18:35.119Z","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/chinmaymk.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2013-11-21T15:10:33.000Z","updated_at":"2025-02-20T06:44:43.000Z","dependencies_parsed_at":"2024-01-18T03:48:22.304Z","dependency_job_id":null,"html_url":"https://github.com/chinmaymk/angular-charts","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinmaymk%2Fangular-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinmaymk%2Fangular-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinmaymk%2Fangular-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinmaymk%2Fangular-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chinmaymk","download_url":"https://codeload.github.com/chinmaymk/angular-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254229714,"owners_count":22036053,"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-07-31T05:00:38.710Z","updated_at":"2025-05-15T12:05:29.667Z","avatar_url":"https://github.com/chinmaymk.png","language":"JavaScript","funding_links":[],"categories":["Libraries","Chart"],"sub_categories":["Charts Libraries"],"readme":"## Features\n=======\n\n1. One click chart change\n2. Tiny - 4.4kb minified and gzipped\n3. Auto tooltips\n4. Auto h,w dimensions updates automatically when resizing\n5. Beautiful animations\n6. Callback events\n7. Simple data format\n\n[Download](https://github.com/chinmaymk/angular-charts/releases) | [Playground](http://plnkr.co/edit/T9J7bz?p=preview) | [Contribute](#contribute)\n\n## Installation\nGrab the latest zip from [releases](https://github.com/chinmaymk/angular-charts/releases), copy ```angular-charts.min.js``` to web root, and refer it from page.\n\n```html\n\u003cscript src='path/to/js/angular-charts.min.js' type='text/javascript'\u003e\u003c/script\u003e\n```\nAdd as dependency in your module\n\n```js\nangular.module('yourApp', ['angularCharts']);\n```\n**Dependencies**\n\n1. angular\n2. d3\n\n**Install using bower**\n\n```js\nbower install angular-charts\n```\nRefer all dependencies in your page in right order\n\n```html\n\u003cscript src='./bower_components/angular/angular.min.js' type='text/javascript'\u003e\u003c/script\u003e\n\u003cscript src='./bower_components/d3/d3.min.js' type='text/javascript'\u003e\u003c/script\u003e\n\u003cscript src='./bower_components/angular-charts/dist/angular-charts.min.js' type='text/javascript'\u003e\u003c/script\u003e\n```\n\n## Configuration\nDirective syntax\n\n```html\n\u003cdiv ac-chart=\"chartType\" ac-data=\"data\" ac-config=\"config\" id='chart' class='chart'\u003e\u003c/div\u003e\n```\n**Note:** chartType, data and config are properties of scope. Not the actual values.\n\n\n### ac-chart  - string\nAllowed values - `'pie', 'bar', 'line', 'point', 'area'`\n\n### ac-config - object\n\n```js\n var config = {\n  title: '', // chart title. If this is false, no title element will be created.\n  tooltips: true,\n  labels: false, // labels on data points\n  // exposed events\n  mouseover: function() {},\n  mouseout: function() {},\n  click: function() {},\n  // legend config\n  legend: {\n    display: true, // can be either 'left' or 'right'.\n    position: 'left',\n    // you can have html in series name\n    htmlEnabled: false\n  },\n  // override this array if you're not happy with default colors\n  colors: [],\n  innerRadius: 0, // Only on pie Charts\n  lineLegend: 'lineEnd', // Only on line Charts\n  lineCurveType: 'cardinal', // change this as per d3 guidelines to avoid smoothline\n  isAnimate: true, // run animations while rendering chart\n  yAxisTickFormat: 's', //refer tickFormats in d3 to edit this value\n  xAxisMaxTicks: 7, // Optional: maximum number of X axis ticks to show if data points exceed this number\n  yAxisTickFormat: 's', // refer tickFormats in d3 to edit this value\n  waitForHeightAndWidth: false // if true, it will not throw an error when the height or width are not defined (e.g. while creating a modal form), and it will be keep watching for valid height and width values\n};\n```\n\n### ac-data - object\n\nEntire data structure looks like this\n```js\nvar acData = {\n  series: [\"Sales\", \"Income\", \"Expense\"],\n  data: [{\n    x: \"Computers\",\n    y: [54, 0, 879],\n    tooltip: \"This is a tooltip\"\n  }]\n}\n```\n\n**series - string array**\n```js\nvar series = [\n  \"Sales\",\n  \"Income\",\n  \"Expense\"\n]\n```\n**data - object array**\n\nx defines what goes on x axis, must be a string, y defines what goes on y axis, must be an array of numbers.\nValues are mapped to series by index. y[0] belongs to series[0], y[1] belongs to series[1] and so on. Tooltip is optional.\n\nEach data point looks like this\n\n```js\nvar dataPoint = {\n  x: \"Computers\",\n  y: [54, 0, 879],\n  tooltip: \"This is a tooltip\"\n}\n```\n**Note:** series and data are arrays\n\n## Events\nThree events are exposed via config object.\n\n```js\nclick : function(d) {\n  $scope.messages.push('clicked!');\n},\nmouseover : function(d) {\n  $scope.messages.push('mouseover!');\n},\nmouseout : function(d) {\n  $scope.messages.push('mouseout!');\n}\n```\n\n## Contribute\nThanks to all awesome [contributors](https://github.com/chinmaymk/angular-charts/network/members)\n\nSome things to follow\n\n1. Make sure all tests are passing.\n2. Update this README if you are doing any change to config object.\n3. Avoid any changes in data format\n4. Keep backwards compatibility\n\n    git clone git@github.com:chinmaymk/angular-charts.git\n    npm install\n    bower install\n    grunt\n\nTo run tests:\n\n    grunt karma\n\n## Got suggestions ?\nFeel free to submit a pull request, file an issue, or get in touch on twitter [@_chinmaymk](https://twitter.com/_chinmaymk)\n\nLicense - MIT.\n[![Build Status](https://travis-ci.org/chinmaymk/angular-charts.svg?branch=master)](https://travis-ci.org/chinmaymk/angular-charts)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinmaymk%2Fangular-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinmaymk%2Fangular-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinmaymk%2Fangular-charts/lists"}