Conditional formatting

Shading table cells based on the cell values can help you quickly spot outliers or trends. This example lets you shade table cells with values that fall above, below, or equate a given threshold.

Add conditional formatting to a table

The sales tables below show two examples of conditional formatting.

View Mode Analysis

Click Powered by Mode to duplicate this report and add links to your tables. Learn more about using HTML to customize your reports.

Add the stylesheet link and script tag to the top of the HTML:

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://mode.github.io/alamode/alamode.min.js"></script>

This tag calls back to an open-source library called alamode.js, which provides an easy way to build some of our users' favorite visualizations.

Next, you can apply conditional formatting rules that apply to the entire table, or to individual columns.

Applying rules to the entire table

The first table in the example above shows a table with conditional formatting applied across the entire table. To apply this formatting to a table, add this customizable snippet at the bottom of the HTML in your report:

<script>
alamode.customizeTable([{
		vizId: 'a22c61f85131',
		formatByTable: {
			columnNames: ['organic', 'twitter', 'adwords', 'facebook'],
			rules: [
				{ type: '>', value: 50, color: '#9DC8C8' }
			]
		}
	}])
</script>

The customizeTable function above takes an array of object(s) as inputs. One Javascript object per visualization:

• vizId: The ID of the Mode visualization you want to add formatting to. You’ll find this ID in the pre-populated HTML code in a line that looks like this: <mode-chart id="chart_a22c61f85131" dataset="dataset" options="chart_options"></mode-chart>. You should provide the ID hash without the chart_ prefix.
• formatByTable: An object that contains columns and rules you want to apply to a given table
• columnNames: A list of the columns you want to apply your rules to.
• rules: A list of rules to apply. Each rule should be a Javascript object. Details for the rules are shown in the Formatting Rules section below.

Applying rules to individual columns

The second table in the example above shows a table with different conditional formatting rules applied to individual columns. To apply this formatting to a table, add this customizable snippet at the bottom of the HTML in your report:

<script>
alamode.customizeTable([{
  vizId: 'cec574afc590',
  formatByColumn: {
    columns: [{
      name: 'sales',
      rules: [{
        type: '<',
        value: 50000,
        color: '#DA364A'
      },
      {
        type: '>',
        value: 200000,
        color: '#37B067'
      },
      {
        type: '===',
        value: 115344,
        color: '#EFDC05'
      }]
    }]
  }
}])
</script>

The customizeTable function above takes an array of object(s) as inputs. One Javascript object per visualization:

• vizId: The ID of the Mode visualization you want to add formatting too to. You’ll find this ID in the pre-populated HTML code in a line that looks like this: <mode-chart id="chart_cec574afc590" dataset="dataset" options="chart_options"></mode-chart>. You should provide the ID hash without the chart_ prefix.
• formatByColumn: An object that contains columns and rules you want to apply to a each column
• columns: A list of the columns and their formatting rules. One Javascript object per column.
• rules: A list of rules to apply to a given column. Each rule should be a Javascript object. Details for the rules are shown in the Formatting Rules section below.

Formatting Rules

This example supports only threshold rules. Supported threshold rule types are: ===, !==, <, >, <=, >=. For example, if the type is set to >, cells with values above the given value will be shaded the given color. If the type is set to <, cells with values below the given value will be shaded the given color. If the type is set to ===, cells with values that are equal to the given value will be shaded the given color. If there are multiple rules of the same type, only the first matching rule will be used.

{ type: '>', value: 800, color: '#894FBA' }
{ type: '<', value: 500, color: '#EE7437' }
{ type: '===', value: 600, color: '#EFDC05' }

If formatByTable and formatByColumns are both present for a single visualization, only formatByTable will be used. color needs to use hex color codes.