{"id":18876206,"url":"https://github.com/keyvaluesoftwaresystems/react-scatter-graph","last_synced_at":"2025-04-14T17:31:56.529Z","repository":{"id":146999926,"uuid":"618405465","full_name":"KeyValueSoftwareSystems/react-scatter-graph","owner":"KeyValueSoftwareSystems","description":"A fully customizable ready to use scatter graph UI package for React.","archived":false,"fork":false,"pushed_at":"2024-02-20T21:57:56.000Z","size":6615,"stargazers_count":5,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-03T10:19:10.577Z","etag":null,"topics":["chart","graph","react","scatter-plot","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/stupefied-currying-ornk52","language":"TypeScript","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/KeyValueSoftwareSystems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-03-24T11:56:25.000Z","updated_at":"2024-01-10T08:01:56.000Z","dependencies_parsed_at":"2023-05-20T00:00:44.905Z","dependency_job_id":null,"html_url":"https://github.com/KeyValueSoftwareSystems/react-scatter-graph","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-scatter-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-scatter-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-scatter-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-scatter-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KeyValueSoftwareSystems","download_url":"https://codeload.github.com/KeyValueSoftwareSystems/react-scatter-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223639328,"owners_count":17177816,"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","graph","react","scatter-plot","typescript","webpack"],"created_at":"2024-11-08T06:11:40.030Z","updated_at":"2024-11-08T06:11:40.669Z","avatar_url":"https://github.com/KeyValueSoftwareSystems.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Scatter Graph\n\n\u003ca href=\"https://www.npmjs.com/package/@keyvaluesystems/react-scatter-graph\"\u003e\u003cimg src=\"https://badgen.net/npm/v/@keyvaluesystems/react-scatter-graph?color=blue\" alt=\"npm version\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/@keyvaluesystems/react-scatter-graph\" \u003e\u003cimg src=\"https://img.shields.io/npm/dw/@keyvaluesystems/react-scatter-graph?label=Downloads\" /\u003e\u003c/a\u003e \u003ca href=\"https://github.com/KeyValueSoftwareSystems/@keyvaluesystems/react-scatter-graph\"\u003e\u003cimg src=\"https://github.com/KeyValueSoftwareSystems/@keyvaluesystems/react-scatter-graph/actions/workflows/update-and-publish.yml/badge.svg\" alt=\"\" /\u003e\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/KeyValueSoftwareSystems/react-scatter-graph/master/assets/react-scatter-graph-example-2.png\" alt=\"\" width=\"700\"/\u003e\n\u003c/div\u003e\n\nA fully customizable, ready to use scatter graph UI package for React.\nTry tweaking React Scatter Graph using this codesandbox link \u003ca href=\"https://codesandbox.io/p/sandbox/late-shadow-wzdh9l\" \u003ehere\u003c/a\u003e\n\n## Installation\n\n```bash\nnpm install @keyvaluesystems/react-scatter-graph\n```\n\nYou’ll need to install React separately since it isn't included in the package.\n\nNote for **Next.js** users, if you are using Next.js version 13 or later, you will have to use the `use client` feature to ensure proper compatibility.\n\n## Usage\n\nReact Scatter Graph can run in a very basic mode like this:\n\n```jsx\nimport React, { useState } from 'react';\nimport ReactScatterGraph from '@keyvaluesystems/react-scatter-graph';\n\nfunction App() {\n  data = [\n    { x: 450, y: 150 },\n    { x: 360, y: 330 },\n    { x: 650, y: 315 },\n    { x: 270, y: 200 }\n  ];\n\n  return \u003cScatterGraph data={data} graphHeight={500} /\u003e;\n}\n\nexport default App;\n```\n\nThe `data` array is an array of objects with { x, y } coordinates.\n\n\u003e Note: The graph width is responsive. So it can be adjusted by a parent wrapper. You need to provide the height.\n\n### React Scatter Graph for date inputs:\n\nScatter graph is a useful tool for plotting date values. In order to do so, timestamps must be provided for the x-axis values.\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./assets/react-scatter-graph-example-4.png\" alt=\"\" width=\"700\"/\u003e\n\u003c/div\u003e\n\n```jsx\nimport React, { useState } from 'react';\nimport ReactScatterGraph from '@keyvaluesystems/react-scatter-graph';\n\nfunction App() {\n  data = [\n    // x given in milliseconds corresponding to the date\n    { x: 1672876800000, y: 150 },\n    { x: 1673568000000, y: 330 },\n    { x: 1674086400000, y: 315 },\n    { x: 1673222400000, y: 200 }\n  ];\n\n  return \u003cScatterGraph data={data} graphHeight={500} /\u003e;\n}\n\nexport default App;\n```\n\n## v2.0.0 (Major Version Change)\n\nThis release includes a breaking change. Please read this document carefully before upgrading\n\n### Breaking Changes\n\n- The `axisColor` prop has been renamed to `gridLineColor`.\n\n### Migration Steps\n\n- Update Prop: Replace the prop `axisColor` with the name `gridLineColor`.\n\n\u003cb\u003eBefore\u003c/b\u003e\n\n```jsx\n\u003cScatterGraph data={data} graphHeight={500} axisColor='#00FF00' /\u003e\n```\n\n\u003cb\u003eAfter\u003c/b\u003e\n\n```jsx\n\u003cScatterGraph data={data} graphHeight={500} gridLineColor='#00FF00' /\u003e\n```\n\n## Props\n\nProps that can be passed to the component are listed below:\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProp\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003edata:\u003c/b\u003e object[]\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAn array of x-y coordinates to render.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003egraphHeight:\u003c/b\u003e number\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eHeight of graph in pixel\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003egridLineColor:\u003c/b\u003e string\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eColor for the grid lines on the x and y axes. It helps user to see the exact value of a point on the graph\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e#9E9E9E\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003eoriginAxisColor:\u003c/b\u003e string\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eColor for the origin axis\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e#9E9E9E\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003erenderYLabel?:\u003c/b\u003e (arg: number | string): string\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Render function for customizing Y axis label\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003erenderXLabel?:\u003c/b\u003e (arg: number | string): string\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Render function for customizing X axis label\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003escatterPointColor?:\u003c/b\u003e (arg: { x: number, y: number }): string\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Function for customizing scatter point color. Based on the args, we can customise the color. Return value should be the color hash / string.\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003erenderValuebox?:\u003c/b\u003e (x: number, y: number): ReactElement\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Render function for customizing the value box shown on hover.\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\u003cb\u003estyles?:\u003c/b\u003e object\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eProvides you with a bunch of style objects and callback functions to override the default styles.(refer \n\t\t\t\u003ca href=\"#style-customizations\"\u003eStyle Customizations\u003c/a\u003e)\n\t\t\t\u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003ca name=\"style-customizations\"\u003e\u003c/a\u003e\n\n## Style Customizations\n\nStyle customizations can be done by overriding default styles using the `styles` prop.\nThe below code shows all the overridable styles using `styles` prop.\n\n```jsx\n\u003cScatterGraph\n  data={data}\n  graphHeight={500}\n  styles={{\n    Root?: {...styles},\n    XLabel?: (xLabel) =\u003e ({...styles}),\n    YLabel?: (yLabel) =\u003e ({...styles}),\n  }}\n/\u003e;\n\n```\n\nFor a more specific example, please refer the following:\n\n```jsx\n\u003cScatterGraph\n  data={data}\n  graphHeight={500}\n  styles={{\n    Root: {\n      marginTop: 50\n    },\n    XLabel: () =\u003e ({\n      color: 'blue'\n    }),\n    YLabel: () =\u003e ({\n      color: 'green'\n    })\n  }}\n/\u003e\n```\n\nWithin the `styles` prop, following keys accept a style object:\n\n- `Root` - overrides the style of outermost container.\n\nWithin the `styles` prop, following keys accept a function that returns the desired style for each element:\n\n- `XLabel` - overrides the style of x-axis labels.\n- `YLabel` - overrides the style of y-axis labels.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-scatter-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-scatter-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-scatter-graph/lists"}