Charts

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.

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.

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.

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.

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).

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.

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.

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).

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.

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.

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.

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.

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.