Customization of Table chart settings

Charts

Table chart settings

Column width

By default, columns in table charts are auto-sized. However, should you wish to customize column sizing, you may do so in the chart’s settings.

Open your chart for editing and click the Settings button. Switch to the Columns tab, and click +Add New Formatting Rule.

Select your column, then select Percent from the Column Width dropdown and set your desired percentage. Other columns will auto-adjust size accordingly. Any text-overflow in your column will be truncated with an ellipsis, and the full text is viewable on hover.

Hidden columns on your chart

To hide a column, set its percentage width to 0.

Final result, setting the column width

In some instances, a column may appear to be “hidden” in a table chart.

For example, in this chart, there are four columns visible.

Table chart with not all rows visible

However, upon clicking on the “View all 1,000 rows and 5 columns”, the modal reveals the ‘State’ column in between columns ‘Company’ and ‘Zip’.

Expanding the View all Rows and Columns will reveal the hidden column

This is happening because the column width percentages are set in a way that is “hiding” the ‘State’ column. To resolve the issue, you will need to adjust the column width percentages in your chart settings.

Format your data columns from the chart settings

Long text fields in table charts

If you have a long text field that you would like included, you have several different options for displaying long text fields on your table chart.

Customizing text elements

Apply specific formatting styles to Table chart columns, such as date formatting or text color.

Open your chart for editing, and click the Settings button. In the Chart Settings, switch to the Columns tab. Set defaults under the Default Column Formatting section, or click Add New Formatting Rule to format an individual column.

To format a numeric column as currency, for example, add a new formatting rule and select Currency from the Number dropdown.

Data formats can be customized from the chart settings

Formatting dates

Each date bucket (month, week, day, etc.) offers different formatting options.

Example

Our chart is grouped by week number, and we want to instead show the date range for the week. In our Chart Settings, we’ll switch to the Columns tab, click + Add New Formatting Rule, and select our week column from the Format Column dropdown. Then we’ll select Long from the Week Formatting dropdown, and click Done and save the chart.

Adjust the week date display in the chart settings

Row totals and customized aggregations

You can add a row total for any numeric column in a table chart. Additionally, you can customize the aggregation type used for each column.

From within the Data Explorer, click the Chart Settings button.

Check the Show row aggregation for numeric columns checkbox. Click Done when finished.

Optional toggle for displaying row aggregations

The total row will always display on the chart, even if all of the rows don’t fit in the available chart space.

Set custom aggregations for each column

The aggregation row defaults to sum for each numeric column. However, you can change the aggregation per column as needed.

To change the aggregation type, open the Chart Settings and switch to the Columns tab. Click the Add New Formatting Rule button. Select your column from the dropdown, and adjust the Aggregate Row setting to choose a custom aggregation.

Adding a totals row

Conditional column formatting

Apply formatting to column values when they meet a specific condition. You may apply as many conditional rules to a chart as you wish.

Open your chart for editing, and click the Chart Settings button. In the Chart Settings, switch to the Conditions tab. Click Add New Conditional Rule.

In our example, we want to highlight any rows where the count of new users is greater than 150. We’ll select our column, set our condition, and adjust our Text Styles.

Using case statement to set conditional values

A case statement allows you to set column values based off a pre-defined condition being met or not met. The general formula is:

CASE WHEN "Column Name" (condition)
 THEN 'value'
WHEN "Column Name" (condition2)
 THEN 'value2'
ELSE "Column Name"
END

In this example, we are getting the sum of the Engagement Index, and grouping the results by the Activity Name. This is what the Data Preview looks like:

Data preview view

We want to add a new column based on Engagement Index, where if Engagement Index is greater than 50,000, the new column should contain the string “High Engagement” for that row. If the sum is less than 50,000, we want the new column to contain the string “Low Engagement” for that row.

Start by adding an Add Column step in the Data Pipeline.

Add Column step in the Pipeline

Call the column Engagement Group, and put the following case statement in the Formula section:

CASE WHEN "Engagement Index" > 50000 THEN 'High Engagement' WHEN "Engagement Index" < 50000 THEN "Low Engagement" ELSE "Engagement Index" END

Here is what the Add Column step looks like, along with a data preview after the step is applied.

Case statement in the Add Column, final result

Using a case statement to rename existing column values

If you are using a case statement to rename existing column values, you will need to hide the original column and reorder your columns.

  1. Add a Hide Columns step to hide the original column.
  2. Add a Reorder Columns step to reorder the new column so it is in the same place as the original.

Format multiple columns

You may apply conditions to multiple columns, as long as the columns are the same data type. Simply select additional columns from the Format Column dropdowns.

To format all columns of the same data type, choose “All numeric columns” or “All text columns” from the Format Column dropdown.

Formatting multiple columns at once

Note: later rules can override earlier rules. If a column value fits multiple rules, the later rule will be applied.

Check out a video below to see an example of applying conditional formatting to a table chart:


Related Charts Help Articles

See more