{"id":13421945,"url":"https://github.com/borisyankov/react-sparklines","last_synced_at":"2025-05-13T18:09:03.338Z","repository":{"id":34285053,"uuid":"38173848","full_name":"borisyankov/react-sparklines","owner":"borisyankov","description":"Beautiful and expressive Sparklines React component","archived":false,"fork":false,"pushed_at":"2024-09-21T08:39:00.000Z","size":1028,"stargazers_count":2841,"open_issues_count":64,"forks_count":195,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-04-25T14:50:35.935Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/borisyankov.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}},"created_at":"2015-06-27T20:15:06.000Z","updated_at":"2025-04-24T06:23:05.000Z","dependencies_parsed_at":"2024-06-18T11:12:06.745Z","dependency_job_id":"62d1b7ae-c57a-4cd5-9769-801c8d0f8e4c","html_url":"https://github.com/borisyankov/react-sparklines","commit_stats":{"total_commits":119,"total_committers":20,"mean_commits":5.95,"dds":"0.47058823529411764","last_synced_commit":"6096fe7e6ae6b3fe64e649256f976504a382d7c5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borisyankov%2Freact-sparklines","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borisyankov%2Freact-sparklines/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borisyankov%2Freact-sparklines/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borisyankov%2Freact-sparklines/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/borisyankov","download_url":"https://codeload.github.com/borisyankov/react-sparklines/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000850,"owners_count":21997441,"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":[],"created_at":"2024-07-30T23:00:34.311Z","updated_at":"2025-05-13T18:09:03.314Z","avatar_url":"https://github.com/borisyankov.png","language":"JavaScript","funding_links":[],"categories":["UI Components","Uncategorized","JavaScript","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","React"],"sub_categories":["Chart","Uncategorized","Data Visualization","React Components"],"readme":"# Beautiful and expressive sparklines component for React\n\n[![Build Status](https://travis-ci.org/borisyankov/react-sparklines.svg?branch=master)](https://travis-ci.org/borisyankov/react-sparklines)\n\nLive demos and docs: [borisyankov.github.io/react-sparklines/](http://borisyankov.github.io/react-sparklines/)\n\n![](http://borisyankov.github.io/react-sparklines/img/dynamic.gif)\n\n## Install\n\n```\nnpm install react-sparklines --save\n```\n\n## Run demo\n\n```\nnpm install\nnpm start\nhttp://localhost:8080\n```\n\n\n## Use\n\nImport the Sparklines components that you need; for example to generate a simple chart:\n\n![](http://borisyankov.github.io/react-sparklines/img/basic.png)\n\n```\nimport React from 'react';\nimport { Sparklines } from 'react-sparklines';\n...\n\u003cSparklines data={[5, 10, 5, 20, 8, 15]} limit={5} width={100} height={20} margin={5}\u003e\n\u003c/Sparklines\u003e\n```\n\nSparklines component is a container with the following properties:\n\ndata - the data set used to build the sparkline\n\nlimit - optional, how many data points to display at once\n\nwidth, height - dimensions of the generated sparkline in the SVG viewbox.  This will be automatically scaled (i.e. responsive) inside the parent container by default.\n\nsvgWidth, svgHeight - If you want absolute dimensions instead of a responsive component set these attributes.\n\n[preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) - default: 'none', set this to modify how the sparkline should scale \n\nmargin - optional, offset the chart\n\nmin, max - optional, bound the chart\n\n\n#### Basic Sparkline\n\n![](http://borisyankov.github.io/react-sparklines/img/customizable.png)\n\n```\nimport React from 'react';\nimport { Sparklines, SparklinesLine } from 'react-sparklines';\n...\n\u003cSparklines data={[5, 10, 5, 20]}\u003e\n  \u003cSparklinesLine color=\"blue\" /\u003e\n\u003c/Sparklines\u003e\n```\n\n#### Bars\n\n![](http://borisyankov.github.io/react-sparklines/img/bars.png)\n\n\n```\nimport React from 'react';\nimport { Sparklines, SparklinesBars } from 'react-sparklines';\n...\n\u003cSparklines data={[5, 10, 5, 20]}\u003e\n  \u003cSparklinesBars /\u003e\n\u003c/Sparklines\u003e\n```\n\n#### Spots\n\n![](http://borisyankov.github.io/react-sparklines/img/spots.png)\n\n\n```\nimport React from 'react';\nimport { Sparklines, SparklinesLine, SparklinesSpots } from 'react-sparklines';\n...\n\u003cSparklines data={sampleData}\u003e\n    \u003cSparklinesLine style={{ fill: \"none\" }} /\u003e\n    \u003cSparklinesSpots /\u003e\n\u003c/Sparklines\u003e\n```\n\n#### Reference Line\n\n![](http://borisyankov.github.io/react-sparklines/img/referenceline.png)\n\n\n```\nimport React from 'react';\nimport { Sparklines, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';\n...\n\u003cSparklines data={sampleData}\u003e\n    \u003cSparklinesLine /\u003e\n    \u003cSparklinesReferenceLine type=\"mean\" /\u003e\n\u003c/Sparklines\u003e\n```\n\n#### Normal Band\n\n![](http://borisyankov.github.io/react-sparklines/img/normalband.png)\n\n\n```\nimport React from 'react';\nimport { Sparklines, SparklinesLine, SparklinesNormalBand } from 'react-sparklines';\n...\n\u003cSparklines data={sampleData}\u003e\n    \u003cSparklinesLine style={{ fill: \"none\" }}/\u003e\n    \u003cSparklinesNormalBand /\u003e\n\u003c/Sparklines\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fborisyankov%2Freact-sparklines","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fborisyankov%2Freact-sparklines","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fborisyankov%2Freact-sparklines/lists"}