The widget editor is an interface which allows users to create and edit widgets (charts and tables). This article describes how the widget builder allows users to edit widgets by editing the settings of individual fields in the chart or table.
For example, users would be able to format a number in a chart label so that it has multiple decimal places.
Field settings vary by the way in which the data is sliced, as determined by which drop area of the widget editor is used:
Segment By
Format (Tables only)
Inherit Format
Set a format of values as default.
Preset - number, currency, percentage or custom
Set a format of values as numeric, currency, percentage, or custom (specify).
Number
Decimal Places
Set a displayed number of digits after separator. For example, 10,08 or 10,075
Negative Symbol
Set a displayed format of negative values. For example, -42 can be shown as (42) in accordance with accounting standards.
Display Type - Display Units, Ordinal Numbers, or None
Set a displayed format of numeric values as ordinal. For example, transform from 42 to 42nd.
Separator Type - None, Comma, or Dot
Set a separator as comma or dot. For example, choose between 1,000,000 or 1.000.000 or 1000000.
Currency
Locale
Choose a currency. Default number formats will then reflect the chosen currency's customs (e.g. where separators are located).
Locale display format: Prefix or Suffix
Set a place for the currency's symbol - before or after a number (42$ or $42).
Decimal Places
Set a displayed number of digits after separator. For example, 10,08 or 10,075
Negative Symbol
Set a displayed format of negative values. For example, -42 can be shown as (42) in accordance with accounting standards.
Separator Type - None, Comma, or Dot
Set a separator as comma or dot. For example, choose between 1,000,000 or 1.000.000 or 1000000.
Percentage
Decimal Places
Set a displayed number of digits after the separator. For example, 10,08 or 10,075
Custom
Set a custom format for values. Instructions on writing the custom format are provided by NumeralJS.
Settings (Tables only)
Enable Settings
Enable settings in order to customise the alignment, font, colour and border of all cells related to this field.
Align horizontal
Horizontal alignment of all cells related to this field: left, center or right.
Align vertical
Vertical alignment of all cells related to this field: top, middle, bottom.
Bold
Make bold all cells related to this field
Italic
Italicize all cells related to this field
Underlined
Underline the values of all cells related to this field.
Font Family
Set a custom font for all cells related to this field.
Font Size
Set font size of all cells related to this field.
Text color
Set text color of all cells related to this field.
Background color
Fill background color of all cells related to this field.
Border
Set border position and thickness of all cells related to this field.
Word Break
Set text wrapping: overflow, wrap or clip.
Reset Settings
Reset all applied settings.
Display Name (Tables only)
Change the display name for the chosen field - this change only applies to the current widget.
Breakdown By
Stack breakdown
Add all individual values from a breakdown together to form one total, whilst still highlighting individual values.
For example, if monthly revenue is segmented by month and then broken down by apples vs oranges, stacking the breakdown would add the revenue for apples and oranges together, whilst still showing their individual contributions.
Stack to 100%
Normalize stacked values so that each segment adds to 100%. Useful to see percentages - e.g. in January apples made 68% of all sales.
Show stack total
Show the total of all of the breakdowns in the chart. E.g. If 68 apples and 31 oranges were sold in January, the stack total would show 99.
Sort (Tables only)
Sort the order in which the breakdown columns are displayed from left to right - Ascending or Descending. For example, Ascending would show the '1_visitor' column before the '2_lead' column.
Summarize By
Mark type
Choose a mark type: bar, line or area. For example, the same data you can present as bar charts, line charts or line charts with underlying areas.
Stack group
Assign an identifier for a stack group, in case of multiple columns in a bin Summarize By. For example, if you have two different columns in Summarize By and two stack groups, then bars will be shown side-by-side. In case of one stack group, values will be represented in the same bar.
Format
Inherit Format
Set a format of values as default.
Preset - number, currency, percentage or custom
Set a format of values as numeric, currency, percentage, or custom (specify).
Number
Decimal Places
Set a displayed number of digits after separator. For example, 10,08 or 10,075
Negative Symbol
Set a displayed format of negative values. For example, -42 can be shown as (42) in accordance with accounting standards.
Display Type - Display Units, Ordinal Numbers, or None
Set a displayed format of numeric values as ordinal. For example, transform from 42 to 42nd.
Separator Type - None, Comma, or Dot
Set a separator as comma or dot. For example, choose between 1,000,000 or 1.000.000 or 1000000.
Currency
Locale
Choose a currency. Default number formats will then reflect the chosen currency's customs (e.g. where separators are located).
Locale display format: Prefix or Suffix
Set a place for the currency's symbol - before or after a number (42$ or $42).
Decimal Places
Set a displayed number of digits after separator. For example, 10,08 or 10,075
Negative Symbol
Set a displayed format of negative values. For example, -42 can be shown as (42) in accordance with accounting standards.
Separator Type - None, Comma, or Dot
Set a separator as comma or dot. For example, choose between 1,000,000 or 1.000.000 or 1000000.
Percentage
Decimal Places
Set a displayed number of digits after the separator. For example, 10,08 or 10,075
Custom
Set a custom format for values. Instructions on writing the custom format are provided by NumeralJS.
Filter
Add field filter
Apply filtering parameters to only the selected column.
Tooltip
Show
Enable hovering over a chart functionality to examine additional information on demand within the context of the original view.
Default
A preset display of the tooltip optimised for that particular chart type.
Custom
Add fields to display in tooltip
Add fields here so that they can be displayed in your customised tooltip.
Custom tooltip text
Write a custom text for the tooltip, including any fields already used in the widget or fields you have selected above. The text can be formatted over multiple lines, made bold or italicised.
Label
Show
Enable text labels to show for each individual data point.
Default
A preset display of the label optimised for that particular chart type.
Label Position Settings
Label Position
Choose from 1 of 12 positions for the label relative to the data point. For example, top, left or bottom.
Rotate
Set label position - angle of rotation.
Horizontal Align
Set horizontal alignment of the label to be on the left, center or right.
Vertical Align
Set vertical alignment of the label to be on the bottom, middle or top.
Custom - Other
Add fields to display in label
Add fields here so that they can be displayed in your customised label.
Custom label text
Write a custom text for the label, including any fields already used in the widget or fields you have selected above. The text can be formatted over multiple lines, made bold or italicised.
Show Percentage
Show each datapoint as a percentage of the total (sum) of the values for all displayed datapoint for that field. For example, in a bar chart where 2 Carrots, 4 Bananas and 4 Apples have been sold, each bar would show 20%, 40% and 40% respectively.
Cumulate (based on sort)
For each datapoint, replace the individual value with a cumulative sum/ running total of all of the values up to that point.
Show Right Axis
Shows an axis on the right hand side of the chart, scaled to fit all values for fields which have 'Show Right Axis' enabled.
Size (Pie Charts only)
Set the size of the pie chart. This should be in the range of 1-100
Settings (Tables only)
Enable Settings
Enable settings in order to customise the alignment, font, colour and border of all cells related to this field.
Align horizontal
Horizontal alignment of all cells related to this field: left, center or right.
Align vertical
Vertical alignment of all cells related to this field: top, middle, bottom.
Bold
Make bold all cells related to this field
Italic
Italicize all cells related to this field
Underlined
Underline the values of all cells related to this field.
Font Family
Set a custom font for all cells related to this field.
Font Size
Set font size of all cells related to this field.
Text color
Set text color of all cells related to this field.
Background color
Fill background color of all cells related to this field.
Border
Set position and thickness of all cells related to this field.
Word Break
Set text wrapping: overflow, wrap or clip.
Reset Settings
Reset all applied settings.
Display Name (Tables only)
Change the display name for the chosen field - this change only applies to the current widget.
Show Aggregation Text (Tables only)
For each column related to this field, add the level of aggregation (e.g. COUNT) before the column name.
Cell type (Tables only)
Set cell type - default, simple bar, image, distribution chart, link cell.
- Simple Bar cells show a horizontal bar inside each cell to represent the magnitude of the value
- Image cells can display a picture within each cell. This requires each cell to have a link to an image URL. For example https://images.ctfassets.net/d1mdqyeue1uo/4yQrKaaZ0OUk8JUpoKKlyL/c99f8bddff59b8f62bf3d763264837a0/Group_9147.svg?h=40
- Distribution charts show the distribution of values within an aggregated field. Instead of displaying the aggregated value (e.g. Average), the distribution chart will show the top 10 values in the distribution, from most popular to least popular.
- Link cells will convert a string inside a cell into a clickable link which will open in a new tab.
Size
Set minimum Bubble Size
Set the minimum size of any bubble in the scatter plot. This is usually in the range of 1-20.
Set maximum Bubble Size
Set the maximum size of any bubble in the scatter plot. This is usually in the range of 21-100.