{"id":13432024,"url":"https://github.com/unsplash/react-trend","last_synced_at":"2025-10-01T18:31:00.204Z","repository":{"id":57346702,"uuid":"80753020","full_name":"unsplash/react-trend","owner":"unsplash","description":"📈 Simple, elegant spark lines","archived":true,"fork":false,"pushed_at":"2019-06-02T12:55:19.000Z","size":1190,"stargazers_count":2485,"open_issues_count":1,"forks_count":77,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-01-12T05:29:01.905Z","etag":null,"topics":["data-visualization","graphing","graphs","react","reactjs","svg"],"latest_commit_sha":null,"homepage":"https://unsplash.github.io/react-trend/","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/unsplash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-02T18:04:20.000Z","updated_at":"2025-01-03T21:45:52.000Z","dependencies_parsed_at":"2022-08-25T18:50:58.945Z","dependency_job_id":null,"html_url":"https://github.com/unsplash/react-trend","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/unsplash%2Freact-trend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unsplash%2Freact-trend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unsplash%2Freact-trend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unsplash%2Freact-trend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unsplash","download_url":"https://codeload.github.com/unsplash/react-trend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234719904,"owners_count":18876528,"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":["data-visualization","graphing","graphs","react","reactjs","svg"],"created_at":"2024-07-31T02:01:07.950Z","updated_at":"2025-10-01T18:30:54.844Z","avatar_url":"https://github.com/unsplash.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","目录","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Chart"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/unsplash/react-trend/master/misc/documentation-assets/react-trend-example.png\" width=\"500\" alt=\"React Trend\"\u003e\n  \u003cbr\u003e\n  \u003ch1\u003eReact Trend\u003c/h1\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://www.npmjs.org/package/react-trend\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-trend.png?style=flat-square\" alt=\"npm\"\u003e\u003c/a\u003e \u003ca href=\"https://travis-ci.org/unsplash/react-trend\"\u003e\u003cimg src=\"https://img.shields.io/travis/unsplash/react-trend/master.png?style=flat-square\" alt=\"travis\"\u003e\u003c/a\u003e \u003ca href=\"https://codecov.io/github/unsplash/react-trend\"\u003e\u003cimg src=\"https://img.shields.io/codecov/c/github/unsplash/react-trend.svg\" alt=\"travis\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Note: This project is no longer actively maintained.\n\nUnfortunately, none of this project's authors have the time/enthusiasm to maintain this project right now. We recommend forking this project, or [reading its source](https://github.com/unsplash/react-trend/blob/master/src/components/Trend/Trend.js) to learn how it's built).\n\n---\n\nGraphing tools are often complex, abstract, and heavy. They require domain-specific knowledge, and a significant time investment.\n\nWhile building rich data visualizations for an analytics app, this is a necessary cost. But what if you just need a spark line that shows a trend?\n\nFor example, here's how GitHub shows activity on a repo:\n\n\u003cimg src=\"https://raw.githubusercontent.com/unsplash/react-trend/master/misc/documentation-assets/gh-trend.png\" width=\"300\" /\u003e\n\nHere's how Twitter displays your recent analytics:\n\n\u003cimg src=\"https://raw.githubusercontent.com/unsplash/react-trend/master/misc/documentation-assets/tw-trend.png\" width=\"300\" /\u003e\n\nThese are very simple and elegant visualizations, and they should not require a bloated graphing library to produce.\n\nReact Trend is a concrete component that does 1 thing, and does it well: generate these trending graphs.\n\n## Demo\n\nCheck out the [React Trend playground](https://unsplash.github.io/react-trend/).\n\n## Features\n\n- **Simple**. Integrate in seconds.\n- **Scalable**. Uses SVG for sharp, scalable graphs. Will fill the parent container, or you can provide a fixed size.\n- **Beautiful**. Built-in gradient support, and customizable smoothing.\n- **Animatable**. Support for on-mount animations where the trend graph draws from left to right.\n- **Tiny**. Zero-dependency, gzips to \u003c3kb.\n\n### Installation\n\n```bash\n$ yarn add react-trend\n\n# Alternatively:\n$ npm i -S react-trend\n```\n\nUMD builds are also available via CDN:\n\n- [react-trend.js](https://unpkg.com/react-trend/umd/react-trend.js)\n- [react-trend.min.js](https://unpkg.com/react-trend/umd/react-trend.min.js)\n\nUMD build exposes the component as `Trend`.\n\n### Quickstart\n\n```js\nimport Trend from 'react-trend';\n\nconst MyComponent = () =\u003e \u003cTrend data={[0, 10, 5, 22, 3.6, 11]} /\u003e;\n\n// That's it!\n// You can, of course, customize it. Check out the API Reference below.\n// Be sure to check out `autoDraw`, `gradient`, and `smoothing`.\n```\n\n### API Reference\n\n#### SVG Props\n\nBy default, all properties not recognized by React Trend will be delegated to the SVG. The line inherits these properties if none of its own override them.\n\nThis means that, among other properties, you can use:\n\n- `stroke` to set a solid colour,\n- `strokeWidth` to change the default line thickness,\n- `strokeOpacity` to create a transparent line,\n- `strokeLinecap`/`strokeLinejoin` to control the edges of your line,\n- `strokeDasharray` to create a dashed line, and\n- `strokeDashoffset` to control where the dashes start.\n\n#### `autoDraw`\n\n| Type    | Required | Default |\n| ------- | -------- | ------- |\n| Boolean | ✕        | `false` |\n\nAllow the line to draw itself on mount. Set to `true` to enable, and customize using `autoDrawDuration` and `autoDrawEasing`.\n\n**NOTE**: This property uses `strokeDasharray` and `strokeDashoffset` under the hood to perform the animation. Because of this, any values you provide for those properties will be ignored.\n\n###### Example\n\n```js\n\u003cTrend data={data} autoDraw autoDrawDuration={3000} autoDrawEasing=\"ease-in\" /\u003e\n```\n\n#### `autoDrawDuration`\n\n| Type   | Required | Default |\n| ------ | -------- | ------- |\n| Number | ✕        | `2000`  |\n\nThe amount of time, in milliseconds, that the autoDraw animation should span.\n\nThis prop has no effect if `autoDraw` isn't set to `true`.\n\n###### Example\n\n```js\n\u003cTrend data={data} autoDraw autoDrawDuration={3000} autoDrawEasing=\"ease-in\" /\u003e\n```\n\n#### `autoDrawEasing`\n\n| Type   | Required | Default |\n| ------ | -------- | ------- |\n| String | ✕        | `ease`  |\n\nThe easing function to use for the autoDraw animation. Accepts any transition timing function within [the CSS spec](http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp) (eg. `linear`, `ease`, `ease-in`, `cubic-bezier`...).\n\nThis prop has no effect if `autoDraw` isn't set to `true`.\n\n###### Example\n\n```js\n\u003cTrend data={data} autoDraw autoDrawDuration={3000} autoDrawEasing=\"ease-in\" /\u003e\n```\n\n#### `data`\n\n| Type             | Required | Default     |\n| ---------------- | -------- | ----------- |\n| [Number\\|Object] | ✓        | `undefined` |\n\nThe data accepted by React Trend is incredibly simple: An array of y-axis values to graph.\n\nReact Trend takes care of normalization, so don't worry about ensuring the data is in a specific range.\n\nThis does mean that all data points will be evenly-spaced. If you have irregularly-spaced data, it will not be properly represented.\n\nAs of v1.2.0, you may supply an array of data objects with a `value` property.\n\n###### Example\n\n```js\n\u003cTrend data={[120, 149, 193.4, 200, 92]} /\u003e\n\u003cTrend data={[{ value: 4 }, { value: 6 }, { value: 8 }]} /\u003e\n```\n\n#### `gradient`\n\n| Type     | Required | Default     |\n| -------- | -------- | ----------- |\n| [String] | ✕        | `undefined` |\n\nReact Trend supports vertical gradients. It accepts an array of 2+ colour values, and will fade evenly between them from the bottom up.\n\nColour can be specified as any SVG-supported format (named, rgb, hex, etc).\n\n###### Example\n\n```js\n\u003cTrend gradient={['#0FF', '#F0F', '#FF0']} /\u003e\n```\n\n#### `height`\n\n| Type   | Required | Default     |\n| ------ | -------- | ----------- |\n| Number | ✕        | `undefined` |\n\nSet an explicit height for your SVG. By default it ensures a 1:4 aspect ratio with the width, and the width expands to fill the container.\n\nNote that in _most_ cases it is sufficient to leave this blank, and just control the size of the parent container.\n\n###### Example\n\n```js\n\u003cTrend width={200} height={200} /\u003e\n```\n\n#### `padding`\n\n| Type   | Required | Default |\n| ------ | -------- | ------- |\n| Number | ✕        | `8`     |\n\nIf you set a very large `strokeWidth` on your line, you may notice that it gets \"cropped\" towards the edges. This is because SVGs don't support overflow.\n\nBy increasing this number, you expand the space around the line, so that very thick lines aren't cropped.\n\nIn most cases you don't need to touch this value.\n\n###### Example\n\n```js\n\u003cTrend strokeWidth={20} padding={18} /\u003e\n```\n\n#### `radius`\n\n| Type   | Required | Default |\n| ------ | -------- | ------- |\n| Number | ✕        | `10`    |\n\nWhen using [smoothing](#smooth), you may wish to control the amount of curve around each point. For example, a `0` radius is equivalent to not having any smoothing at all, where an impossibly-large number like `10000` will ensure that each peak is as curved as it can possibly be.\n\nThis prop has no effect if `smooth` isn't set to `true`.\n\n###### Example\n\n```js\n\u003cTrend smooth radius={20} strokeWidth={4} /\u003e\n```\n\n#### `smooth`\n\n| Type    | Required | Default |\n| ------- | -------- | ------- |\n| Boolean | ✕        | `false` |\n\nSmooth allows the peaks to be 'rounded' out so that the line has no jagged edges.\n\nBy tweaking the [radius](#radius) prop, you can use this as a subtle prop to tone down the sharpness, or you can set a very high radius to create a snake-like line.\n\n###### Example\n\n```js\n\u003cTrend smooth radius={20} strokeWidth={4} /\u003e\n```\n\n#### `width`\n\n| Type   | Required | Default     |\n| ------ | -------- | ----------- |\n| Number | ✕        | `undefined` |\n\nSet an explicit width for your SVG. By default it ensures a 1:4 aspect ratio with the height, expanding to fill the width of the container.\n\nNote that in _most_ cases it is sufficient to leave this blank, and just control the width of the parent container.\n\n###### Example\n\n```js\n\u003cTrend width={200} height={200} /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funsplash%2Freact-trend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funsplash%2Freact-trend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funsplash%2Freact-trend/lists"}