https://github.com/morganney/react-meter-chart
React component very similar to an HTML <meter>, but enhanced.
https://github.com/morganney/react-meter-chart
chart meter react
Last synced: 5 months ago
JSON representation
React component very similar to an HTML <meter>, but enhanced.
- Host: GitHub
- URL: https://github.com/morganney/react-meter-chart
- Owner: morganney
- License: mit
- Created: 2023-08-10T21:39:20.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-12-14T06:09:03.000Z (6 months ago)
- Last Synced: 2025-12-16T08:08:47.013Z (6 months ago)
- Topics: chart, meter, react
- Language: TypeScript
- Homepage: https://morganney.github.io/react-meter-chart/
- Size: 480 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [`react-meter-chart`](https://www.npmjs.com/package/react-meter-chart)
[](https://codecov.io/gh/morganney/react-meter-chart)
[](https://www.npmjs.com/package/react-meter-chart)
React component to render an element very much like an [HTML <meter>](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).
See the [demo](https://morganney.github.io/react-meter-chart).
## Getting Started
First install `react-meter-chart`:
```console
npm install react-meter-chart
```
Next include it in your React app:
```jsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import { MeterChart } from 'react-meter-chart'
const root = createRoot(document.getElementById('root'))
root.render(
)
```
## Example
Check out the demo at https://morganney.github.io/react-meter-chart.
### CDN with Import Map
You can skip a build step completely by placing this inside of your Vite project's `dist` directory to quickly preview with `vite preview`.
**index.html**
```html
{
"imports": {
"react": "https://esm.sh/react",
"react-dom/": "https://esm.sh/react-dom/",
"styled-components": "https://esm.sh/styled-components",
"react-meter-chart": "https://esm.sh/react-meter-chart",
"htm/": "https://esm.sh/htm/"
}
}
CDN with Import Map: react-meter-chart
import { createRoot } from 'react-dom/client'
import { MeterChart } from 'react-meter-chart'
import { html } from 'htm/react'
createRoot(document.getElementById('root')).render(
html`
<${MeterChart} value=${50} low=${45} high=${65} />
`
)
```
Now navigate to http://localhost:4173.
### Build
To 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`:
**src/App.tsx**
```jsx
import { MeterChart } from 'react-meter-chart'
function App() {
return (
)
}
export default App
```
Also, remove the default styles from `src/main.tsx`:
```diff
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
-import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
,
)
```
Now run `vite build` followed by `vite preview`.
## Props
It accepts props very much like the HTML <meter> element attributes.
```ts
interface MeterChartProps {
value: number
min?: number
max?: number
low?: number
high?: number
size?: Size
scale?: number
colors?: Colors
showBoundsLabel?: boolean
}
interface Colors {
dot?: string
bounds?: string
range?: string
label?: string
}
type Size = 'small' | 'medium' | 'large'
```