The G2Plot V2 version, which has been in development since August this year and is now almost four months old, has:

  • 25+ Commonly used statistical charts
  • 80% of charts are validated in complex BI, LowCode products
  • 97% code single test coverage
  • 5+ Active community participation

In version V2, we extract the general experience optimization from the business implementation, generalize and configure, and build most of the experience optimization schemes into G2, so that users of G2 and G2Plot can directly configure and enable the experience optimization of each chart. Users can easily turn on the built-in experience optimizations and optimizations by default through configuration and options.

This article looks at some of the most common charting experience problems in business and how to solve them in G2/G2Plot.

TL,DR first comes to the conclusion. If you don’t understand visualization and don’t want to go into further research, you can simply and efficiently meet the most basic chart requirements of your business. Please use G2Plot to provide the simplest basic configuration. If you want to be more customized to solve your experience problems, check out our documentation and read the configuration items to customize your experience problems in G2Plot and G2.

Diagrams form component explanations

Before getting into the experience issues that are often encountered in diagrams, let’s look at the basic components of diagrams again. A typical general statistical chart consists of the following components:

  • Geometry marker: That is, the type of graph. In G2, Geometry determines the type of graph generated. At the same time, different types of geometric markers are attributed by different graphic attributes, among which Shape Attribute determines the Shape of the graph.
  • Text Label: A text Label is a content Label for the current set of data. The text Label needs to be opened on the attached geometric Label.
  • Each diagram usually consists of two coordinate axes, the X and y axes in rectangular coordinates, and the Angle and radius dimensions in polar coordinates. The coordinate axis itself consists of coordinate title, coordinate label, coordinate tick, and coordinate grid.
  • Legend: One of the auxiliary elements of a graph used to demarcate different data categories and data ranges, assist in reading a graph, and assist in filtering data in a graph.
  • Tooltip: Hover over a set of data, and the information about the data is displayed in a Tooltip box.
  • Annotation Helper: Use helper tags when you need to draw helper lines and markers on a chart.
  • Slider: If a chart contains a large amount of data, you can use a Slider to keep an eye on the data in a given area.
  • Scrollbar: When there is a large amount of data in a chart, you can also use the Scrollbar component to view part of the data at a time. The Scrollbar component is more suitable for bar charts and bar charts.

Common experience problem solution

Text label experience problem

Text pad occlusion is one of the most common problems encountered in business. In G2Plot V2 and G2, we provide a Label Layout configuration to optimize text labels.

Configuration mode

The configuration in G2Plot is as follows:

{
  // Open text labels
	label: {
    // Configure the required Label layout, which consists of type and optional CFG
    layout: [
      // hide-overlap: text tags that hide each other
      { type: 'hide-overlap'},
      // limit-in-plot: Limits text labels to within the graph range. CFG automatically hides text labels that exceed the graph range
      { type: 'limit-in-plot'.cfg: { action: 'hide'}}]},}Copy the code

Enable it in G2 by:

chart
  .line()
  .position('Year*Deaths')
	// Open text labels
  .label('Deaths', {
  	// Configure the required Label layout, which consists of type and optional CFG
  	layout: [
      // hide-overlap: text tags that hide each other
      { type: 'hide-overlap' },
      // limit-in-plot: Limits text labels to within the graph range. CFG automatically hides text labels that exceed the graph range
      { type: 'limit-in-plot'.cfg: { action: 'hide'}}});Copy the code

Comparison of effects before and after configuration:

Before the configuration After the configuration

All kinds of graphics applicable layout

Now that we know how to use layouts to optimize text labels, we will list and explain the layout currently built into G2/G2Plot.

layout Scope of application instructions
overlap general To prevent overlapping of text labels, attempts are made to offset text labels around to prevent occlusion
fixed-overlap general Same overlap, but does not move the location of text notes
hide-overlap general Same as fixed-overlap, the background graphics of text notes will be considered when checking the occlusion of text labels
limit-in-canvas general Restricting text labels to the canvas simply moves text labels outside the canvas scope to the canvas scope
limit-in-plot general Restricting the text label within the scope of the graph can prevent the text label from overlapping with the graph components such as coordinate axes. For super graphics range of text expression with the three way: move the translate: the default approach, move beyond the scope of graphic label position, hidden hide: to exceed the scope of the hidden text labels, ellipsis display ellipsis: the range of graphics to ellipsis display the text label
adjust-color general Automatically adjust text label text color
path-adjust-position Line/area map Similar to overlap, overlapping text labels will be adjusted up and down or hidden
point-adjust-positon Line/area map Similar to overlap, overlapping text labels will be adjusted up and down or hidden, for point geometry
interval-adjust-position Bar chart/bar chart Automatically adjust text label position
interval-hide-overlap Bar chart/bar chart Similar to fixed-overlap, it hides text labels according to priority
distribute The pie chart Pie chart external text label optimization
pie-spider The pie chart Pie chart spider TAB layout
pie-outer The pie chart The pie chart is arranged around labels

Layout is used in combination

In addition, the layout of text labels but combination configuration, can according to the custom in order to optimize the text labels, such as the configuration of this example, we’ll be the first to adjust graph label position, and then according to the color of the text label corresponding post adjust the text label of the color of the label, then to hide from overlapping, Finally, hide the unity of more than graphics:

chart
  .interval()
  .position('type*sales')
  .color('series')
  .label('sales', {
  	layout: [{type: 'interval-adjust-position' },
      { type: 'interval-hide-overlap' },
      { type: 'adjust-color' },
      { type: 'limit-in-plot'.cfg: { action: 'hide'}}},]);Copy the code

The default configuration

In G2, we do not provide the default configuration, and text label opening and optimization need to be manually enabled. In G2Plot v2, we have a default optimal layout configuration for each graph, and if you don’t specify one, the default is used automatically.

Axis experience problem

In the actual business chart, coordinate axis is also one of the problems to experience. In addition to providing comprehensive style configuration for coordinate axis, we also provide three optimization methods for axis labels: autoRotate, autoHide, and autoEllipsis.

Configuration mode

In G2Plot, the axis labels are configured as follows:

{
  // Configure the X-axis
  xAxis: {
    label: {
      / / open the autoHide
      autoHide: true./ / close autoRatate
      autoRotate: false,}}}Copy the code

In G2, the configuration is as follows

// Configure the axes for the Date field
chart.axis('Date', {
  label: {
    // Enable autoHide, specify the use of equiDistance, and configure a minimum spacing of 6 pixels
    autoHide: { type: 'equidistance'.cfg: { minGap: 6}},/ / close autoRotate
    autoRotate: false,}});Copy the code

AutoRotate configuration

AutoRatate supports the following processing methods:

type instructions
fixedAngle If axis label occlusion occurs, rotate the text at a fixed Angle (45°)
unfixedAngle If axis label occlusion occurs, the appropriate Angle is automatically calculated and rotated

AutoRotate: true is equivalent to {type: ‘fixedAngle’}

The autoHide configuration

AutoHide supports the following processing methods:

type instructions
equidistance If axis label text overlap occurs, it is sampled evenly to ensure that labels appear evenly and without overlap
equidistanceWithReverseBoth As with equidistance, the labels are guaranteed to display evenly, and then the heads and tails are preserved
reserveBoth Make sure the first and last labels are visible, and the others are obscured to hide
reserveFirst Make sure the first label is visible and the others are obscured and hidden
reserveLast Make sure that the last label is visible and the others are obscured and hidden

AutoHide Optional minimum spacing:

{
  minGap: number
}
Copy the code

The autoHide configuration uses equidistance by default, i.e. setting autoHide: true is equivalent to setting: {type: ‘ ‘equidistance’, CFG: {minGap: 0}}

AutoEllipsis configuration

AutoEllipsis supports the following processing methods:

type instructions
ellipsisTail This omits the end of the text if axis label text overlap occurs
ellipsisHead Ellipsis display of text headers
ellipsisMiddle Display ellipsis in the middle of the text

AutoEllipsis uses ellipsisTail by default, i.e., setting autoEllipsis: true is equivalent to setting: {type: ‘ ‘ellipsisTail’}

Legend experience problem

Legend location

In both G2Plot v2 and G2, the position property can be used to specify the position of the legend. However, for different graphs, we suggest to specify the position of legend specifically. The principle here is to shorten the user’s instinctive path to view graphs by comparing with legends and improve the efficiency of information acquisition. ** Although the legend positions technically support 12 positions, we summarized the different positions of legends in different chart types and restrained convergence into two categories. In G2Plot we default to not configuring the best legend positions for each chart type.

Add a legend

When the number of legends is large and the chart will occupy most of the position of the chart, we will automatically enable the page turning function of classification legends. You can also use flipPage to turn pages on and off.

conclusion

Thank you very much for your patience in reading and summarizing the conclusions. If you want to be simple and efficient and go straight to our default recommendations, please go straight to G2Plot and provide the simplest basic configuration. G2Plot automatically optimizes most of the experience issues in the chart by default. You can refer to our documentation to specify configurations that are appropriate for you as to how you need to customize rows to solve your experience problems.

For those of you interested in visualization techniques, join us for the next continuous iteration of G2Plot where you can:

  • Documents, DEMO, translation and other relatively low threshold of things to get started
  • Built-in chart development and iteration for G2Plot
  • Open open mechanism based on G2Plot to extend peripheral non-generic charts

Thank you! By the way, there is also the project open source address: github.com/antvis/G2Pl… ✨ ✨ ✨. More articles on G2Plot can be found here.