KendoReact

React LinearGauge

  • This sleek React data visualization component comes with a rich feature set including using scale 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 LinearGauge, part of KendoReact, represents values on a linear scale, providing not just a bar to showcase current value but also a scale of tick and labels to help showcase what the value represents. The React LinearGauge can be rendered in both horizontal and vertical modes.

    See React LinearGauge Overview demo

    React LinearGauge - Overview, KendoReact UI Library
  • Scale Ranges

    With the Scale Ranges feature of the KendoReact LinearGauge, predefined ranges within the LinearGauge scale can be color coded to provide additional context for the potential values of the LinearGauge.

    See React LinearGauge Scale Ranges demo

    React LinearGauge - Scale Ranges, KendoReact UI Library
  • Multiple Pointers

    Values of the KendoReact LinearGauge can be displayed as a bar shape, or as traditional pointers to be displayed along the provided scale. These pointers can be a part of a collection, allowing for multiple pointers to be displayed on a single React LinearGauge.

    See React LinearGauge Multiple Pointers demo

    React LinearGauge - Multiple Pointers, KendoReact UI Library
  • Orientation

    The KendoReact LinearGauge provides a single property to define if the gauge should be displayed in a horizontal or vertical fashion.

    See React LinearGauge Orientation demo

    React LinearGauge - Orientation, KendoReact UI Library
  • Scale Options

    Every aspect of the KendoReact LinearGauge can be customized by interacting with the various configuration options provided. This includes items like the range color, scale line color, label and tick representation and colors and more!

    See React LinearGauge Scale Options demo

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

    With the built-in integration with the KendoReact Drawing library, the React LinearGauge component can be exported to various image formats, as an SVG file, or as a part of a PDF file.

    See React LinearGauge Export Options demo

    React LinearGauge - Export Options, KendoReact UI Library
  • Globalization

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

    See React LinearGauge Globalization demo

    React LinearGauge - 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.