How to Customize a Visual Report?

March 29, 2023

Jotform Report Builder gives you all the tools you need to customize the report of your form submission data. You can set a custom dimension for your report and change the background color on each page. You can also customize your report by adding texts, headers, images, shapes, and icons. You can resize, position, and style each element you add to your preference. The Jotform Report Builder page has customization settings for its layout, page, and elements.

Layout Settings

The Layout Settings can be accessed by clicking the Paint Roller icon on the right side of the page.

How to Customize a Visual Report? Image-1

The Layout Settings has the General and the Style tabs. Settings that are set in the Layout Settings affect all pages.

Under the General tab you can change the dimensions of the report (A4 Landscape, A4 Portrait, A5 Landscape, A5 Portrait, Web Custom), choose page transition, and enable/disable the Jotform Branding.

How to Customize a Visual Report? Image-2

As for the Style tab, it is where you can change the page background color of the entire report, choose a Chart Color Palette that will be applied to ALL the charts in the report. Also, you can edit tooltips.

How to Customize a Visual Report? Image-3

Chart Color Palette

This setting allows you to change the colors of the options on all the charts in the report as a group. The Chart Color Palette is set to these colors by default.

How to Customize a Visual Report? Image-4

Hover over on the selected Color Palette to show the Choose New button.

How to Customize a Visual Report? Image-5

Clicking the Choose New button will open the Color Palette Settings where you can choose from the 10 different Default Color Palettes or from the Custom Color Palettes you have created.

(a) Selected Color Palette is indicated by a checkmark.

(b) Each Color Palette has the following options that will show when you click the three-dot menu button.

How to Customize a Visual Report? Image-6

Use Palette: Aside from clicking on the Color Palette, you can select a Color Palette by selecting this option. Selected Color Palette will not have this option.

Edit: You can edit both default and custom Color Palettes. Edited Default Color Palettes will be added as a new Custom Color Palette. Edited Default or Custom Color Palettes will be selected and will be applied to charts automatically.

Duplicate: This option will create a copy of the Color Palette. It will be added as a new custom Color Palette.

On the Color Palette Settings, you may also create and save your own Custom Color Palette from scratch by clicking the Add New Palette button at the bottom.

How to Customize a Visual Report? Image-7

In addition to the options in the three-dot menu, Custom Color Palettes has a Delete option. When a selected Custom Color Palette is deleted, the first Color Palette under the Default Color Palettes section will be selected automatically.

How to Customize a Visual Report? Image-8

Colors in a Color Palette can be changed, arranged, or deleted. You can click on each color option to change its color or you can also click the color picker (water-drop) icon that appears when you hover on each color option. You will also see a trash bin icon that you can use to delete a color option. Deleting all the color options in a color palette will set the color of all chart options to black. As for arranging the order of the colors in a Color Palette, click and hold the 6-dotted icon that also appears when you hover over each color option to start dragging the color. Drop to release the color option after you place it in position.

Added Custom Color Palettes will also be available to choose from the Color Palette option under the Data tab of the Chart Settings in the same report. Changes made to the selected Color Palette will be applied to the charts instantly.

Tooltips

Tooltips show additional information when you hover.

You can enable/disable tooltips in the layout settings, customize showing data.

How to Customize a Visual Report? Image-11

Slide Settings

The default background color of a report page is white (#FFFFFF). You can update the background color on each page of your report on the Slide Settings, PAGE STYLE section. The Page Settings can be accessed by clicking the icon that is on the right side of every page.

How to Customize a Visual Report? Image-12

Under the ELEMENTS section of the Page Settings, you’ll see Layers where you can hide an element on your report by unchecking it on the list. You can also change the layer order of each element by dragging. One way to put this feature to good use is when you would like to add watermarks to your charts.

Element Settings

There are different kinds of elements settings as there are different kinds of elements that can be added to the report. Element settings open when you click the gear icon on the right side of the selected element.

1. Basic Elements

Text Settings: In addition to the (a) editing tools that this element has, its font and opacity can also be updated from its (b) settings.

How to Customize a Visual Report? Image-14

Header Settings: The Header element has three parts: (a) Header, (b) Line, and (c) Subheader.

How to Customize a Visual Report? Image-15

Each one can be customized under its respective tab in the Header Settings.

How to Customize a Visual Report? Image-16

Image Settings:  Jotform Report Builder makes it easy to upload a business logo to your report. There are three ways to add an image to your report.

(a) Upload tab: Upload an image file directly from your computer.

(b) My Image tab: Use an image you previously uploaded to your Jotform account.

(c) Enter URL tab: Add the link to your image.

How to Customize a Visual Report? Image-17

Shapes Settings: You can add five different shape types to your report (Rectangle, Ellipse, Line, Triangle, Star).

Each shape type, except Line, has different Fill, Border, and Size customization settings.

How to Customize a Visual Report? Image-19

Rounded Corner is a setting available only to the Rectangle shape type.

How to Customize a Visual Report? Image-20

The Line shape type, on the other hand, has its own different settings for Style, Size, Direction, Color, and Opacity. The Line shape type can be used as a divider on the report.

How to Customize a Visual Report? Image-21

Icon Settings: There are a lot of icons to choose from. The icons are divided into categories and there is also a search bar under the Star category that can help you find the icon you are looking for easily.

How to Customize a Visual Report? Image-22

Under the Style tab of the Icon Settings is where you can change the color, opacity, and size of an icon.

How to Customize a Visual Report? Image-23

Grid Settings: The Grid element offers you a way to show your form entries in a table and each field is presented in a column. Its settings allow you to check and uncheck the fields to select which one you only want to include in the table. You can drag and drop the fields listed in the settings to arrange the order of the columns. You may also pin the most important ones to the top by clicking the pin icon on the right of each field. Clicking (or double-clicking) the field name in the settings will let you rename the column headers to your preference.

The width of each column on the table can also be resized. Hover over to the line that divides each column header until your mouse cursor changes to this double arrow. Click and hold to start resizing the width of a column and then release it after you set the perfect column width.

2. Report (Chart) Elements

Chart Settings has 3 tabs; General, Data, and Style.

Under the General tab, you can set:

(a) Chart Title, which is by default the name of the field in your form.

(b) Form submission summary or the number of total entries.

(c) Chart Type that suggests which chart best suits the option in your field the most.

(d) Metric for your chart.

(e) Chart legend or table grid for your chart.

How to Customize a Visual Report? Image-26

Different Chart Types: Basic, Text, Donut, Pie, Column, Bar, and Line.

Basic Chart shows the option with the most responses. It also shows the number of times the option was selected and its percentage based on the total responses received.

How to Customize a Visual Report? Image-27

Text Grid shows the number of responses you received from the same field entry. This option is for the Name field, Email field, or other text entry fields. For Example, in the chart below it shows that the form received 9 out of 11 responses with John Smith in the Name field.

How to Customize a Visual Report? Image-28

The Line Chart is only available to form payment fields. It uses lines to connect individual data points that display the total quantity of purchases over a specified time interval.

How to Customize a Visual Report? Image-29

Bar Charts has a way to increase the width of the option’s text by dragging. When the double arrow cursor appears while hovering over on the right edge of the text options, click and drag it to the right to increase the width of the options making the entire option texts visible on the chart.

Table Grid Toggle will show the number of responses of each option and its percentage compared to the other options in a table format while the Legend Toggle will list the options side-by-side. Basic Chart doesn’t have the Legend Toggle option.

The Data tab is where you enable the details and options that you would like to be included in the chart. It is where you also sort, limit, and style each option data.

CHART OPTIONS

Option Name: Toggle to show the name of each data. 

Response Value: Toggle to show the total number on each data. 

Percentage of Total: Toggle to show the percentage on each data. 

Round Percentages: Toggle to round percentage on each data.

The options that appear under this section depend on the selected chart type.

How to Customize a Visual Report? Image-32

Show Responses is a setting under the Data tab that is only available to the Text Grid chart type. It refers to the Responses column of the Text Grid table.

How to Customize a Visual Report? Image-33

OPTION SETTINGS

Color Palette

Similar to the Chart Color Palette Setting under the Style tab of the Layout Settings, this option also allows you to change the colors of the chart options as a group. However, unlike the one in the Layout Settings, this setting only changes the colors of the options in a single chart. The selected Color Palette in this setting will override the selected Chart Color Palette in the Layout Settings.

This setting is set to the selected Chart Color Palette in the Layout Settings by default and once a different Color Palette is selected in this setting, a button to revert to the default Chart Color Palette you have set in the Layout Settings of the report will become available.

How to Customize a Visual Report? Image-34

Option Limit

By default, this setting is set to zero (0) and all options are shown in the chart and in the Data Order section. Entering a number greater than the total number of options a chart has will also show all the options in that chart and in the Data Order section. For example, if a chart has 5 options, you can set it to 6 or higher to show all the options.

How to Customize a Visual Report? Image-35

Changing it to a value that is less than or equal to the exact number of options a chart has will show the top options first, which is the number of options set less than 1 to make room for the “Other Entries” option. For example, a chart with a total of 4 options (a, b, c, d) and has an Option Limit set to 3 will show the top 2 options (a, b) and an “Other Entries” option that represents the remaining options (c, d) in the chart and in the Data Order section. In other words, the “Other Entries” option represents the total data of all the options that are not shown based on the number set in this setting.

How to Customize a Visual Report? Image-36

Sort By

There are five options under this setting:

How to Customize a Visual Report? Image-37

Default will sort the options in the chart based on the order the options appear on the form.

Response (High to Low) will sort the options based on response quantity from high to low.

Response (Low to High) will sort the options based on response quantity from low to high.

Alphabetic will sort the options in alphabetical order.

Custom will sort the options based on how you arranged it in the Data Order section of the Data tab.

Data Order section

Located at the bottom of the Sort By option, this section allows you to show/hide an option, change the color of each option, and manually arrange the order of the options in a chart.

Show/Hide options: You can check/uncheck the option to show/hide it on the chart

Change an option color: To individually set a color to an option, you can click it or click the color picker (water-drop) icon on the right of the option. Changing the color of the option individually, under this section, will override but will not affect the Color Palette set in the Chart Settings nor the Chart Color Palette in the Layout Settings of the report.

Arrange option order: Click and hold the 6-dotted icon on the left of an option to start dragging the option. Drop to release the color option after you place it in position. The moment you change the order of the options it will be set as the Custom option of the Sort By setting.

Other Entries option is by default set to color gray and is positioned last. You can arrange and change the color of this option, but you cannot arrange the order or change the color of each option it represents. You can see the option it represents by clicking the drop-down menu on the right of the option.

How to Customize a Visual Report? Image-38

The Style tab is where you customize the appearance of the details in a chart. It has two sections: Title Style and Chart Style

Title Style. You can change the font of the chart title, its size, color, style (bold, italic, underlined), and alignment in this section.

How to Customize a Visual Report? Image-39

Chart Style. You can change the font, font size, and color of the text details on the chart in this section.

(a)The Primary Color refers to the option labels and the legend of the chart texts.

(b)The Secondary Color refers to the form submission summary and the percentage of total texts.

How to Customize a Visual Report? Image-40
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Barry Saunders - Profile picture
  • Boby Varghese Jacob - Profile picture
  • Amy Riddle - Profile picture
  • Jan Cancila - Profile picture
  • Michelle Blodgett - Profile picture
  • Edward Totterdell - Profile picture
  • Katrina Elliott - Profile picture
  • Connie Gabelein - Profile picture
  • jbborot - Profile picture
  • Folkhalsan - Profile picture
  • linesforlife - Profile picture