{"id":18331519,"url":"https://github.com/antonfisher/extjs-d3pie-chart","last_synced_at":"2025-10-29T06:15:38.716Z","repository":{"id":24512862,"uuid":"27918679","full_name":"antonfisher/extjs-d3pie-chart","owner":"antonfisher","description":"D3js Pie Chart for ExtJs 4","archived":false,"fork":false,"pushed_at":"2014-12-31T16:14:09.000Z","size":1344,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T18:14:34.467Z","etag":null,"topics":["chart","extjs"],"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/antonfisher.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-12T12:00:01.000Z","updated_at":"2019-10-21T01:18:54.000Z","dependencies_parsed_at":"2022-08-23T00:51:11.302Z","dependency_job_id":null,"html_url":"https://github.com/antonfisher/extjs-d3pie-chart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonfisher%2Fextjs-d3pie-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonfisher%2Fextjs-d3pie-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonfisher%2Fextjs-d3pie-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonfisher%2Fextjs-d3pie-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antonfisher","download_url":"https://codeload.github.com/antonfisher/extjs-d3pie-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085325,"owners_count":21045139,"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":["chart","extjs"],"created_at":"2024-11-05T19:32:51.445Z","updated_at":"2025-10-29T06:15:38.617Z","avatar_url":"https://github.com/antonfisher.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# D3js Pie Chart for ExtJs 4\n\n![Example pic](https://github.com/antonfisher/extjs-d3pie-chart/raw/master/docs/d3pie-example-1.png)\n\nDemo: [http://antonfisher.com/extjs4-sandbox/](http://antonfisher.com/extjs4-sandbox/)\n\n## How to use\n\n1. Copy sass file `/sass/src/ux/chart/series/D3Pie.scss` to your project;\n\n2. Copy js file `/app/ux/chart/series/D3Pie.js` to your project;\n\n3. Change class name `'Sandbox.ux.chart.series.D3Pie'`;\n\n4. Add requires:\n  ```javascript\n    requires: [\n      ...\n      'Sandbox.ux.chart.series.D3Pie'\n    ]\n  ```\n\n5. Update chart config:\n\n  ```javascript\n  {\n    xtype: 'chart'\n    ...\n    cls: 'ux-d3-pie',             // add css class for d3pie\n    series: [\n      {\n        type: 'd3pie',            // change serie type\n        d3: d3,                   // add link to d3 library\n        angleField: 'value',\n        radius: 90,\n        donut: 60,\n        label: {\n          field: 'name',\n          legendField: 'legend'\n        }\n      }\n    ]\n  }\n  ```\n\n6. Try to change some options.\n\n## Options\n|Option|Description|\n|---|---|\n| `d3: undefined` | {_Object_} __[required]__ link to D3 library object |\n| `radius: undefined` | {_Number_} pie radius ('_undefined_' for auto) |\n| `donut: undefined` | {_Number_} donut radius ('_undefined_' for auto) |\n| `centerX: undefined` | {_Number_} pie center _X_ coordinate ('_undefined_' for auto) |\n| `centerY: undefined` | {_Number_} pie center _Y_ coordinate ('_undefined_' for auto) |\n| `labelTextOffset: 15` | {_Number_} labels offset |\n| `angleField: 'value'` | {_String_} store property name for pie value |\n| `label: {...}` | {_Object_} label properties |\n| `showItemDescription: true` | {_Boolean_} show text description under value |\n| `totalTitle: 'TOTAL'` | {_String_} total title |\n| `noDataText: 'NO DATA'` | {_String_} no data text |\n| `highlightStyle: 'opacity: 0.1'` | {_String_} highlight style for pie item's path |\n| `unHighlightStyle: 'opacity: 1'` | {_String_} unhighlight style for pie item's path |\n| `filterAngle: 0.25` | {_Number_} hide label when angle is less than this value |\n| `border: 0` | {_Number_} pie border |\n| `pathStrokeWidth: 1` | {_Number_} pie paths stroke width |\n| `pathStrokeColor: '#ffffff'` | {_String_} pie paths stroke color |\n| `borderColor: '#eeeeee'` | {_String_} pie border color (if _border_ property \u003e 0) |\n| `backgroundColor: '#ffffff'` | {_String_} pie background color |\n| `emptyBackgroundColor: '#eeeeee'` | {_String_} empty pie background color |\n\n__Note:__ Additionally `label` object may contain `legendField` field to show it in legend:\n```javascript\nlabel: {\n  field: 'name',\n  legendField: 'legend'\n}\n```\n\n__Renderers:__\n* `totalValueRenderer: function (totalValue, store) {...}` {_Function_} renderer for pie total value\n* `itemValueRenderer: function (dataItem, totalValue, store) {...}` {_Function_} renderer for item value\n* `itemDescriptionRenderer: function (dataItem, totalValue, store) {...}` {_Function_} renderer for pie item description\n\n## Libraries:\n* [ExtJs 4](http://www.sencha.com/products/extjs/)\n* [d3js](http://d3js.org/)\n\n## Thanks:\n* [Stephen Boak (@sboak)](https://github.com/sboak) - [http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html](http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html)\n\n## License\nCopyright (c) 2014 Anton Fischer\n\nMIT License. Free use and change.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantonfisher%2Fextjs-d3pie-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantonfisher%2Fextjs-d3pie-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantonfisher%2Fextjs-d3pie-chart/lists"}