{"id":29751752,"url":"https://github.com/vasturiano/react-sunburst-chart","last_synced_at":"2025-10-05T00:55:58.569Z","repository":{"id":272994932,"uuid":"918403493","full_name":"vasturiano/react-sunburst-chart","owner":"vasturiano","description":"A sunburst interactive chart React component for visualizing hierarchical data","archived":false,"fork":false,"pushed_at":"2025-03-21T15:43:26.000Z","size":255,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-02T23:20:22.616Z","etag":null,"topics":["chart","d3js","data-visualization","hierarchical-data","react","sunburst"],"latest_commit_sha":null,"homepage":"https://vasturiano.github.io/react-sunburst-chart/example/flare/","language":"HTML","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/vasturiano.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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-17T21:27:25.000Z","updated_at":"2025-06-27T08:30:48.000Z","dependencies_parsed_at":"2025-01-17T23:13:15.003Z","dependency_job_id":"5bb97cf6-f9fc-4b48-9a42-9973bd786e64","html_url":"https://github.com/vasturiano/react-sunburst-chart","commit_stats":null,"previous_names":["vasturiano/react-sunburst-chart"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/vasturiano/react-sunburst-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Freact-sunburst-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Freact-sunburst-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Freact-sunburst-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Freact-sunburst-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vasturiano","download_url":"https://codeload.github.com/vasturiano/react-sunburst-chart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Freact-sunburst-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278395912,"owners_count":25979691,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","d3js","data-visualization","hierarchical-data","react","sunburst"],"created_at":"2025-07-26T14:42:02.392Z","updated_at":"2025-10-05T00:55:58.550Z","avatar_url":"https://github.com/vasturiano.png","language":"HTML","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url","https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url)!"],"categories":[],"sub_categories":[],"readme":"React Sunburst Chart\n====================\n\n[![NPM package][npm-img]][npm-url]\n[![Build Size][build-size-img]][build-size-url]\n[![NPM Downloads][npm-downloads-img]][npm-downloads-url]\n\nReact bindings for the [sunburst-chart](https://github.com/vasturiano/sunburst-chart) UI component.\n\n\u003cp align=\"center\"\u003e\n     \u003ca href=\"https://vasturiano.github.io/react-sunburst-chart/example/flare/\"\u003e\u003cimg width=\"80%\" src=\"https://vasturiano.github.io/react-sunburst-chart/example/flare/screenshot.png\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA React component of an interactive sunburst chart for representing hierarchical data, where each data node of a tree is represented by an annular segment within multi-layered rings. \n\nClicking on an arc focuses the view on the associated sub-tree, enabling a gradual exploration of the data. Clicking in the chart's center zooms out one level, while clicking on the canvas resets the zoom level to the root view.\nThe chart also responds to data changes by animating the arcs of each of the nodes into their new positions. \n\nBy default the arcs areas are linearly proportional to their data values, resulting in a decrease of the thickness of the outer layers in a quadratic fashion. This can however be customized using the `radiusScaleExponent` method.\n\nFor improved performance, arcs smaller than a given threshold (`minSliceAngle`) are excluded from the DOM, allowing for representation of large data sets while maintaining a smooth interaction. See [here for an example](https://vasturiano.github.io/react-sunburst-chart/example/large-data) of a randomly generated large data structure.\n\n## Quick start\n\n```js\nimport Sunburst from 'react-sunburst-chart';\n```\n\nor using a *script* tag\n\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/react-sunburst-chart\"\u003e\u003c/script\u003e\n```\n\nthen\n\n```jsx\nReactDOM.render(\n  \u003cSunburst\n    data={myData}\n  /\u003e, \n  myDOMElement\n);\n```\n\n## API reference\n\n### Props\n\n| Prop | Type | Default | Description |\n| --- | :--: | :--: | --- |\n| \u003cb\u003edata\u003c/b\u003e | \u003ci\u003eobject\u003c/i\u003e | - | Chart data (see below for syntax details). |\n| \u003cb\u003ewidth\u003c/b\u003e | \u003ci\u003enumber\u003c/i\u003e | *\u0026lt;window width\u0026gt;* | Chart width in px. |\n| \u003cb\u003eheight\u003c/b\u003e | \u003ci\u003enumber\u003c/i\u003e | *\u0026lt;window height\u0026gt;* | Chart height in px. |\n| \u003cb\u003echildren\u003c/b\u003e | \u003ci\u003estring\u003c/i\u003e or \u003ci\u003efunc\u003c/i\u003e | `children` | Data node's children accessor, used to establish the hierarchical relationship between nodes. Supports either a \u003ci\u003estring\u003c/i\u003e indicating the object's property name, or a `function(node)` which should return an array of nodes. |\n| \u003cb\u003elabel\u003c/b\u003e | \u003ci\u003estring\u003c/i\u003e or \u003ci\u003efunc\u003c/i\u003e | `name` | Node object label accessor, used to display labels on the arcs and their tooltips. |\n| \u003cb\u003esize\u003c/b\u003e | \u003ci\u003estring\u003c/i\u003e or \u003ci\u003efunc\u003c/i\u003e | `value` | Node object size accessor, used to compute the angles of the arcs. |\n| \u003cb\u003ecolor\u003c/b\u003e | \u003ci\u003estring\u003c/i\u003e or \u003ci\u003efunc\u003c/i\u003e | \u003ci\u003egrey\u003c/i\u003e | Node object color accessor, used to color fill the arcs. |\n| \u003cb\u003estrokeColor\u003c/b\u003e | \u003ci\u003estring\u003c/i\u003e or \u003ci\u003efunc\u003c/i\u003e | \u003ci\u003ewhite\u003c/i\u003e | Node object stroke color accessor, used to color the contour of the arcs. |\n| \u003cb\u003enodeClassName\u003c/b\u003e | \u003ci\u003estring\u003c/i\u003e or \u003ci\u003efunc\u003c/i\u003e | - | Node object classname accessor. Determines the CSS class(es) to apply to each slice node. |\n| \u003cb\u003eminSliceAngle\u003c/b\u003e | \u003ci\u003enumber\u003c/i\u003e | `0.2` | Minimum angle of an arc (in degrees) required for it to be rendered in the DOM. |\n| \u003cb\u003emaxLevels\u003c/b\u003e | \u003ci\u003enumber\u003c/i\u003e | - | Maximum number of layers to show at any given time. |\n| \u003cb\u003eexcludeRoot\u003c/b\u003e | \u003ci\u003ebool\u003c/i\u003e | `false` | Whether to exclude the root node from the top level representation, to maximize the available radial space. |\n| \u003cb\u003ecenterRadius\u003c/b\u003e | \u003ci\u003enumber\u003c/i\u003e | `0.1` | Relative radius of the center circle. The value should be proportional to the whole chart radius. Only values between `\u003c0, 1\u003e` are permitted. |\n| \u003cb\u003eradiusScaleExponent\u003c/b\u003e | \u003ci\u003enumber\u003c/i\u003e | `0.5` | Exponent of the power scale used to calculate the thickness of the multi-layered rings. The default is `0.5` (square-root) which ensures the area of every segment remains proportional to their value, by decreasing the radius outwards in a quadratic fashion. For a linear scale, use `1`. Negatives values are not permitted. |\n| \u003cb\u003esort\u003c/b\u003e | \u003ci\u003efunc\u003c/i\u003e | *\u0026lt;existing order*\u0026gt; | Compare method used to sort sibling arcs. A value of `null` (*default*) maintains the existing order found in the input data structure. This method is equivalent to [d3-hierarchy's sort](https://github.com/d3/d3-hierarchy#node_sort), it receives two arguments representing two sibling arcs and expects a numeric return value (`-1`, `0` or `1`) indicating the order. Each element is an instance of [d3-hierarchy node](https://github.com/d3/d3-hierarchy#hierarchy) and has several useful properties to specify order: `data` (the corresponding data object), `value` (summed value of node and all its descendants) and `depth` (layer degree). For [example](https://vasturiano.github.io/react-sunburst-chart/example/sort-by-size/), to order arcs by angular size, use: `(a, b) =\u003e b.value - a.value`. |\n| \u003cb\u003eshowLabels\u003c/b\u003e | \u003ci\u003ebool\u003c/i\u003e | `true` | Whether to show labels in the arcs. Regardless of this setting, labels too large to fit within an arc's boundaries are automatically hidden. |\n| \u003cb\u003elabelOrientation\u003c/b\u003e | \u003ci\u003eangular, radial or auto\u003c/i\u003e | `auto` | Orientation of the labels. `angular` positions curved labels along the arc perimeter. `radial` will orient labels along the radial axis, centered on the arc's centroid. The `auto` mode will pick whichever of the two methods that allows the label to fit inside the arc's boundaries. If both modes fit, the method that keeps the text most horizontal is selected. |\n| \u003cb\u003ehandleNonFittingLabel\u003c/b\u003e | \u003ci\u003efn(label, availablePx, node)\u003c/i\u003e | - | How to handle labels that are too large to fit in their designated space. Expects a function that receives as arguments the label, the available space (in px) and the corresponding node object. This function should return a string to be rendered instead, or a falsy value indicating the label should be hidden (default). See [here for a label truncation example](https://vasturiano.github.io/react-sunburst-chart/example/truncate-labels). |\n| \u003cb\u003eshowTooltip\u003c/b\u003e | \u003ci\u003efunc\u003c/i\u003e | `() =\u003e true` | Specify a node object tooltip's visibility. If this function returns `false` for a particular node, that node's tooltip will not display at all. If unspecified, all nodes' tooltips will display. |\n| \u003cb\u003etooltipTitle\u003c/b\u003e | \u003ci\u003efunc\u003c/i\u003e | | Node object tooltip title. The function should return a string to be displayed in bold in the first line of the tooltip. If unspecified, the full hierarchical name will be displayed. |\n| \u003cb\u003etooltipContent\u003c/b\u003e | \u003ci\u003efunc\u003c/i\u003e | | Node object tooltip content. Use this to specify extra content in each of the arc's tooltips in addition to the title set in `tooltipTitle`. |\n| \u003cb\u003eonHover\u003c/b\u003e | \u003ci\u003efunc\u003c/i\u003e | | Callback function for mouse hover events. The data node object (or `null` if hovering on background) and the event object are included as arguments `onHover(node, event)`. |\n| \u003cb\u003eonClick\u003c/b\u003e | \u003ci\u003efunc\u003c/i\u003e | | Callback function for click events. The data node object (or `null` if clicking on background) and the event object are included as arguments `onClick(node, event)`. A falsy value (default) automatically focuses on clicked nodes, equivalent to `onClick={chartRef.current.focusOnNode}`. |\n| \u003cb\u003eonRightClick\u003c/b\u003e | \u003ci\u003efunc\u003c/i\u003e | | Callback function for right-click events. The data node object (or `null` if right-clicking on background) and the event object are included as arguments `onRightClick(node, event)`. A falsy value (default) will fallback to the default browser behaviour, which is to open the context menu. |\n| \u003cb\u003etransitionDuration\u003c/b\u003e | \u003ci\u003enumber\u003c/i\u003e | `750` | Animation duration of transitions between states (opening, zoom in/out) in milliseconds. Enter `0` to disable animations. |\n\n### Component Methods\n\n| Method | Arguments | Description |\n| --- | :--: | --- |\n| \u003cb\u003efocusOnNode\u003c/b\u003e | [\u003ci\u003eobject\u003c/i\u003e] | The data node to focus the chart on. Use this method to retrieve the current node in focus, or to programmatically zoom the chart to a particular node. |\n\n## Data syntax\n\n```js\n{\n  name: \"root\",\n  children: [\n    {\n      name: \"leafA\",\n      value: 3\n    },\n    {\n      name: \"nodeB\",\n      children: [\n        {\n          name: \"leafBA\",\n          value: 5\n        },\n        {\n          name: \"leafBB\",\n          value: 1\n        }\n      ]\n    }\n  ]\n}\n```\n\n## Giving Back\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url) If this project has helped you and you'd like to contribute back, you can always [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url)!\n\n[npm-img]: https://img.shields.io/npm/v/react-sunburst-chart\n[npm-url]: https://npmjs.org/package/react-sunburst-chart\n[build-size-img]: https://img.shields.io/bundlephobia/minzip/react-sunburst-chart\n[build-size-url]: https://bundlephobia.com/result?p=react-sunburst-chart\n[npm-downloads-img]: https://img.shields.io/npm/dt/react-sunburst-chart\n[npm-downloads-url]: https://www.npmtrends.com/react-sunburst-chart\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Freact-sunburst-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvasturiano%2Freact-sunburst-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Freact-sunburst-chart/lists"}