Graphic Style

6 min read

G2Plot uses G as the drawing engine. Some graphic styles, such as the lineStyle of Line, the columnStyle of Column, and the style configuration of some components, such as label.style, axis.line.style, are all transmitted transparently through the drawing properties of G.

In order to make it convenient for users, the common drawing attributes of G2Plot are briefly introduced here:

Configure graphic styles

PropertiesTypeDescription
fillstringThe fill color of the shape
fillOpacitynumberThe fill transparency of the shape
strokestringStroke of the shape
lineWidthnumberThe width of the shape stroke
lineDash[number,number]For the dashed line configuration of the stroke, the first value is the length of each segment of the dashed line, and the second value is the distance between segments. LineDash sets [0,0] to no stroke.
lineOpacitynumberStroke transparency
opacitynumberThe overall transparency of the shape
shadowColorstringShape shadow color
shadowBlurnumberThe Gaussian blur factor of the shadow of the shape
shadowOffsetXnumberSets the horizontal distance between the shadow and the shape
shadowOffsetYnumberSets the vertical distance of the shadow from the shape
cursorstringMouse style. With CSS mouse styles, default 'default'.

Use the full graphic style columnStyle to configure the Column graphic style. Example:

  columnStyle: {
    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'
  }

Result:

Load failed

Configure line styles

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'
        }
      }
    }
  }
}

In a line plot, you can use linestyle directly to configure the Line graphic style. Example:

lineStyle: {
  stroke: 'black',
  lineWidth: 2,
  lineDash: [4,5],
  strokeOpacity: 0.7,
  shadowColor: 'black',
  shadowBlur: 10,
  shadowOffsetX: 5,
  shadowOffsetY: 5,
  cursor: 'pointer'
}

Result:

Load failed

Configure text styles

PropertiesTypeDescription
fontSizenumberFont size
fontFamilystringFont family
fontWeightnumberFont weight
lineHeightnumberLine height
textAlignstringSets the current alignment of text content. Supported property: 'center' | end | left | right | start,默认值为start
textBaselinestringSets the current text baseline to be used when drawing text. Supported property: 'top' | middle | bottom | alphabetic | hanging。默认值为bottom
fillstringFill color for text
fillOpacitynumberFill transparency of text
strokestringStroke of text
lineWidthnumberThe width of the text stroke
lineDash[number,number]For the dashed line configuration of the stroke, the first value is the length of each segment of the dashed line, and the second value is the distance between segments. LineDash sets [0,0] to no stroke.
lineOpacitynumberStroke transparency
opacitynumberOverall transparency of the text
shadowColorstringText shadow color
shadowBlurnumberThe Gaussian blur coefficient of the text shadow
shadowOffsetXnumberSets the horizontal distance between the shadow and the text
shadowOffsetYnumberSets the vertical distance between the shadow and the text
cursorstringMouse style. Mouse styles with CSS, default 'default'。

Take the statistic.style of Liquid for example:

statistic: {
  style:{
    fontSize: 80,
    fontWeight: 300,
    textAlign: 'center',
    textBaseline: 'middle',
    shadowColor: 'white',
    shadowBlur: 10,
  }
}

Result:

Load failed

Gradient

G2Plot provides support for linear gradients and circular gradients by default.

Linear gradient

Load failed

Note: l indicates the use of linear gradient, the green font is variable, filled by the user, separated by a blank.

// Use gradient color stroke, gradient angle is 0, gradient starting point color #ffffff, midpoint gradient color #7ec2f3, ending gradient color #1890ff
stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';

Example (1): Use areaStyle of Area to configure the Area with gradient color.

areaStyle: {
  fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
}

Result:

Load failed

Example (2): Use barStyle of Bar to configure the Bar with gradient color.

barStyle: {
  fill: 'l(0) 0:#3e5bdb 1:#dd3121',
}

Result:

Load failed

Circular gradient

Load failed

Note: r indicates the use of a radial gradient, the green font is variable, which is filled in by the user. The xyr values ​​of the starting circle are all relative values, ranging from 0 to 1.

// example
// Use gradient color to fill, the center coordinate of the starting circle of the gradient is the center point of the bounding box of the filled object, the radius is 0.1 times (the diagonal length of the bounding box / 2), the color of the starting point of the gradient #ffffff , The gradient color at the midpoint is #7ec2f3, and the gradient color at the end is #1890ff
fill: 'r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff';

Texture

Fill the shape with a specific texture. Texture can be images or data URLs.

Load failed

Note: p indicates the use of texture. The green font is variable, filled by the user.

  • a: The pattern repeats horizontally and vertically;
  • x: This pattern is repeated only horizontally;
  • y: This pattern is repeated only vertically;
  • n: This pattern is only displayed once (not repeated).

Take the columnStyle of Column for example:

columnStyle: {
  fill: 'p(a)https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*58XjQY1tO7gAAAAAAAAAAABkARQnAQ',
}

Result:

Load failed