XY Scatter Chart Widget

You can use the XY scatter chart widget to plot between two and four variables (X, Y, size, color) from one of your data sources.

This XY scatter chart example uses fatigue and soreness data from a daily wellness form to help coaches understand which players are ready for harder training and which players might be at risk of over-training. Each player is represented using a different color, and the chart uses custom gridlines to divide the plot area into quadrants, or windows, of trainability.

Select the XY scatter chart widget to display the settings in the sidebar. These settings include:

• General
• Instructions
• Data
• Color
• Size
• X-axis and Y-axis
• Legend
• Custom gridlines
• Regions
• Interaction
• Advanced properties
• Data preview
• Trellis

General

Use the General properties of the sidebar to add descriptive information for your 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 Title 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 Width of the widget within the section where it appears.
• Choose the Background color and Border color for the widget.

Instructions

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.

Data

Use the Data properties to choose which fields from your data source should become the variables plotted on the X and Y-axes. You can add more attributes to your scatter points using the color and size properties.

• Select the Data source you want to use. If you haven’t already set up a data source suitable for this widget, you should add a new one using the Data source tab.
• Set up any filters that you want to apply to the data shown in the XY scatter chart.
• Choose which field from your data source will be used as the X data field.
• Choose which field from your data source will be used as the Y data field.

Color

Choose how you want to color the points on your XY scatter chart using the Color properties. This allows you to include more information in the chart in addition to the position of the scatter points.

• Choose how you want the points to be colored using the Scatter color type property. There are two options you can see here:
  • Custom color: if you choose this option, then a second property will become visible (Scatter custom color), which allows you to provide a specific color that will be used for all points on the chart.
  • Color based on data field: if you choose this option, then the scatter points will be colored according to a field you select from the data source. If, for example, the field you select as the Data field to color by is an option field, each option will automatically have its own color.

Size

If you want the points on your XY scatter chart to contain more information (in addition to position and color), you can use the Size properties to represent the value from one of the fields in your data source.

• Choose how you want the points to be sized using the Scatter size type property. There are two options you can see here:
  • Custom size: if you choose this option, then a second property will become visible (Scatter custom size), which allows you to provide a specific size that will be used for all points on the chart.
  • Size based on data field: if you choose this option, then the scatter points will be sized according to a field you select from the data source. If, for example, the field you select as the data field for size is a number field, each result will automatically be grouped into a size. You can also adjust the minimum and maximum value for the size scale. 

X-axis and Y-axis

You can modify the behavior and appearance of the chart axes using the properties for the X-axis and Y-axis, which are:

• Provide an Axis label, which will appear outside the axis, vertically aligned to the center of the axis.
• Set a maximum value for the axis. If you do not provide a value here, the largest value for the axis will be set automatically based on the range of data included in the chart.
• Set a minimum value for the axis. If you do not provide a value here, the smallest value for the axis will be set automatically based on the range of data included in the chart.
• Set the Tick format, which is the number of decimal places that the tick text should include.
• Choose which ticks should be displayed using the Tick display property. This has three options:
  • Show all ticks: automatically display all ticks for the axis.
  • Show a number of ticks: choose how many ticks you want represented on the axis.
  • Show ticks at certain values: enter the values you want ticks displayed at on the axis. Separate each value using a comma.
• Enable or disable axis gridlines. These appear using a dashed line style and correspond with the position of tick marks on each axis.
• Axis padding left (X-axis only): set the padding for the left-hand side of the chart. This allows you to create space to the left of the chart without affecting the minimum value for the Y-axis. The left padding value is measured in pixels.
• Axis padding right (X-axis only): set the padding for the right-hand side of the chart. This allows you to create space to the right of the chart without affecting the maximum value for the Y-axis. The right padding value is measured in pixels.
• Axis padding top (Y-axis only): set the padding for the top of the Y-axis. This allows you to create more space at the top of the axis without affecting the maximum value for the X-axis. The top padding value is measured in pixels.
• Axis padding bottom (Y-axis only): set the padding for the bottom of the Y-axis. This allows you to create more space beneath the axis without affecting the minimum value for the X-axis. The bottom padding value is measured in pixels.
• Specify the Axis stroke color. This affects the color of the horizontal axis line and the tick marks for each category.
• Specify the Tick label color. This affects the color of the tick text.
• Specify the Axis label color. This affects the color of the axis label, if you have included one.

Legend

Use the legend properties to give the reader more information about the data included in the chart. This shows people which colors in your chart correspond with different series. People can select the legend items to show and hide data in the chart. You can also specify the legend position, so it shows beside or within the chart.

Custom gridlines

You can add gridlines to your chart that are independent of the axis gridlines. These can be based on either absolute values or they can use an aggregated value that’s based on series data. These can help the reader understand how the data in the chart compares to known benchmarks, for example, or development zones. For each custom gridline you can:

• Provide a Label for the gridline.
• Specify a Color for the gridline.
• Choose which axis to plot the gridline on.
• Choose a Value type for the gridline. There are two options here:
  • Aggregate series data: depending whether you’ve chosen to plot the gridline on the X-axis or the Y-axis, you can use this property to specify the type of Aggregation for the relevant series.
  • Custom value: if you want to set a specific value, you can choose this option and add a number to the Custom value field.
• Choose a position on the chart for the gridline label (start, middle, or end).

Regions

If you want to color specific background areas on a chart, you can do so using the Regions properties, which allow you to:

• Specify a Color for the region.
• Provide a Start value for where on the axis the region should begin.
• Provide an End value for where on the axis the region should finish.
• Choose which axis to plot the region on.

Interaction

If you want to provide users with more information about the data displayed in an XY scatter chart, you can set up different interactions using the Interaction properties.

There are three interactions you can enable for an XY scatter chart widget – tooltips, record cards and record click-through.

• Tooltips: if you want to provide more context for the people reading the chart, you can enable tooltips. The tooltip displays two to four data values for each point on the chart when the reader hovers over it or taps it, which represent the X and Y values and, if you have specified them, the color and size attributes.
  • Additional tooltip fields: when you want to include more information about each data point, you can customize the tooltip by adding more fields from the data source.
• Record cards: when record cards are enabled, then the card fields that are set will be shown in a pop-up screen when a point on the chart is selected.
• 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.

Advanced properties

Use the Advanced properties for customizing your chart further. Advanced properties for the XY scatter chart widget allow you to:

• Specify the Chart height (px).
• Choose whether to rotate the chart axes. This switches the horizontal and vertical axes.
• Specify an opacity value for the scatter points on your chart.
• Specify a font size for chart labels. This is measured in pixels and affects all text included in the chart, such as the axis labels, tick labels, gridline labels, and data labels.
• Specify a padding value for the bottom of the chart. This is measured in pixels and creates additional space between the horizontal axis and the lower boundary of the XY scatter chart.
• Hide the widget if no data is available (based on data source and filter settings).

Data preview

The XY scatter chart widget has properties that allow you to choose how you want to preview your chart. When using the dashboard builder, you’re not able to view real data entered by athletes, coaches or other users of your Teamworks AMS site. So the dashboard builder shows you simulated data in order for you to see how your chart might appear. 

If you have specific expectations of the data that your chart will be used for, you can set them using the Data preview properties. You can choose how many data points should appear for each color (Number of data points per group) and how many colors should be used (Number of groups). You can also choose ranges for the X, Y and size variables.

Trellis

Use the Trellis properties to conditionally display the Categorical 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 to keep the category order consistent for all multiples.
• Choose whether to order the trellis by Values, Date of first occurrence, Date of last occurrence or a Custom order. You can then set the order Direction to be Ascending or Descending.
• 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, check out our article on Widget Trellising.