The author is hustCC, Ant Financial · Data Experience Technology team
TL; DR G2Plot is a library of general-purpose statistical charts that focus on detailed experiences.
background
Line charts are used to represent data over a continuous time span. They are usually used to show how a variable changes over time: is it going up or down, is there a cyclical cycle? Thus, the line chart focuses on the global trend as opposed to individual data points.
In line charts, the general horizontal axis (X axis) is used to represent the passage of time, and the interval is the same; The vertical axis (Y-axis) represents the size of the data at different times.
The data types suitable for line charts are a continuous field (time) and a discrete field (value). In the following example, time is a continuous data field and value is a discrete data field.
In business, a line chart is usually used to show the trend of an indicator over time. Such as:
The figure above shows the order quantity trend of an e-commerce platform in the recent 30 days.
Experience of fine cut
The details of G2Plot’s line chart experience are illustrated and compared with the following examples:
Collision avoidance of data tags
Data label is the description of specific data of logarithmic data points, and the information value is very high. When multiple data are close to each other, it is easy for data labels to block each other, resulting in invalid information and bad appearance.
| echarts |
 |
❌ Direct occlusion display |
|---|---|---|
| highcharts |
 |
❌ part of the situation is blocked |
| G2Plot |
 |
✅ Automatic dodge and hide |
 |
✅ If there are more than three lines, the labels with the largest and smallest data are displayed preferentially |
Axis title overlaps with tick
| echarts |
 |
❌ Shaft title and shaft label occlusion |
|---|---|---|
| G2Plot |
 |
✅ does not appear information occlusion |
Permanently solve the overlapping problem of shaft title and shaft tick by modifying component layout.
The thumbnail axis label is not fully displayed
For more data, we use the thumbnail axis component, which allows us to see both local data and global trends.
| echarts |
 |
❌ The thumbnail axis label is clipped so you can’t see the data range |
|---|---|---|
| G2Plot |
 |
✅ does not appear information occlusion ✅ The thumbnail axis moves to the edge to automatically display the label internally |
Legend page turning optimization
In the case of a large number of split data, there will be a large number of legend items.
| echarts |
 |
❌ legend and graph block, information mixed invalid |
|---|---|---|
| G2Plot |
 |
✅ limits the maximum canvas area of legends to prevent information occlusion in extreme cases |
 |
✅ add legend pages to allow legends to take up less space and allow users to focus on graphics and data |
The axis label is occluded
In the case of too many X-axis labels, label occlusion will occur, which is not only ugly, but also leads to invalid information. (Click to see larger version)
| The original | autoHideLabel: true | autoRotateLabel: true |
|---|---|---|
 |
 |
 |
Experience to enhance
Enhancement 1: Timeline optimization
Line charts are mainly used for indicator trends, so the X-axis is mostly time type. G2Plot optimizes the display of axis labels when the X axis is time to reduce the display of redundant information and save canvas space.
Stay tuned: By layering the event axis labels, you can make the presentation of information clearer.
Enhancement 2: Follow the legend
In the case of multiple broken lines, the form of legend is used to identify the dimension value information of broken lines, which is intuitive and effective.
Enhancement 3: Enhanced interaction of massive data
Use a thumbnail axis to zoom in and display the data, and the thumbnail axis automatically switches the label text at the edge to the internal display to prevent occlusion.
✅ Use the thumbnail axis component
✅ Use the scroll bar component
Enhancement 4: Special data interval, data point marking
Watch out for special time intervals, such as weekends, holidays, etc., as well as data tags for data points.
Enhancement 5: Data marking points, lines and intervals
 |
 |
|---|
Please look forward to: mark the time of some special important events, so that users can more clearly perceive the reason for the change of data trend.
Enhancement six: early warning line, early warning interval
 |
 |
|---|
Please look forward to it: for real-time monitoring data, the over-threshold data can be marked clearly through the early warning line and auxiliary elements of the early warning interval.
Enhancement 7: Area map AreaLabel
The classification of data is directly marked in the middle of the Area Area, and the text size directly matches the Area size, so that users can see the corresponding data types of different blocks more intuitively.
The last
The above optimization points for line charts are deposited in ** G2Plot ** and are completely open source. G2Plot is a set of upper statistical chart library based on G2 graph syntax, which focuses on the experience of chart details and ease of use. AntV Design principles extracted from G2Plot are derived from Ant Design Design system and have guiding principles of data visualization features. It follows Ant Design values while further interpreting the field of data visualization, such as color, font guidance.
After a lot of project practice and experience summary, we have summarized the following four core principles and ranked them in order of importance. The four principles complement each other and present an advanced relationship, and we hope you can also adopt them in your design:
- Accuracy: do not distort, mislead or omit the information contained in the data when it is converted to visual expression.
- Effective: focus on information delivery, avoid redundancy, avoid information overload, and use the most appropriate data-ink Ratio to express the most useful information for users
- Clear: The presentation is clear, legible and organized to help users achieve their goals quickly and get more information in the least amount of time.
- Beauty: perfect expression of data, reasonable use of visual elements for artistic creation, without excessive modification, to give users elegant experience.
Finally, you are welcome to join the issue discussion or code PR: github.com/antvis/G2Pl… .