G2

Overview

The lineX and lineY marks have similar configurations. The lineX mark is used to draw auxiliary lines perpendicular to the x-axis, commonly used for drawing average values or other aggregated data auxiliary lines.

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'view',
  autoFit: true,
  height: 200,
  children: [
    {
      type: 'rect',
      data: {
        type: 'fetch',
        value: 'https://assets.antv.antgroup.com/g2/unemployment2.json',
      },
      encode: { x: 'rate' },
      transform: [{ type: 'binX', y: 'count' }],
      style: { inset: 0.5 },
    },
    {
      type: 'lineX',
      data: [10.2],
      style: { stroke: '#000', strokeOpacity: 0.45, lineDash: [3, 4] },
      labels: [
        {
          text: 'lineX text',
          position: 'top-left',
          textBaseline: 'bottom',
          fill: '#000',
          fillOpacity: 0.45,
          background: true,
          backgroundFill: '#000',
          backgroundOpacity: 0.15,
        },
      ],
    },
  ],
});

chart.render();

For more examples, you can visit the Chart Examples - Line Annotation page.

Configuration

Property	Description	Type	Default	Required
encode	Configure the visual channels of the `lineX` mark, including `x`, `color`, etc., to specify the relationship between visual element properties and data	encode	-	✓
style	Configure the graphic style of the `lineX` mark	style	-
labels	Configure the text configuration of the `lineX` mark	labels	-

encode

Configure the visual channels of the lineX mark.

Property	Description	Type	Default	Required
x	Bind the `x` property channel of the `lineX` mark. No `y` property channel is needed, you can directly configure data with data([1,...]), which will be automatically configured to the `x` channel. Or use transforms to calculate the mean or median of the original data to automatically draw average or median lines without manual calculation	encode	-	✓
color	Bind the `color` property channel of the `lineX` mark. If a data field is mapped to the color channel, the data will be grouped and split into multiple regions with different colors	encode	-

Try it out:

style

Property	Description	Type	Default
stroke	Stroke of the graphic	string \| Function<string>	-
strokeOpacity	Stroke opacity	number \| Function<number>	-
lineWidth	Width of the graphic stroke	number \| Function<number>	-
lineDash	Dashed stroke configuration. The first value is the length of each dash segment, the second value is the distance between segments. Setting lineDash to [0, 0] results in no stroke	[number,number] \| Function<[number, number]>	-
opacity	Overall opacity of the graphic	number \| Function<number>	-
shadowColor	Shadow color of the graphic	string \| Function<string>	-
shadowBlur	Gaussian blur coefficient of the graphic shadow	number \| Function<number>	-
shadowOffsetX	Horizontal distance of the shadow from the graphic	number \| Function<number>	-
shadowOffsetY	Vertical distance of the shadow from the graphic	number \| Function<number>	-
cursor	Mouse cursor style. Same as CSS cursor style, default 'default'	string \| Function<string>	`default`