Charts

Chart UI components are interactive elements designed to present data in a visually appealing and easy-to-understand format. Using chart components in Reasy, you may portray information in intuitive charts, graphs, or diagrams, making it simpler for users to interpret and analyze data patterns, trends, and relationships.

The chart components in Reasy offer a comprehensive range of options to cater to various data visualization needs. By leveraging these components, you can create compelling and informative visual representations of your data within your app.

Moreover, these chart components offer flexibility in customization, allowing developers to adjust their appearance and behavior to align with the specific requirements of their applications.

Here’s the list of chart components available in Reasy:

Bar Chart

A bar chart presents categorical data with rectangular bars. Each bar's length or height is proportional to the value it represents.

They are suitable for illustrating categorical or discrete data.

Example:

In a sales report, you can use a bar chart to compare monthly sales figures for different products. Each bar represents a product, and its height corresponds to the sales amount.

Line Chart

A line chart displays data points connected by straight lines.

It is ideal to visualize trends over a continuous interval or time series of data.

Example: Tracking stock prices over a year. The line chart would show the daily closing prices, revealing how the stock's value has changed.

Pie Chart

A pie chart is a circular graph divided into sectors, where each sector represents a category's proportion of the whole.

It is ideal for showing parts of a whole.

Example: Displaying the distribution of expenses in a monthly budget. Each slice of the pie represents a spending category like rent, groceries, entertainment, etc.

Scatter Chart

A scatter chart uses dots to represent individual data points.

Use it when you need to visualize the relationship between two variables.

Example: Analyzing the correlation between the age and income of employees in a company. Each dot represents an employee, with age on the X-axis and income on the Y-axis.

Bubble Chart

Visualizes data as a series of bubbles on a two-dimensional plane, where the bubble's size represents the data point's value. A bubble chart extends the scatter chart by adding a third dimension, typically represented by the size of the bubbles.

Use it when you need to visualize three variables in a single chart. Example: Visualizing the performance of products based on sales (X-axis), profit margins (Y-axis), and the number of units sold (bubble size).

Area Chart

An area chart is similar to a line chart, but the area between the line and the x-axis is filled with color, making it useful for showing cumulative data.

Example: Tracking website traffic over time. The area chart represents the total number of daily visitors, showcasing trends in web traffic.

Donut Chart

A Donut Chart, also called a Doughnut Chart, is a kind of Pie Chart with a blank center that allows for additional information about the data as a whole to be included.

Example: Visualizing the distribution of time spent on different tasks in a day. The donut chart shows the categories, and the center can display the total hours.

Funnel Chart

Visualizes data values as progressively decreasing proportions that amount to 100% in total, where the corresponding series value determines the size of each area as a percentage.

It is often used in sales and marketing.

Example: Representing a sales pipeline, showing the number of leads at each stage (prospects, qualified leads, proposals, closed deals).

Venn Chart

Illustrates the relationships between different sets of data in the form of overlapping circles.

It is ideal for showing commonalities and differences.

Example: Suppose you want to illustrate the common interests between three groups of people: A, B, and C. A Venn chart would show overlapping circles, with each circle representing a group and the overlaps indicating shared interests.

Step Chart

Visualizes how a variable changes over time and emphasizes leaps in transition from one value to another in a step-like look chart.

It is ideal to display data changes at specific points, typically in a stepwise manner.

Example: Plotting the fluctuation in stock prices over time. The step chart highlights the specific dates when significant changes occurred.

Spline Chart

A kind of line chart with data points connected to a smooth curve is widely used to show trends over time. It provides a more continuous representation of data.

Example: Plotting temperature variations throughout the day. The spline chart offers a smooth curve to visualize temperature changes.

Solid Guage Chart

A Highchart visual component, that renders one or more values on a radial scale. It is highly customizable, supporting tooltips, gradients, and more. It is often used in dashboards to track progress or performance metrics.

It offers complete control over:

• Color zones (e.g., Green for good, Red for alert)

• Tooltip and animation settings

• Binding values dynamically

As this chart component is excellent for KPIs, dashboards, and real-time data, it is ideal for data-rich use cases.

Example: Real-time server load (e.g., 64% CPU usage), credit utilization, SLA compliance tracker, and more.

Heatmap

This Heatmap is a geographic data visualization that colors regions (like states or countries) based on values such as categories or counts. It is useful for representing location-based data in a highly visual way. This interactive component can be customized with titles, labels, and legends.

Examples: Some real-word examples include healthcare access like vaccination status, weather forecast, sales analysis, tax compliance status, and more.

A few tips for effective use:

• Keep the color categories simple; avoid more than 4–5.

• Always turn on the legend for clarity.

• Use aggregate mode if you want to show summed data per region (e.g., number of reports).

• Match color intensity or type to the data — e.g., green for safe, red for risky.

However, the choice of chart depends on the specific data and the message you want to convey. These examples should help you understand when and where to use each chart effectively.