background

KendoReact

React Scatter Chart

  • Visualize data correlations with the KendoReact Scatter Chart.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Scatter Chart Header
  • Create Powerful Scatter Charts with KendoReact

    The KendoReact Scatter Chart is a numerical data visualization that displays data points as dots over the plot area. The component effectovely illustrates the relationship between two numerical variables. It is ideal for showcasing the correlation of numeric variables in data analysis. The KendoReact Scatter Chart offers a wealth of features, including a built-in legend, series colors, tooltips, and more. 

    See the React Scatter Chart demo 

    Scatter Chart overview
  • Line Style

    The KendoReact Scatter Line Chart enables you to choose between a standard line (the default style, including a straight line between the data points) and a smooth style (featuring a fitted curve through data points) for your scatter lines. You can set the line style by simply using the chart’s style property. 

    See the React Scatter Line Chart line style demo 

    Scatter line chart
  • Panning and Zooming

    Utilize the built-in panning and zooming capability to empower users to focus on specific sections of the KendoReact Scatter Chart. The component makes use of a drag motion for panning and a mouse wheel or pinch-and-zoom motions for zooming. Moreover, you have the option to disable the panning and zooming for a given axis to prevent users from moving vertically or horizontally across the chart plot area. 

    See the React Charts panning and zooming demo 

  • Export Options

    You can easily export your React Scatter 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 Scatter Chart export options demo   

  • Appearance

    Modify the series colors of the KendoReact Scatter component with one of our predefined color schemes, including Default (our own style), Material, Bootstrap and Fluent. Additionally, you have the flexibility to fine-tune any of the built-in themes or craft a completely new theme to reflect your brand identity using the Progress ThemeBuilder

    See the React Scatter Chart appearance demo   

  • Globalization

    The KendoReact Scatter Chart provides globalization and localization capabilities to ensure effective support for different languages and locales within your React app. Additionally, you have the option to utilize the right-to-left (RTL) support for languages that use right-to-left scripts. 

    See the React Scatter Chart globalization demo 

    Globalization

All KendoReact Components

Next Steps