react-canvas-gauges
react-canvas-gauges copied to clipboard
Getting error when using linear gauge
Error : DOMException: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-3) is negative.
Script:
import {RadialGauge,LinearGauge} from 'react-canvas-gauges';
<LinearGauge
Width="120"
Height="400"
Units="°C"
MinValue="0"
StartAngle="90"
TicksAngle="180"
ValueBox="false"
MaxValue="220"
MajorTicks="0,20,40,60,80,100,120,140,160,180,200,220"
MinorTicks="2"
StrokeTicks="true"
Highlights='[ {"from": 100, "to": 220, "color": "rgba(200, 50, 50, .75)"} ]'
ColorPlate="#fff"
BorderShadowWidth="0"
Borders="false"
NeedleType="arrow"
NeedleWidth="2"
NeedleCircleSize="7"
NeedleCircleOuter="true"
NeedleCircleInner="false"
AnimationDuration="1500"
AnimationRule="linear"
BarWidth="10"
Value="35"
/>