jqwidgets-framework/demos/react/app/knob/knobrotation/app.js

jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

import React from 'react';
import ReactDOM from 'react-dom';

import JqxKnob from '../../../jqwidgets-react/react_jqxknob.js';

class App extends React.Component {
    render() {
        let marks = {
            colorRemaining: '#fff',
            colorProgress: '#fff',
            type: 'line',
            offset: '75%',
            thickness: 2,
            size: '15%',
            majorSize: '15%',
            drawAboveProgressBar: true,
            majorInterval: 10,
            minorInterval: 2
        };

        let labels = {
            offset: '50%',
            rotate: true,
            step: 10
        };

        let progressBar = {
            size: '15%',
            offset: '75%',
            style: {
                stroke: '#a2da39', strokeWidth: 1, fill: '#a2da39'
            },
            background: {
                stroke: '#d1d2d4', strokeWidth: 1, fill: '#d1d2d4'
            }
        };

        let pointer = {
            type: 'arrow', style: { fill: '#a2da39' },
            size: '55%', thickness: 5, offset: '0%'

        };

        let dial = {
            innerRadius: '0%', // specifies the inner Radius of the dial
            outerRadius: '65%', // specifies the outer Radius of the dial
            style: {
                stroke: '#ff0000', strokeWidth: 1, fill: { color: '#66707e', gradientType: 'linear', gradientStops: [[0, 1], [50, 0.4], [100, 1]] }
            }
        };

        let spinner = {
            size: '70%',
            innerRadius: '60%', // specifies the inner Radius of the dial
            outerRadius: '65%', // specifies the outer Radius of the dial
            marks: {
                colorRemaining: '#d5d3d4',
                colorProgress: '#d5d3d4',
                type: 'line',
                offset: '60%',
                thickness: 1,
                size: '5%',
                majorSize: '5%',
                majorInterval: 10,
                minorInterval: 2
            },
            style: {
                stroke: '#d5d3d4', strokeWidth: 1, fill: { color: '#dfe3e9', gradientType: 'linear', gradientStops: [[0, 0.5], [50, 0.5], [100, 0.5]] }
            }
        };

        return (
            <JqxKnob className='myKnob'
                min={0} max={100} value={60} startAngle={120} endAngle={480}
                dragStartAngle={120} dragEndAngle={420} rotation={'counterclockwise'}
                snapToStep={true} marks={marks} labels={labels} spinner={spinner}
                progressBar={progressBar} pointer={pointer} dial={dial}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));