Renewed Report Builder: Spider chart

A spider chart is a great graphic way to compare results from different questions and visualize performance, for example between school subjects or departments of a business.


You can include as many axes as you want, but the most visually appealing and clear would be between three and six axes. The example below uses five axes and personalized results from the survey to show the amount of potential savings for different household categories.

Spider chart- exaple

This guide will teach you:

  1. Add a spider chart to the page
  2. Setup the chart
  3. Additional settings
  4. Additional buttons

1. Add a spider chart to the page

To add a spider chart widget to the page, all you have to do is click on it and drag and drop it on the page.

Spider chart- add a spider chart to the page

Once you add the widget a pop-up window will open where you can setup the chart.

2. Setup the chart

This graph basic components are the axes along which the data is plotted, and the lines of data that are drawn onto the axes. 

The key building blocks of this graph are the axes (as many as you wish) and the points of data displayed on the graph. Let's see now how to set up these components.

Spider chart- chart items

Start by clicking Add axis to start creating the axes for your data points. Give each axis a label and continue to add axes until you have the number of axes that you need.

Spider chart- Axes

Now it's time to start specifying how the first data series should be constructed. This is the line of points that will be plotted on the axis and connected to form a polygon with a colored line of your choice. 

Note that the number of data points must correspond to the number of axes so that you'll have a data point plotted on each axis. For example in a spider chart of four subjects, there are four axes, so for each data series, there are four data points. 

Data points can be variables or numbers that you choose and can be a mixture of both, or some lines can be variables and some numbers. In our example, the first data series named "Your score" is composed of variables taken from the survey answers, and the other two series, "class average" and "pass mark" are set numbers.

Spider chart- data series

  1. Series Label - give a name to the line. This is the name of the line that will be shown in the key under the graph.
  2. Series Color - choose the line color by clicking on the color selector. Take care to choose distinctly different colors for each of the lines so it will be easy to tell the difference between them!
  3. Serie Visualization  - choose line, colored layer, or column to change the display.
  4. Data Point Metrics - choose where the data for the graph should be taken from. You can either type in a number or click Variables to access the drop-down menu of variables that you can use. Variables take the data entered during the survey and display it in the graph. Data Point 1 Metric will correspond with Axis Label 1.
  5. Add point - click add point until you have added all the points you need to be plotted on your axes.

Always make sure your data point metrics are smaller than the maximum value on-axis to make sure no points are put outside of the graph.

Click Add series to continue adding as many lines as you would like to be shown on the graph. In the example above, we created three lines.

Take a look at how data series 2 looks in our example, when set values are entered, rather than variables.

Spider chart- data point metrics

Now you've set up your graph, you can also configure the last settings.

Spider chart- chart settings

  1. Chart title - name your graph, the name will be displayed at the report
  2. Intervals - add your own intervals, which are the numbers marking the scale shown on the inside of the graph. Use the arrows to change the axis interval label and choose the number that you want to be shown at each of the intervals. Use the arrows or type in the value that you wish to set for the maximum value on-axis.
  3. Show data point numbers - deactivate this option to hide the data point numbers from the chart
  4. Display type - choose whether you want your graph to be displayed as a circle or polygon.

3. Additional settings

Select the widget and then at the right of the screen click on the gear button. The widget list will be replaced by the additional settings.

Spider chart- additional settings

Here you can find the following settings:

  1. ID
  2. Name
  3. Rules
  4. Margins
  5. Background color
  6. Chart settings

1. ID

This is the ID of the widget.

Spider chart- id

2. Name

You can name your widget in order to identify it easier.

Spider chart- name

3. Rules

You can add your widget logic rules to ensure that your content will be visible only when the conditions are true. 

Spider chart- rules

When you click the Edit rule button a new pop-up window will appear.

Spider chart- add logic rules

Select from the dropdown menu the option you want, and then fill in all the required fields. Once you add everything you can click the Submit button.

Spider chart- submit button

Your content will not be displayed on the page anymore, instead of the content you will be able to see the widget logic rules.

Spider chart- rules

If you would like to edit your content again just click on the rule and the widget will expand. To edit the rule you would have to click on the Edit rule at the settings.

Spider chart- edit rule

This is the window where you can delete the rule by clicking on the Delete rule button.

Spider chart- delete rule

4. Margins

Add margins to create space around elements and move them in your page. By default the margins are set to 0, but you can change that anytime and add the margin you prefer.

Spider chart- margins


You can add margins left and right to make your chart smaller. The bigger the margins, the smaller the chart. Note that the margins should be equal, in order for the chart to be centered in the page. 

5. Background color

You can change the background color of this specific widget by clicking the color selector.

Spider chart- background color

Once you click it the background color selector will expand and you will be able to select the color you want or add the color hex.

Spider chart- background color

To save just click Apply color.

6. Chart settings

You can change the default title and label font size if you want. This is very useful if you are placing your chart inside a column, or you adjust its size. In this case you will have a smaller chart but your text will still be readable.

Spider chart- chart settings

4. Additional buttons

When you click on your widget, 4 blue buttons appear.

Spider chart- - additional buttons

The Arrow allows you to move between the different layers of the page. For example if you add a widget in a column then you have 3 layers: the page, the column and the widget. The arrow allows you to quickly select a different layer.

The second icon, the four arrow sign, allows you to move your widget up or down to the page.

Spider chart- additional buttons

The third icon, the page, allows you to copy this widget and the forth icon, the bin, to delete it.

What's next?

  • Renewed Report Builder-Bubble chart: The bubble chart widget allows your respondents to see their results from different questions but also compare them to other components. A bubble chart stands out because it allows a comparison between three variables.
  • Renewed Report Builder-Bar chart: Add a Bar Chart widget to your customized report to show respondents' results or another data set at a glance. This way you will display your data with rectangular bars. It allows you to show data separated into categories with relative numbers.

  • Renewed Report Builder-Gauge chart: Add a gauge chart to your personalized PDF report to represent average or actual scores or percentage results for question blocks or formulas. Respondents can see at a glance if they've scored towards the top-end or bottom-end of the scale. It  allows you to display a large data set visually.

Don't want to build it yourself? Contact our professional services team

Support is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.