{"id":30068616,"url":"https://github.com/graphieros/tiny-spark","last_synced_at":"2025-08-08T10:46:18.013Z","repository":{"id":284623364,"uuid":"954509446","full_name":"graphieros/tiny-spark","owner":"graphieros","description":"An elegant, reactive and responsive sparkline chart solution without dependency.","archived":false,"fork":false,"pushed_at":"2025-07-01T18:31:59.000Z","size":189,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-02T10:14:21.716Z","etag":null,"topics":["chart","sparkline","universal"],"latest_commit_sha":null,"homepage":"https://tiny-spark.graphieros.com/","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/graphieros.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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-03-25T07:36:03.000Z","updated_at":"2025-07-15T09:13:24.000Z","dependencies_parsed_at":"2025-03-26T20:51:21.436Z","dependency_job_id":"f8ad5e7c-fef2-4b0b-8e9d-ceefb685ef58","html_url":"https://github.com/graphieros/tiny-spark","commit_stats":null,"previous_names":["graphieros/tiny-spark"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/graphieros/tiny-spark","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Ftiny-spark","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Ftiny-spark/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Ftiny-spark/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Ftiny-spark/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphieros","download_url":"https://codeload.github.com/graphieros/tiny-spark/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Ftiny-spark/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269410055,"owners_count":24412147,"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-08-08T02:00:09.200Z","response_time":72,"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","sparkline","universal"],"created_at":"2025-08-08T10:46:15.839Z","updated_at":"2025-08-08T10:46:17.990Z","avatar_url":"https://github.com/graphieros.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tiny-spark\n\n[![npm](https://img.shields.io/npm/v/tiny-spark)](https://github.com/graphieros/tiny-spark)\n[![GitHub issues](https://img.shields.io/github/issues/graphieros/tiny-spark)](https://github.com/graphieros/tiny-spark/issues)\n[![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/graphieros/tiny-spark?tab=MIT-1-ov-file#readme)\n[![npm](https://img.shields.io/npm/dt/tiny-spark)](https://github.com/graphieros/tiny-spark)\n\nAn elegant, reactive and responsive sparkline chart solution without dependency.\n\n\u003cimg width=\"500\" alt=\"image\" src=\"https://github.com/user-attachments/assets/d312a234-8e09-44a2-89fd-5ae85a6cdbec\" /\u003e\n\n[DEMO](https://tiny-spark.graphieros.com/)\n\n## Installation\n\n```\nnpm i tiny-spark\n```\n\n## Usage\n\nImport the file in your project:\n\n```js\nimport { render } from \"tiny-spark\";\n\n// If you need to fetch data, call render afterwards\ngetData().then(render);\n\n// If you hardcode your dataset, you can call render immediately\n```\n\nCalling render again will re-trigger the animation (if data-animation is set to \"true\").\n\nJust set up a div with a \"tiny-spark\" class, with a few data attributes to configure the chart.\nNote that providing data-id is optional, a unique id will be generated if you don't.\n\nRender a line chart:\n\n```html\n\u003cdiv style=\"width: 100%\"\u003e\n  \u003cdiv\n    class=\"tiny-spark\"\n    data-id=\"myId\"\n    data-type=\"line\"\n    data-curve=\"true\"\n    data-set=\"[1, 2, 3, 5, 8, 13]\"\n    data-dates='[\"01-2026\", \"02-2026\", \"03-2026\", \"04-2026\", \"05-2026\", \"06-2026\"]'\n    data-responsive\n    data-animation=\"true\"\n    data-line-color=\"#4A4A4A\"\n    data-area-color=\"#1A1A1A10\"\n    data-line-thickness=\"4\"\n    data-plot-color=\"#2A2A2A\"\n    data-plot-radius=\"2\"\n    data-hide-plots-above=\"100\"\n    data-number-locale=\"en-US\"\n    data-number-rounding=\"2\"\n    data-indicator-color=\"#1A1A1A\"\n    data-indicator-width=\"1\"\n    data-show-last-value=\"true\"\n    data-last-value-font-size=\"12\"\n    data-last-value-color=\"#1A1A1A\"\n    data-tooltip-smoothing=\"1\"\n  \u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nRender a bar chart:\n\n```html\n\u003cdiv style=\"width: 100%\"\u003e\n  \u003cdiv\n    class=\"tiny-spark\"\n    data-id=\"myId\"\n    data-type=\"bar\"\n    data-set=\"[1, 2, 3, 5, 8, 13]\"\n    data-dates='[\"01-2026\", \"02-2026\", \"03-2026\", \"04-2026\", \"05-2026\", \"06-2026\"]'\n    data-responsive\n    data-animation=\"true\"\n    data-line-thickness=\"4\"\n    data-plot-color=\"#2A2A2A\"\n    data-number-locale=\"en-US\"\n    data-number-rounding=\"2\"\n    data-indicator-width=\"0\"\n    data-show-last-value=\"true\"\n    data-last-value-font-size=\"12\"\n    data-last-value-color=\"#1A1A1A\"\n    data-tooltip-smoothing=\"1\"\n  \u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Styling\n\ntiny-spark is headless.\n\nTarget the following css classes to customize elements:\n\n```css\n/** the chart container (div element) */\n.tiny-spark {\n}\n\n/** the tooltip (div element) */\n.tiny-spark-tooltip {\n  /** just display:none if you don't need it */\n}\n\n/** the indicator (svg line element) */\n.tiny-spark-indicator {\n  /** for example: customize stroke-dasharray */\n}\n\n/** the plots (svg circle element) */\n.tiny-spark-datapoint-circle {\n}\n\n/** the chart line (svg path element) */\n.tiny-spark-line-path {\n}\n\n/** the chart area (svg path element) */\n.tiny-spark-line-area {\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Ftiny-spark","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphieros%2Ftiny-spark","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Ftiny-spark/lists"}