Creating Gauge chart in React Native
Basic components needed for a gauge chart are Dial Needle Progress We create the dial using the following piece renderDial = opts => { return ( <Circle cx={opts.cX} cy={opts.cY} r={opts.radius} fill="none" stroke={opts.dialColor} strokeWidth={opts.dialWidth} /> ); }; And for the needle we will create it using Line in Svg Time to bind everything <Svg className={opts.className} height={size} width={size} viewBox={`0 0 ${size} ${size}`} > <Defs>{this.defineTick(opts)}</Defs> <G transform={`rotate(-90 ${cX} ${cY})`}> {this.renderDial(opts)} {this.renderTicks(opts)} {this.renderProgress(opts)} {this.renderNeedle(opts)} {this.renderText(opts)} </G> </Svg> Click here to view the codes from repo Implementation of Gauge <Gauge size={200} curre...