Launch Week Day 1: Socket for Jira Is Now Available.Learn More →

Book a Demo Sign in

react-meter-chart

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-meter-chart

React component for linearly charting a value against a target range bounded by a max and min, much like an HTML meter element.

latest

Source

npm

Version: 3.0.0

Version published: 2 months ago

Maintainers: 1

Created: 3 years ago

Source

`react-meter-chart`

React component to render an element very much like an HTML <meter>. Basically a reason to improve the answer from a stackoverflow question.

See the demo.

Getting Started

First install react-meter-chart:

npm install react-meter-chart

Next include it in your React app:

import React from 'react'
import { createRoot } from 'react-dom/client'
import { MeterChart } from 'react-meter-chart'

const root = createRoot(document.getElementById('root'))

root.render(
  <main>
    <MeterChart value={50} low={35} high={65} />
  </main>
)

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="importmap">
      {
        "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/"
        }
      }
    </script>
    <title>CDN with Import Map: react-meter-chart</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module">
      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} />
        `
      )
    </script>
  </body>
</html>

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, change the file src/App.tsx:

src/App.tsx

import { MeterChart } from 'react-meter-chart'

function App() {
  return (
    <main>
      <MeterChart value={50} low={35} high={65} />
    </main>
  )
}

export default App

Also, remove the default styles from src/main.tsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
-import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Now run vite build followed by vite preview.

Props

It accepts props very much like the HTML <meter> element attributes.

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'

Keywords

FAQs

What is react-meter-chart?

Is react-meter-chart well maintained?

Package last updated on 08 Feb 2026

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-meter-chart

Getting Started

Example

CDN with Import Map

Build

Props

Keywords

Related posts

Socket Named Top Sales Organization by RepVue

NIST Officially Stops Enriching Most CVEs as Vulnerability Volume Skyrockets