Configuring grids and angle lines

The following properties are used to configure the radial lines (scale.angleLines) and concentric circles or polygons (scale.gridLines) of a radial grid. All properties listed are supported for both objects except circular, which is supported only by scale.gridLines:

Property	Value	Description
`display`	`true` (default in radar) or `false` (default in polar area)	Shows or hides lines.
`color`	`Color`	Color of the lines.
`circular`	`true` (default in polar area) or `false` (default in radar)	In `gridLines` object only. If true, `gridLines` are circular. Otherwise, they are straight lines between points.
`lineWidth`	`Number`	The width of the lines.

Configuration for grid and angle lines in radial grids

The following code configures several grid and angle line properties in a radial chart. It changes the grid lines to circular, and also changes the line width and colors:

scale: {
     gridLines: {
         circular: true,
         lineWidth: 2,
         color: 'hsla(240,100%,50%,.2)'
     },
     angleLines: {
         display: true,
         lineWidth: 2,
         color: 'hsla(120,100%,25%,.2)'
     }
 }

The result applied to a radar chart is shown as follows. See the full code in Radial/radial-5-grid-angle-lines.html:

Radar chart with grid and angle lines configurations. Code: Radial/radial-5-grid-angle-lines.html

Table of Contents for Configuring grids and angle lines

Create new playlist

Sign In

Sign Up

Table of Contents for
Configuring grids and angle lines