{"id":22808892,"url":"https://github.com/morganney/react-meter-chart","last_synced_at":"2026-01-31T10:34:15.616Z","repository":{"id":187533887,"uuid":"677150070","full_name":"morganney/react-meter-chart","owner":"morganney","description":"React component very similar to an HTML \u003cmeter\u003e, but enhanced.","archived":false,"fork":false,"pushed_at":"2025-12-14T06:09:03.000Z","size":492,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-16T08:08:47.013Z","etag":null,"topics":["chart","meter","react"],"latest_commit_sha":null,"homepage":"https://morganney.github.io/react-meter-chart/","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/morganney.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,"zenodo":null}},"created_at":"2023-08-10T21:39:20.000Z","updated_at":"2025-12-14T06:08:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"b3ceac27-5948-4014-89b1-596e0ac180f7","html_url":"https://github.com/morganney/react-meter-chart","commit_stats":null,"previous_names":["morganney/react-meter-chart"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/morganney/react-meter-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Freact-meter-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Freact-meter-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Freact-meter-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Freact-meter-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morganney","download_url":"https://codeload.github.com/morganney/react-meter-chart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Freact-meter-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28938649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T10:18:23.202Z","status":"ssl_error","status_checked_at":"2026-01-31T10:18:22.693Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","meter","react"],"created_at":"2024-12-12T11:12:43.793Z","updated_at":"2026-01-31T10:34:15.594Z","avatar_url":"https://github.com/morganney.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [`react-meter-chart`](https://www.npmjs.com/package/react-meter-chart)\n\n![CI](https://github.com/morganney/react-meter-chart/actions/workflows/ci.yml/badge.svg)\n[![codecov](https://codecov.io/gh/morganney/react-meter-chart/branch/main/graph/badge.svg?token=D81HI92YGO)](https://codecov.io/gh/morganney/react-meter-chart)\n[![NPM version](https://img.shields.io/npm/v/react-meter-chart.svg)](https://www.npmjs.com/package/react-meter-chart)\n\nReact component to render an element very much like an [HTML \u0026lt;meter\u0026gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter). Basically a reason to improve the [answer from a stackoverflow question](https://stackoverflow.com/questions/73961347/range-line-component-in-react/73999120#73999120).\n\n\u003cimg src=\"./react-meter-chart.png\" alt=\"Meter chart react component\" width=\"425\" /\u003e\n\nSee the [demo](https://morganney.github.io/react-meter-chart).\n\n## Getting Started\n\nFirst install `react-meter-chart`:\n\n```console\nnpm install react-meter-chart\n```\n\nNext include it in your React app:\n\n```jsx\nimport React from 'react'\nimport { createRoot } from 'react-dom/client'\nimport { MeterChart } from 'react-meter-chart'\n\nconst root = createRoot(document.getElementById('root'))\n\nroot.render(\n  \u003cmain\u003e\n    \u003cMeterChart value={50} low={35} high={65} /\u003e\n  \u003c/main\u003e\n)\n```\n\n## Example\n\nCheck out the demo at https://morganney.github.io/react-meter-chart.\n\n### CDN with Import Map\n\nYou can skip a build step completely by placing this inside of your Vite project's `dist` directory to quickly preview with `vite preview`.\n\n**index.html**\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003cscript type=\"importmap\"\u003e\n      {\n        \"imports\": {\n          \"react\": \"https://esm.sh/react\",\n          \"react-dom/\": \"https://esm.sh/react-dom/\",\n          \"styled-components\": \"https://esm.sh/styled-components\",\n          \"react-meter-chart\": \"https://esm.sh/react-meter-chart\",\n          \"htm/\": \"https://esm.sh/htm/\"\n        }\n      }\n    \u003c/script\u003e\n    \u003ctitle\u003eCDN with Import Map: react-meter-chart\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003cscript type=\"module\"\u003e\n      import { createRoot } from 'react-dom/client'\n      import { MeterChart } from 'react-meter-chart'\n      import { html } from 'htm/react'\n\n      createRoot(document.getElementById('root')).render(\n        html`\n          \u003c${MeterChart} value=${50} low=${45} high=${65} /\u003e\n        `\n      )\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nNow navigate to http://localhost:4173.\n\n### Build\n\nTo use it with a transpiler or bundler just import the component from this package. For instance, to use it with a new Vite project after [scaffolding](https://vitejs.dev/guide/#scaffolding-your-first-vite-project), change the file `src/App.tsx`:\n\n**src/App.tsx**\n\n```jsx\nimport { MeterChart } from 'react-meter-chart'\n\nfunction App() {\n  return (\n    \u003cmain\u003e\n      \u003cMeterChart value={50} low={35} high={65} /\u003e\n    \u003c/main\u003e\n  )\n}\n\nexport default App\n```\n\nAlso, remove the default styles from `src/main.tsx`:\n\n```diff\nimport React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.tsx'\n-import './index.css'\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  \u003cReact.StrictMode\u003e\n    \u003cApp /\u003e\n  \u003c/React.StrictMode\u003e,\n)\n```\n\nNow run `vite build` followed by `vite preview`.\n\n## Props\n\nIt accepts props very much like the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter\"\u003eHTML \u0026lt;meter\u0026gt; element\u003c/a\u003e attributes.\n\n```ts\ninterface MeterChartProps {\n  value: number\n  min?: number\n  max?: number\n  low?: number\n  high?: number\n  size?: Size\n  scale?: number\n  colors?: Colors\n  showBoundsLabel?: boolean\n}\ninterface Colors {\n  dot?: string\n  bounds?: string\n  range?: string\n  label?: string\n}\ntype Size = 'small' | 'medium' | 'large'\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganney%2Freact-meter-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorganney%2Freact-meter-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganney%2Freact-meter-chart/lists"}