G2

Overview

The lineY and lineX marks have similar configurations. The lineY mark is used to draw auxiliary lines perpendicular to the y-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',
  height: 200,
  autoFit: true,
  children: [
    {
      type: 'interval',
      data: [
        { year: '1951', sales: 38 },
        { year: '1952', sales: 52 },
        { year: '1956', sales: 61 },
        { year: '1957', sales: 120 },
        { year: '1958', sales: 48 },
        { year: '1959', sales: 38 },
      ],
      encode: { x: 'year', y: 'sales' },
    },
    {
      type: 'lineY',
      data: [100, 59],
      style: {
        stroke: (v) => {
          if (v >= 60) {
            return 'green';
          } else {
            return 'red';
          }
        },
        lineWidth: 2,
      },
      labels: [
        // Text configuration can refer to mark text
        {
          text: (v) => (v >= 60 ? 'lineY divider 1' : 'lineY divider 2'),
          position: 'top-right',
          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 `lineY` mark, including `y`, `color`, etc., to specify the relationship between visual element properties and data	encode	-	✓
style	Configure the graphic style of the `lineY` mark	style	-

encode

Configure the visual channels of the lineY mark.

Property	Description	Type	Default	Required
y	Bind the `y` property channel of the `lineY` mark. No `x` property channel is needed, you can directly configure data with data([1,...]), which will be automatically configured to the `y` 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 `lineY` 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`