{"id":36501945,"url":"https://github.com/hgraph-os/hgraph-react","last_synced_at":"2026-01-12T02:22:58.571Z","repository":{"id":39495535,"uuid":"121811304","full_name":"hgraph-os/hgraph-react","owner":"hgraph-os","description":"(Note: Use main hGraph repo) An open source visualization for patient health data, as a React component using d3.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:57:40.000Z","size":3559,"stargazers_count":13,"open_issues_count":28,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-11-02T06:12:10.996Z","etag":null,"topics":["boston","care-plan","data","design","health-data","healthcare","hgraph","open-source","patient-health-data","ux","visualization","wellness"],"latest_commit_sha":null,"homepage":"http://www.hgraph.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hgraph-os.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":"2018-02-16T23:20:08.000Z","updated_at":"2023-10-15T16:42:58.000Z","dependencies_parsed_at":"2023-02-05T02:15:53.525Z","dependency_job_id":null,"html_url":"https://github.com/hgraph-os/hgraph-react","commit_stats":null,"previous_names":["goinvo/hgraph-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hgraph-os/hgraph-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hgraph-os%2Fhgraph-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hgraph-os%2Fhgraph-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hgraph-os%2Fhgraph-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hgraph-os%2Fhgraph-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hgraph-os","download_url":"https://codeload.github.com/hgraph-os/hgraph-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hgraph-os%2Fhgraph-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28332089,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"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":["boston","care-plan","data","design","health-data","healthcare","hgraph","open-source","patient-health-data","ux","visualization","wellness"],"created_at":"2026-01-12T02:22:55.920Z","updated_at":"2026-01-12T02:22:58.565Z","avatar_url":"https://github.com/hgraph-os.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hGraph React\nAn open source visualization for patient health data, as a React component using d3.\n\nView the React based [demo](https://hgraph-os.github.io/hgraph-react/) for this repository.\n\nSee the core [hGraph repo](https://github.com/goinvo/hGraph) for more examples and roadmap.\n\nLooking for React Native? Check out the [port to React Native](https://github.com/CitizenHealth/react-native-hgraph) from Citizen Health.\n\n![hGraph](https://github.com/hgraph-os/hgraph-design/blob/main/hgraph.png)\n\n## Installation\nThis package can be [found on npm](https://www.npmjs.com/package/hgraph-react) and installed like so:\n```bash\n$ yarn add hgraph-react\n# or\n$ npm install hgraph-react\n```\nThe hGraph component is packaged using [webpack](https://webpack.js.org/).\n\n## Usage\n\n### hGraph Component Props\nMost props are not required and have sensible defaults built in, as listed below.\n\n| Prop Name | Type | Is Required | Description | Default |\n| --------- | ---- | ----------- | ----------- | ------- |\n| data | array | true | An array of objects representing the metrics to display in hGraph (see [below](#metrics)) | N/A |\n| score | number | false | The overall score to display in the center of hGraph | N/A |\n| width | number | false | The width in pixels hGraph should render at. | 600 |\n| height | number | false | The height in pixels hGraph should render at. | 600 |\n| margin | object | false | An object representing the values for margins around hGraph. | `{ top: 70, right: 100, bottom: 70, left: 100 }` |\n| thresholdMin | number | false | A number value between 0 and 1 (percentage), determining the position the lower threshold of the healthy range renders at. | .25 |\n| thresholdMax | number | false | A number value between 0 and 1 (percentage), determining the position the upper threshold of the healthy range renders at. | .75 |\n| donutHoleFactor | number | false | A number value between 0 and 1 (percentage), determining the amount of hGraph's radius that should be cut out forming the hole in the center of the graph. | .4 |\n| color | string (hex color code) | false | The color of the points and polygon shape. | '#616363' |\n| healthyRangeFillColor | string (hex color code) | false | The color of the healthy range band. | '#98bd8e' |\n| fontSize | number | false | The size (in pixels) of the font for the labels. | 16 |\n| fontColor | string (hex color code) | false | The color of the labels. | '#000' |\n| showAxisLabel | boolean | false | Whether or not axis labels should display around hGraph. | true |\n| axisLabelWrapWidth | number | false | The width (in pixels) that the labels should wrap text at. | 80 (Note: use `null` for no wrapping) |\n| axisLabelOffset | number | false | The distance (in pixels) that axis labels should be offset from the outer bounds of hGraph's 'absolute max' radius. | 12 |\n| areaOpacity | number | false | The opacity of the polygon shape. | 0.25 |\n| pointRadius | number | false | The radius (in pixels) of the points for metric values. | 10 |\n| pointLabelWrapWidth | number | false | The width (in pixels) that the point labels should wrap text at. | null (no wrapping) |\n| pointLabelOffset | number | false | The distance (in pixels) that point labels should be offset from the point. | 8 |\n| hitboxRadius | number | false | The radius (in pixels) of the point hitboxes. (hGraph overlays a transparent hitbox over each point which can help users accurately click/touch points, particularly on mobile devices.) | Defaults to `props.pointRadius` size. |\n| showScore | boolean | false | Whether or not to display the overall score in the middle of hGraph. | true |\n| scoreFontSize | number | false | The size (in pixels) of the font for the overall hGraph score | 120 |\n| scoreFontColor | string (hex color code) | false | The color of the hGraph score. | '#000' |\n| zoomFactor | number | false | The multiplier factor hGraph should zoom in. | 2.25 |\n| zoomTransitionTime | number | false | The amount of time (in milliseconds) the zooming animation should take. | 750 |\n| zoomOnPointClick | boolean | false | Configure if hGraph should zoom in/focus on a clicked point and display child points in the graph. | true |\n| onPointClick | function | false | Callback function called when a point is clicked. Function is passed 2 arguments: the data object corresponding to the point clicked, and the event. | N/A |\n\n\n### hGraph Metric Object Properties \u003ca name=\"metrics\"\u003e\u003c/a\u003e\n| Property Name | Type | Is Required | Description |\n| ------------- | ---- | ----------- | ----------- |\n| id | string | true | A unique (compared to all other metrics) identifier string for the metric. |\n| label | string | true | The axis display label for the metric. |\n| value | number | true | The patient's recorded value for the metric. |\n| healthyMin | number | true | The minimum value possible to still be considered a healthy value. |\n| healthyMax | number | true | The maximum value possible to still be considered a healthy value. |\n| absoluteMin | number | true | A reasonable minimum possible value for this metric. Note: values below this absolute minimum will be clamped to the min.) |\n| absoluteMax | number | true | A reasonable maximum possible value for this metric. Note: values above this absolute maximum will be clamped to the max. |\n| unitLabel | string | true | The units the metric is measured in, displayed with the metric value. |\n| children | array | false | Optional array of child metrics that comprise this metric. Children metrics should conform to hGraph Metric Objects properties. Children are shown when a point is clicked and hGraph is in the \"zoomed in\" state. |\n\n\n### License ###\n\nhGraph is [Apache 2.0](https://github.com/hgraph-os/hGraph/blob/master/LICENSE) licensed.\n\n### For guidance integrating hGraph into your product or service, contact us at hello@goinvo.com. ###\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhgraph-os%2Fhgraph-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhgraph-os%2Fhgraph-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhgraph-os%2Fhgraph-react/lists"}