React Range Area Chart

  • Visualize a range that changes over time with the KendoReact Range Area Chart.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Range Area Chart Header
  • Create Compelling Visualizations with the KendoReact Range Area Chart

    The KendoReact Range Area Chart visually represents an area between the low and high values of a variable as it evolves over time. The area space between the upper and the lower values is filled with color and the X-axis typically represents a timeline. The React Range Area Chart is ideal for illustrating value ranges, such as the fluctuation between minimum and maximum prices over a specific period of time.  

    See the React Range Area demo

  • Panning and Zooming

    Utilize the built-in panning and zooming capability to allows users to focus on particular sections of the KendoReact Range Area Chart. The component makes use of a drag motion for panning and a mouse wheel or pinch-and-zoom motions for zooming. Furthermore, you have the option to disable panning and zooming for a given axis to restricts users from navigating vertically or horizontally within the chart plot area. 

    See the React Range Area Chart pan and zoom demo 

  • Range Area Rendering Modes

    The React Range Area Chart can render data in both Canvas and SVG formats. By default, the SVG format ensures an always crips presentation of your data. However, when prioritizing performance, you can easily switch to a canvas format with a single configuration option. This will ensure your chart can handle substantial amounts of data and real-time updates without any issues. 

    See the React Range Area Chart rendering demo 

  • Export Options

    You have the flexibility to easily export your React Range Area Chart to PDF, SVG, PNG and the Kendo UI drawing format. In case you need to adjust the image size or fit the chart to a particular paper size, the user-friendly export method will enable you to preserve the chart’s quality and rendering in the output file. 

    See the React Range Area Chart export demo   

  • Appearance

    Tailor the series colors of the KendoReact Range Area component with one of our predefined color sets, including Default, Material, Bootstrap and Fluent. For even greater customization, you can further customize any of the built-in themes or craft a completely new theme to reflect your brand identity using the Progress ThemeBuilder

    See the React Range Area Chart appearance demo   

  • Globalization

    The KendoReact Range Area Chart supports globalization and localization capabilities to ensure effective support for various languages and locales within your app. Additionally, you can utilize the right-to-left (RTL) support for languages that use right-to-left scripts. 

    See the React Range Area Chart globalization demo 


All KendoReact Components

Next Steps