Common Chart Usage Methods

1. Overview

When building analytical dashboards, we often use various types of charts. Among the many chart types provided by Guandata, each chart has its different usage methods.

Therefore, this document mainly introduces the usage methods of some common charts in the Guandata platform, enabling users to quickly get started and create beautiful charts, making chart creation no longer complex.

2. Usage Principles

2.1 Information Granularity

Need to choose appropriate visualization components according to the size of information granularity.

2.2 Visual Encoding

Visual encoding is the process of converting data into visual charts using graphic properties, and reasonable visual encoding needs to be chosen.

• Shape: Usually used to express different categories

• Color: Distinguish categories (categorical palette) / Represent quantity (sequential palette) / Highlight data (contrast palette) / Represent meaning (semantic palette)

• Size/Area/Length/Angle: Express quantitative data

• Position: Express data from different geographical locations

• Direction: Express the nature of data, data relationships

• Density: Express clustering relationships between data points

2.3 Information Communication

When making charts, chart design needs to start from "what information do readers want to get from this set of charts" and grasp the accuracy and practicality of information communication. But sometimes due to some errors, information is not well communicated. The following lists three common errors:

• Lack of contextual information: In the stage of viewing targets to discover anomalies or opportunities, the displayed indicators need auxiliary information to draw conclusions, such as "How is it compared to yesterday?" "Has the monthly target been reached?" "Has the average level been reached?" etc.

• Overly detailed information display: Too detailed data is difficult to read, simplified data provides more intuitive comparison information.

• Clear purpose, avoid complex calculations when reading: Readers can directly read information from charts, avoid reading unprocessed information.

3. Usage Methods

3.1 Single Bar Chart and Single Line Chart

Single bar charts and single line charts are mainly used to express single indicator data of different categories/time and other dimensions.

3.1.1 Use Single Line Chart to Display Long Dimension Labels

Generally, we are accustomed to using single line charts to express label data with long dimensions, because horizontal readability is higher than inclined direction.

3.1.2 X-axis Can Be Sorted by Value Height

When using single bar charts, unless the category order of the X-axis has specific meaning (such as time series), you can sort by the height of values, and add average values as reference information.

3.1.3 Y-axis Data Starting Point from 0

When using single bar charts, the Y-axis data starting point is generally from 0, especially for projects with high accuracy requirements, which can greatly improve accuracy. If the data starting point is not 0, it may cause readers to have bias in data ratio.

3.1.4 Use Units Instead of Y-axis Values

When using single bar charts, units can be used instead of Y-axis values, especially when the values are multi-digit, which can make Y-axis data more concise, thus avoiding reading inconvenience and layout space crowding caused by multiple digits.

3.1.5 Use Labels Instead of Y-axis

When using single bar charts, when there are few data bars (<10), numerical labels can be used instead of Y-axis, thus improving layout simplicity and data readability.

• Numerical label expression is more direct than using Y data axis expression;

• Generally, avoid using numerical labels and data axis at the same time.

3.1.6 Keep Color Matching Consistent

Single bar charts or single line charts only contain one indicator, keeping color matching consistent can improve readability. If different colors are set only based on different dimensions, it may increase reading interference.

3.2 Line Chart and Area Chart

Line charts are mainly used to express continuous or data with changing relationships. Area charts are mainly used to express how various parts compose/affect the whole, while percentage area charts are used to express the weight of the impact of various parts.

3.2.1 Use Clear and Distinguishable Lines

When using line charts, the colors of line charts should be clear and distinguishable, and avoid using similar colors or colors that colorblind people cannot distinguish. At the same time, reasonably arrange the height and range of the Y-axis to make each data line clear. When there are more than 5 data lines, consider using other charts for display (same for area charts).

3.2.2 Adjust Layout and Aspect Ratio

When using line charts, you can make line charts more readable by adjusting layout and aspect ratio. For example, when the average slope of data lines is about 45 degrees, readability is best.

3.2.3 Line Chart Expresses Continuous Meaning

Line charts are mainly used to express continuous or data with changing relationships. If you want to express data of two different dimensions, you cannot simply distinguish them with bar charts/line charts. You can use bar chart methods and use different color mappings.

3.2.4 Adjust Fill Saturation or Gradient Fill

When using area charts, if there are overlapping data of different dimensions, you can reduce fill saturation or use gradient fill; if overlap occlusion still occurs, it is recommended to use line chart methods instead.

3.3 Pie Chart and Ring Chart

Pie charts are mainly used to express the proportion of various components in a single item category, and compare various categories through angle size.

3.3.1 Data Dimension Quantity Should Not Be Too Much

When using pie charts, when the data dimension quantity is too much (more than 6 items) or the values of various parts are not much different (angles are difficult to compare), it will reduce chart readability. It is recommended to use bar charts and other methods to explain differences.

3.3.2 Avoid Using Pie Charts to Express Multi-item Component Relationships

Generally, we use pie charts to present component comparison relationships in a single item category. But when you want to compare component relationships in two (or more) item categories, to improve data readability, it is recommended to use percentage stacked chart methods.

3.3.3 Arrange According to Data Size

When using pie charts, to help readers quickly establish comparison relationships of various parts, it is recommended to arrange according to data size.

3.4 Tables

3.4.1 Use Carousel Table or Bar Chart to Display Rankings

When you want to display ranking status, you can refer to the advantages and disadvantages of carousel tables and bar charts listed in the figure below for chart selection.

• Carousel Table

• Bar Chart

3.4.2 Clever Use of Styles to Display Visual Focus

When using tables, when a large amount of data is listed in the table, you can group according to indicator relevance and use styles to distinguish visual focus, improving table readability.