CODEWITHSUNDEEP
htmlcssreactjs
AnApprentice
AnApprentice

Reputation: 110960

How to build a arc/radial-style meter using CSS?

Within my React app, I need to build a UI component that is a arc/radial loading meter like seen in the following image:

example

Where the black bar starts at 0 and animated in to a desired % between 0-100.

And the gray bar is static, like a background.

I found several open source graphing libraries that do something similar but not close enough to work. Any suggestions on how to approach building this kind of UI w css within my react app? Additionally, if you know of a React library that supports this UI, please let me know.

Upvotes: 0

Views: 719

Answers (1)

Mobilpadde
Mobilpadde

Reputation: 1881

Take a look at, https://gionkunz.github.io/chartist-js/ or https://gist.github.com/emiloberg/ee549049ea0f6b83e25f1a1110947086

All have at least something you can use fully or parts of.

If you're lazy: https://gionkunz.github.io/chartist-js/examples.html#simple-gauge-chart

-- Edit --

You can use react-chartist to use this with react. An example would be:

import React from 'react';
import ChartistGraph from 'react-chartist';

const gaugeChartData = {
  series: [
    series: [20, 10, 30, 40]
  ]
};

const gaugeChartOptions = {
  donut: true,
  donutWidth: 60,
  startAngle: 270,
  total: 200,
  showLabel: false
}

<ChartistGraph data={gaugeChartData} options={} type={'Pie'} />

Use with caution, it's untested

Upvotes: 2

Related Questions