KendoReact

React ArcGauge

  • This sleek React data visualization component comes with a rich feature set including color ranges, exporting and globalization.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Overview

    The React ArcGauge, part of KendoReact, is perfect for representing value ranges across a sleek looking arc. This React component features the ability to define a minimum and maximum angle, letting arcs range from 0 to 360 degrees, and the current value will be displayed within the arc itself as well as a template in the middle of the component.

    See React ArcGauge Overview demo

    React ArcGauge - Overview, KendoReact UI Library
  • Center Template

    With the template feature of the KendoReact ArcGauge, a custom renderer can be passed in to render anything in the center of the arc gauge.

    See React ArcGauge Center Template demo

    React ArcGauge - Center Template, KendoReact UI Library
  • Color Ranges

    By default, the KendoReact ArcGauge has a single color to represent the current value of the arc, but requirements may call for certain values to be represented by different colors. This is where the color ranges feature of the React ArcGauge come in to play as an array can be passed with the applicable range values and with the color the arc should have when the value falls within that particular range.

    See React ArcGauge Color Ranges demo

    React ArcGauge - Color Ranges, KendoReact UI Library
  • Scale Options

    Out of the box, the KendoReact ArcGauge is a simple gauge ranging from 0 to 180 degrees without any labels or ticks. While seemingly simple at first, the React ArcGauge component is extremely customizable and allows for the start and end angles to be set, has the ability to show ticks with or without labels along certain intervals, and can provide different colors for ticks and labels.

    See React ArcGauge Scale Options demo

    React ArcGauge - Scale Options, KendoReact UI Library
  • Export Options

    Thanks to built-in integration with the KendoReact Drawing library, the KendoReact ArcGauge component can be exported to various image formats, PDF files, as well as an SVG file.

    See React ArcGauge Export Options demo

    React ArcGauge - Export Options, KendoReact UI Library
  • Globalization

    The KendoReact ArcGauge supports right-to-left rendering as well as language customization of any labels.

    See React ArcGauge Globalization demo

    React ArcGauge - Globalization, KendoReact UI Library

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.