Radar charts are a useful way for you to show multiple data points and the variation between them. You can use a radar chart to compare values for several variables at once, as seen in our example below, which explores the functional movement screening results for an athlete.
Like other chart widgets, you can filter the data source for the radar chart to show information about a single athlete or even to look at how an athlete compares to the rest of their team, like in the following example.
Use the sidebar to configure the radar chart widget
Select the radar chart widget to display the settings in the sidebar. These settings include:
- Variable style
- Advanced properties
Use the General properties of the sidebar to add descriptive information for your radar chart widget. You can also:
- Choose whether the title of the widget should be displayed. If you enable this, then you can provide a title and icon for the widget and specify the font size, font color and text alignment.
- Choose whether a subtitle for the widget should be displayed. If you enable this, then you can add a subtitle for the widget and specify the font size, font color and text alignment.
- Specify the widget width within the section where it appears.
- Choose the background and border color for the widget.
Here you can add static informational content which will appear below the title of the widget. This can include text, images, tables, links and other common content tools.
Use the properties from the Data tab to select a data source and specify which fields should appear as variables on your radar chart. The radar chart widget allows you to choose multiple variables from a single data source.
Use the Series properties to choose which fields should be plotted on your radar chart. For each series you can:
- Provide a series name.
- Choose whether the series type is data or a static value. A static value can serve as a benchmark or threshold that other values in the chart can be compared to.
- Set a filter for the each series, if needed.
- Decide how to aggregate the series data.
- Choose a color for the series.
- Set the area fill opacity.
- There are also Advanced properties available for each series, as follows:
- Choose a style for each series using the point style options.
- Specify the point size (in pixels).
- Specify a width for the point borders. This is measured in pixels.
- Specify the line width for the series, which is measured in pixels.
- Specify how many decimal places should appear for the series data.
Use the Variable style properties to control whether labels should appear for the variables on your radar chart. If you enable the variable labels, you can also set the label color and font size.
Specify how the axes of your radar chart should appear and behave using the Axis properties, which allow you to:
- Specify a maximum value for the axis.
- Specify a minimum value for the axis.
- Choose whether to show tick marks on the axis.
- Specify the maximum number of ticks to show on the axis.
- Set a color for the tick marks.
- Provide a font size for the tick mark label text.
- Choose whether a background should be shown for the tick text.
- If you’ve enabled the background option for tick text, set a color for the background area.
Use the Grid properties to enable and customize the radii and grid of your radar chart. The radii and grid lines can allow readers to visually compare data across variables. You can:
- Choose whether radii should appear on the radar chart. Radii are the ‘spokes’ of the radar chart.
- If radii are enabled, specify their color and width (width is measured in pixels).
- Choose whether grid lines should appear on the radar chart. Grid lines are the lines between the radii of the radar chart.
- If the grid is enabled, specify the color and width (width is measured in pixels) of the grid lines.
You can use a legend to give the reader more information about the data included in the chart. Use the Legend properties to:
- Enable or disable the legend for your chart.
- Choose the legend position (if enabled).
- Specify the font size for the legend label.
- Set a color for the legend label.
If you want to provide users with more information about the data displayed in a radar chart, you can set up different interactions using the Interaction properties.
There are three interactions you can enable for a radar chart widget – tooltips, record cards and record click-through.
- Tooltip: if you want to provide more context for the people reading the chart, you can enable tooltips. These display the data value for each point on the chart when the reader hovers over it or taps it.
- If tooltips are enabled, the information shown in the tooltip can be grouped by variable or ungrouped. If your radar chart has a lot of variables, it can be helpful to group them by variable so that the tooltip for each data point only shows the data relevant to that variable. However, if you have fewer variables, you might choose to use the ungrouped option to display data for all variables over the series marker for each data point.
- Record cards: when record cards are enabled, then the card fields that are set for each series will be shown in a pop-up screen.
- Record click-through: this property can only be enabled when the record card property is also enabled. Turning on record click-through means that people can navigate from the record card to the event form record that the relevant data is sourced from. If multiple records are shown in the record card (for example, when data from a group of athletes is shown in the chart), then the user will need to select a specific record from the record card before clicking through to that particular record.
Use the Advanced properties for customizing your chart further. Advanced properties for the radar chart widget allow you to:
- Specify the chart height (measured in pixels).
- Set the animation duration. The animation duration is the time for the radar chart content to transition when someone changes the data displayed within the chart. For example, when the reader selects a different athlete and data displayed on the radar chart changes due to a filter.
- Hide the widget if no data is available (based on data source and filter settings).
Use the Trellis properties to conditionally display the radar chart multiple times based on a field within a data source. To customize your trellis, you can:
- Set filters for the data you use to create the trellis.
- Set a limit of how many multiples of the trellis should be displayed.
- Choose whether to display the title of each multiple (this is based on the trellis field selected). If you enable this, then you can specify the font size, font color and text alignment.
To learn more about widget trellising, check out this article.