You can use the categorical chart widget to plot categorical data. This chart can display data from one or more series. Each series can come from the same data source or from different data sources.

A screenshot showing an example of a categorical chart that displays recent average player wellness data

In the example above, the categorical chart is displaying recent average player wellness data. The positions (centre midfield, goalkeeper and so on) are acting as the categories with wellness metrics (fatigue, stress, soreness, mood) being displayed as series. This chart also has a region set up to highlight an optimal zone for the stacked bars that comprise the total of the wellness metrics, which are averaged across each position.

In the sidebar

A screenshot showing an example of the general properties in the sidebar of the categorical chart widget

General: use the general properties of the sidebar to add descriptive information for your categorical chart. 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 colour 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 colour and text alignment.
  • Specify the widget width within the section where it appears.
  • Choose the background and border colour for the widget.

A screenshot showing an example of the categories properties in the sidebar of the categorical chart widget

Categories: to provide your categorical chart with a data source, use the categories properties of the widget to choose a data source and select which field will create the categories shown on the X-axis. This means the data that you add as series will be plotted using these categories. To customise your categories further, you can:

  • Set filters for the data you use to create the categories.
  • Choose the category data type (number, string or date).
  • Choose whether empty categories should be shown in the categorical chart. If there is no data for a category, the category will display as null. If you don’t want the null values to be shown, you can choose to hide them using this option. This is particularly useful if you expect the user to view many categories along the x-axis of the chart.

A screenshot showing an example of the categories sort and limit properties in the sidebar of the categorical chart widget

Categories Sort & Limit: you can further customise the behaviour of categories using the sorting and limiting properties:

  • Choose whether to sort categories by the category name or by data. Depending which option you choose here, you’ll see further controls for specifying the sorting direction. When you use the option to sort by data, you’ll need to pick which series (if there is more than one included in the chart) should decide the sorting behaviour.
  • Choose whether to limit the number of categories shown in the categorical chart. This is useful when there are many possible categories that could be included in the dataset (such as injury or illness codes from an OSICS diagram). If you want to limit the categories shown in the chart, you can choose which series in the chart should act as the limiter, then specify the number of highest or lowest categories to show.
  • Select whether to display sorting and limiting controls to people viewing the chart. If you disable this option, people will see the chart according to the sorting and limiting properties you’ve set. If you enable these, people will be able to sort or limit the categories in the chart using the series you’ve selected for the sorting and limiting properties.

A screenshot showing an example of the series properties in the sidebar of the categorical chart widget A screenshot showing an example of the advanced properties for series in the sidebar of the categorical chart widget

Series: populate the chart from your data sources using the series properties. For each series, you can:

  • Provide a series name.
  • Specify a colour for the series.
  • Choose the data source for the series.
  • Set filters for the data that will populate the series.
  • Choose the field from your data source which will be displayed in the series.
  • Decide which aggregation is the most appropriate for the column data.
  • Choose the series display type (line, bar, spline, area, area-spline, scatter). When deciding how to display data, you should take into account what the data represents. If the data is discrete, then using the bar or scatter display can communicate information to the reader more effectively. If the data is continuous or ordered, then it may be helpful to use the line, spline, area or area-spline format.
  • Use the Advanced settings for each series to further specify its appearance and behaviour:
    • Specify the number of decimal places that shown be shown.
    • Choose whether the series should be displayed on the Y2-axis (the default behaviour is for the series to display on the Y1-axis).
    • If the series uses the bar display type, you can choose to make it part of a stacking group by selecting a stacking group number. This allows you to group together any series that you want to be stacked. Each stacking group will be stacked as its own bar. The ordering of series within each group is controlled from the advanced properties.
    • Choose which fields from the data source for the series will appear in the record card when a data point on this series is selected.
    • Choose whether the series should be shown in the legend for the chart
    • If you’ve chosen a line or spline display type for a series, you can choose to use solid or dashed line style.
    • Enable or disable data labels for the series.

A screenshot showing an example of the X-axis properties in the sidebar of the categorical chart widget

X-Axis: specify how the horizontal axis of your categorical chart should appear and behave using the X-axis properties, which allow you to:

  • Provide an axis label, which will appear below the X-axis, centre-aligned.Specify the rotation of the tick text (category name) which appears below the X-axis.
  • Enable or disable line wrapping for the tick text.
  • Set a line limit for the tick text. This allows you to specify how many lines of text should appear for each category name on the X-axis. If there is more text than what will fit into the line limit you’ve set, then the text will be truncated. The full category name will appear in the tooltip, if you’ve enabled tooltips for the chart.
  • Enable or disable vertical axis gridlines. These appear using a dashed line style and correspond with the position of tick marks on the X-axis.
  • Specify the axis stroke colour. This affects the colour of the horizontal axis line and the tick marks for each category.
  • Specify the tick label colour. This affects the colour of the tick text (category names).
  • Specify the axis label colour. This affects the colour of the axis label (if you have included one) and the series names as they appear in the chart legend (if you have enabled the legend).

A screenshot showing an example of the Y-axis and Y2-axis properties in the sidebar of the categorical chart widget

Y-Axis and Y2-Axis: specify how the vertical axes of your categorical chart should appear and behave using the Y-axis (main axis) and Y2-axis (secondary axis) properties, which allow you to:

  • Choose whether to enable or disable the Y or Y2 axis. If you disable a Y-axis, none of the properties below will have any effect as the axis won’t be visible.
  • Provide an axis label, which will appear outside the axis, vertically aligned to the centre of the axis.
  • Set the tick format, which is the number of decimal places that the tick text should include.
  • 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.
  • Choose a tick count. This allows you to manually set the number of tick marks shown on the axis. The number of tick marks includes the tick at the base of the axis (at 0 if the axis minimum is 0).
  • Enable or disable horizontal axis gridlines. These appear using a dashed line style and correspond with the position of tick marks on the axis.
  • Set the padding for the top of the axis. This allows you to create more space at the top of the axis without affecting the maximum value for the axis. The top padding value is measured in pixels.
  • Set the padding for the bottom of the axis. This allows you to create more space at the bottom of the axis without affecting the minimum value for the axis. The bottom padding value is measured in pixels.
  • Specify the axis stroke colour. This affects the colour of the vertical axis line and the tick marks on it. 
  • Specify the tick label colour. This affects the colour of the tick text.
  • Specify the axis label colour. This affects the colour of the axis label, if you have included one.

A screenshot showing an example of the tooltip properties in the sidebar of the categorical chart widget

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 mouses over it or taps it. If you have more than one series on your chart, you might want to group tooltips. This setting combines the tooltip for series according to the category they appear in. 

A screenshot showing an example of the legend properties in the sidebar of the categorical chart widget

Legend: you can use a legend to give the reader more information about the data included in the chart. If required, you can adjust the legend content by choosing which series should be included in the legend (use the properties for each series to do this). Use the legend properties to enable or disable a legend for your chart and to choose the legend position (if enabled). 

A screenshot showing an example of the custom gridlines properties in the sidebar of the categorical chart widget

Custom Gridlines: you can add horizontal 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 strength standards, for example, or risk zones. For each custom gridline you can:

  • Provide a label for the gridline.
  • Specify a colour for the gridline.
  • Choose a value type for the gridline. There are two options here:
    • Aggregate series data: if you choose to use an aggregate value that’s based on one of the series in the chart, then you’ll also need to specify the type of aggregation and which series you want to use.
    • 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).
  • Choose whether the gridline should be plotted on the Y2-axis (the default behaviour is to plot custom gridlines using the Y-axis).

A screenshot showing an example of the regions properties in the sidebar of the categorical chart widget

Regions: if you want to colour specific background areas on a categorical chart, you can do so using the region properties, which allow you to:

  • Specify a colour for the region.
  • Provide a value for where on the vertical axis the region should start.
  • Provide a value for where on the vertical axis the region should end.
  • Choose whether to plot the region on the Y-axis or the Y2-axis.

A screenshot showing an example of the interaction properties in the sidebar of the categorical chart widget

Interaction: use the interaction properties to help readers interact with your categorical chart. The possible interactions for the categorical chart widget are:

  • 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.
  • Zoom: the zoom function lets people take a closer (or broader) look at chart data using the scroll or pinch ability of their mouse, trackpad or touch screen.
  • Subchart: this property can only be enabled when zooming behaviour is also enabled. A subchart shows people a smaller version of the chart at its full extent, which means they can easily see how far they’ve zoomed into a chart and the context for the magnified data they’re looking at.

To learn more about widget interactions, visit the article on customising widget interactions.

A screenshot showing an example of the advanced properties in the sidebar of the categorical chart widget

Advanced properties: use the advanced properties for customising your chart further. The advanced properties for the categorical chart allow you to:

  • Specify the chart height. This is measured in pixels.
  • Choose whether null data points should be connected. This is only applicable for series that are plotted using line or spline display type.
  • Choose how the bar width should be decided for series that are plotted using the bar display type. You can use auto mode, set a specific bar width (measured in pixels) or choose a ratio.
  • Choose whether to rotate the chart axes. This switches the horizontal and vertical axes.
  • Select a stacking order. If there is more than one series in your categorical chart that uses the bar display type, you can choose the order that you want them to be stacked. Any bar type series that have a stacking group specified in the series properties will be stacked by group number first and then by the stacking order you set here.
  • Choose whether to show series markers. These are displayed as a dot for each data point, regardless of the display type chosen (e.g. line, area, bar).
  • Specify the series marker size. This is measured in pixels and has no effect if series markers are disabled.
  • Specify the line width for series that use the line or spline display type.
  • Specify the area fill opacity (%) for series that use the area or area-spline display type.
  • Specify the series marker opacity (%). This has no effect if series markers are disabled.
  • Choose whether to normalise stacked bars. If you enable this option, then the value of each series shown in a stacked bar is converted to a percentage.
  • 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 categorical chart widget. 

A screenshot showing an example of the data preview properties in the sidebar of the categorical chart widget

Data Preview: the categorical chart 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 Smartabase 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 in the preview and what the minimum and maximum values will be. This means you can be more confident that your chart configuration will suit the live data.

Was this page helpful?