Gauge

2 min read

Plot Container

width

optional number default: 400

Set the width of the chart.

height

optional number default: 400

Set the height of the chart.

autoFit

optional boolean default: true

Whether the chart automatically adjusts to fit the container. If it is set to true, width and height configuration would fail.

padding

optional number[] | number | 'auto'

Set padding value of the canvas. You can also use auto.

appendPadding

optional number[] | number

Extra appendPadding value.

renderer

optional string default: canvas

Set the render way to canvas or svg.

pixelRatio

optional number default: window.devicePixelRatio

Set the pixel ratio of the chart.

limitInPlot

optional boolean

Whether clip the Geometry beyond the coordinate system。

supportCSSTransform

optional boolean

支持 CSS transform,开启后图表的交互以及事件将在页面设置了 css transform 属性时生效,默认关闭。

useDeferredLabel

optional boolean|number

开启后 label 渲染会在浏览器空闲时机执行。可制定具体 number 数值,来限定 timeout 时间 (建议开启时,指定 timeout 时间)

locale

optional string

Specify the locale. There are two built-in locales: 'zh-CN' and 'en-US'. Or you can use G2Plot.registerLocale to register a new locale. Go src/locales/en_US.ts to see the format.

Data Mapping

percent

required number

Indicator ratio data [0-1].

radius

optional number default: 0.95

The radius of the outer ring [0-1] is calculated with respect to the minimum width and height of the canvas.

innerRadius

optional number default: 0.9

The radius of the inner ring [0-1] is calculated relative to the inner radius radius.

startAngle

optional number default: (-7 / 6) * Math.PI

The starting angle of the disk.

endAngle

optional number default: (1 / 6) * Math.PI

The termination angle of the disk.

Plot Style

range

optional object

Dashboard auxiliary arc style.

PropertiesTypeDescription
ticksnumber[]Dashboard auxiliary arc style.
colorstring |string[]The color swatches of auxiliary arcs are selected in accordance with the color swatches; When ticks are set, color cannot be used as a callback
widthnumberSetting the width of gauge range. Default using 'radius', 'innerRadius' to calculate the width of range.

type ✨

optional string default: undefined

Display type of gauge. options: meter, default: undefined

meter ✨

optional object

It works when type = 'meter'. Properties are as followed:

PropertiesTypeDescriptionDefault
stepsnumberThe total step count50
stepRationumber0 ~ 1. Represent the ratio between step and gap. gap is zero when stepRatio is setting to 10.5
gauge

gaugeStyle

optional StyleAttr | Function

Gauge graphic style.

PropertiesTypeDescription
fillstringFill color of the shape
rnumberused in point, means the radius of geometry
fillOpacitynumberFill opacity of the shape
strokestringStroke color of the shape
lineWidthnumberThe width of the stroke of the shape
lineDash[number,number]Configure dashed line stroke. The first parameter is the length of each segment, and the second parameter is the gap between segment. When lineDash is set to [0,0], there is no effect.
lineOpacitynumberOpacity of the stroke
opacitynumberOpacity of the shape
shadowColorstringShadow color of the shape
strokeOpacitynumberStroke opacity of the shape
shadowBlurnumberGaussian blur coefficient of the shadow
shadowOffsetXnumberConfigure horizontal distance between shadow and shape
shadowOffsetYnumberConfigure vertical distance between shadow and shape
cursorstringMouse style, same as the mouse style of CSS, default value : 'default'

Example:

{
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.7,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer'
  }
}

More documents about ShapeStyle, see Graphic Style.

Plot Components

axis

optional object

Indicates auxiliary shaft styles.

top
optional boolean default: false

是否渲染在画布顶层,防止部分图形中,需要将 axis 显示在图形上面,避免被图形遮挡。

position
optional top | bottom | left | right

For Cartesian coordinates, set the position of the coordinate axes.

title
optional object

A configuration item for the title, NULL means not to be displayed.

PropertiesTypeDescription
textstringThe title of axis
positionstringPosition of the axis title, default: 'center'. Options: start, center, end
offsetnumberThe distance of the title from the coordinate axis
spacingnumberThe distance between the title and the text on the coordinate axis
styleshapeStyleTitle text configuration items
autoRotatebooleanWhether to rotate automatically or not, default: true
rotationnumber关闭 autoRotate 后,可以设置自动旋转的角度,如: -Math.PI / 2 (条形图 y 轴标题)

shapeStyle

PropertiesTypeDescription
fillstringFill color of the shape
rnumberused in point, means the radius of geometry
fillOpacitynumberFill opacity of the shape
strokestringStroke color of the shape
lineWidthnumberThe width of the stroke of the shape
lineDash[number,number]Configure dashed line stroke. The first parameter is the length of each segment, and the second parameter is the gap between segment. When lineDash is set to [0,0], there is no effect.
lineOpacitynumberOpacity of the stroke
opacitynumberOpacity of the shape
shadowColorstringShadow color of the shape
strokeOpacitynumberStroke opacity of the shape
shadowBlurnumberGaussian blur coefficient of the shadow
shadowOffsetXnumberConfigure horizontal distance between shadow and shape
shadowOffsetYnumberConfigure vertical distance between shadow and shape
cursorstringMouse style, same as the mouse style of CSS, default value : 'default'

Example:

{
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.7,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer'
  }
}

More documents about ShapeStyle, see Graphic Style.

label

optional object

A configuration item for the text label. NULL indicates that it is not displayed.

PropertiesTypeDescription
typestringWhen a user uses a custom label type, need to declare the specific type, otherwise you will use the default label type rendering (pie chart label support inner | outer | spiders)
offsetnumberlabel offset
offsetXnumberThe offset distance of the label from the data point in the X direction
offsetYnumberThe offset distance of the label from the data point in the Y direction
contentstring | IGroup | IShape | GeometryLabelContentCallbackText content that is displayed, if not declared, is displayed according to the value of the first field participating in the mapping
styleShapeAttrsLabel text graphic property style
autoRotatestringWhether to rotate automatically, default true
rotatenumberText rotation angle, unit is radian, clockwise rotation
labelLinenull | boolean | LabelLineCfgUsed to set the style property of the text connector. NULL indicates that it is not displayed.
labelEmitbooleanOnly applies to text in polar coordinates, indicating whether the text is radially displayed according to the angle. True means on and false means off
layout'overlap' | 'fixedOverlap' | 'limitInShape'Text layout type, support a variety of layout function combination.
position'top' | 'bottom' | 'middle' | 'left' | 'right'Specifies the position of the current Label relative to the current graphic (💡 Attention: Only works for column plot and bar plot, which geometry is interval)
animateboolean | AnimateOptionAnimation configuration.
formatterFunctionFormat function
autoHidebooleanWhether to hide it automatically, default to false

Types of LabelLineCfg are as follow: (Go ShapeAttrs see more details about ShapeAttrs)

type LabelLineCfg = {
  style?: ShapeAttrs;
}

Example code:

{
  label: {
    style: {
      fill: 'red',
      opacity: 0.6,
      fontSize: 24
    }
  }
}
label
AxisLabelCfg | null optional

Configurations related to axis label. Set this to null to prevent the axis label from appearing. The details of AxisLabelCfg are as follows:

PropertiesType
styleShapeAttrs-Axis label text graphic property style
offsetnumber-Axis label offset
rotatenumber-Axis label text rotation angle
autoRotateboolean |avoidCallbacktrueWhether to rotate automatically, default true
autoHideboolean |avoidCallback | { type:string,cfg?:AxisLabelAutoHideCfg }falseWhether to hide it automatically, default to false
autoEllipsisbooleanfalseWhether to ellipsis label when overflow, default to false
formatter(text: string, item: ListItem, index: number) => anyfalseFormat function

avoidCallback 类型定义如下:

type avoidCallback = (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean;

AxisLabelAutoHideCfg 类型定义如下:

interface AxisLabelAutoHideCfg {
  /** 最小间距配置 */
  minGap?: number;
  type?: string;
}

如果你需要强制最后一个 tick 展示,可以尝试这么设置

{
  scale: {
    [xField 对应的值]: {
      showLast: true,
    }
  },
  xAxis: {
    // 设置默认不自动隐藏,或
    // autoHide: false,
    autoHide: {
      type: 'equidistantceWithReverseBoth'
    }
  }
}
verticalFactor
optional number

Mark the direction of the label on the axis, with 1 to the left and -1 to the right (Only works in vertical axis).

verticalLimitLength
optional number

Configuring the maximum limit length in the vertical direction of the coordinate axis has a significant impact on text adaptation.

grid
optional object

Axis grid line configuration item. NULL means not shown.

PropertiesTypeDescription
linelineStyleThe style of the line
alternateColorstring|string[]The fill color between two grid lines
closedbooleanWhether to close the grid for circle
alignTickbooleanIf the value is false, it will be displayed between the two scales

Then config of grid.line is the same as: line

line
optional object

Coordinate axis configuration item, NULL means not displayed.

Attention: The full configuration of lineStyle is { style: { stroke: '#ddd', ... } }, please check it when your configuration doesn't work.

PropertiesTypeDescription
strokestringcolor of the line
lineWidthnumberwidth of the line
lineDash[number,number]configure dashed line, the first parameter is the length of each segment, the second parameter is the gap between segment. When lineDash is set to [0,0], there is no effect.
opacitynumberopacity
shadowColorstringshadow color
shadowBlurnumberGaussian blur coefficient
shadowOffsetXnumberconfigure horizontal distance between shadow and line
shadowOffsetYnumberconfigure vertical distance between shadow and line
cursorstringmouse style, same as the mouse style of CSS, default value : 'default'

Example (config the grid line style of xAxis):

{
  xAxis: {
    grid: {
      line: {
        style: {
          stroke: 'black',
          lineWidth: 2,
          lineDash: [4, 5],
          strokeOpacity: 0.7,
          shadowColor: 'black',
          shadowBlur: 10,
          shadowOffsetX: 5,
          shadowOffsetY: 5,
          cursor: 'pointer'
        }
      }
    }
  }
}
tickLine
optional object

The configuration item of the coordinate axis scale line. NULL means not displayed.

PropertiesTypeDescription
stylelineStyleThe style of tickLine.
alignTickbooleanWhether aligh tickLine with tick label
lengthnumberThe length of tickLine.

Go ShapeAttrs see more details about ShapeAttrs. The params of ShapeAttrsCallback are as follow:

type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
subTickLine
optional object

A configuration item for a coordinate subscale. NULL indicates that it is not displayed.

PropertiesTypeDescription
styleShapeAttrs | ShapeAttrsCallbackThe style of subTickLine.
countnumberThe count of subTickLine.
lengthnumberThe length of subTickLine.

Go ShapeAttrs see more details about ShapeAttrs. The params of ShapeAttrsCallback are as follow:

type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
nice
optional boolean default: true

Whether to nice.

min
optional number default: 0

Minimum axis.

max
optional number

Maximum axis.

minLimit
optional number

Minimal limit.

maxLimit
optional number

Maximum limit.

tickCount
optional number

The expected number of axes, not the final result.

tickInterval
optional number

Interval of axes.

tickMethod
optional string | Function default: false

Specify a tick calculation method, or customize a tick calculation method. Built-in tick calculations include cattime-catwilkinson-extendedr-prettytimetime-prettylogpowquantiled3-linear

animate
optional boolean default: true

Animation switch, default true.

animateOption
optional object

Animation parameter configuration.

interface ComponentAnimateCfg {
  /** Duration of the first animation */
  readonly duration?: number;
  /** Easing method used for the first animation. */
  readonly easing?: string;
  /** Delay before updating the animation */
  readonly delay?: number;
}
// Configure the reference
{
  animateOption: {
    appear: ComponentAnimateCfg;
    update: ComponentAnimateCfg;
    enter: ComponentAnimateCfg;
    leave: ComponentAnimateCfg;
  }
}

indicator ✨

optional object

Dashboard indicator style configuration. Divided into components as follows:

  • pointer:Pointer style configuration in a pointer
  • pin:The disc style configuration in the indicator
  • shape:Custom shape of indicator, used with the API registerShape. Default: gauge-indicator (Go to gauge/shapes/indicator see details.)

They all have the following configuration items:

PropertiesTypeDescription
styleobjectShapeStyle
PropertiesTypeDescription
fillstringFill color of the shape
rnumberused in point, means the radius of geometry
fillOpacitynumberFill opacity of the shape
strokestringStroke color of the shape
lineWidthnumberThe width of the stroke of the shape
lineDash[number,number]Configure dashed line stroke. The first parameter is the length of each segment, and the second parameter is the gap between segment. When lineDash is set to [0,0], there is no effect.
lineOpacitynumberOpacity of the stroke
opacitynumberOpacity of the shape
shadowColorstringShadow color of the shape
strokeOpacitynumberStroke opacity of the shape
shadowBlurnumberGaussian blur coefficient of the shadow
shadowOffsetXnumberConfigure horizontal distance between shadow and shape
shadowOffsetYnumberConfigure vertical distance between shadow and shape
cursorstringMouse style, same as the mouse style of CSS, default value : 'default'

Example:

{
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.7,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer'
  }
}

More documents about ShapeStyle, see Graphic Style.

statistic

optional object

Metric central text component.

PropertiesTypeDescription
titlefalse | StatisticTexttitle
contentfalse | StatisticTextcontent

StatisticText

PropertiesTypeDescription
styleCSSStyleDeclarationStyles for statistical text (css styles)
contentstringContent of the text。Priority: customHtml > formatter > content
customHtmlCustomHtmlcustom content by using html,priority is higher than formatter
formatterFunctionThe formatted content of the text
rotatenumberRotation angle
offsetXnumberX offset
offsetYnumberY offset

Type of CustomHtml is as follow:

type CustomHtml = (container: HTMLElement, view: View, datum: object, data: object[]) => string;

tooltip

markdown:docs/common/tooltip.eh.md