Plot/Chart - Color Rows of Tables or Bars of Plots

From Q
Jump to navigation Jump to search

This rule colors bars or columns in a bar or column chart that contain a specified text in their labels. It is for situations where there is a need to automatically format many different tables or charts (e.g., if wanting a brand to always be colored with its own color).


Technical details

  • The input text is searched for in the labels in a case-insensitive way (capitalization does not matter).
  • This script is not compatible with tables/charts that have row spans.
  • The For Loop goes through and makes the change to all the rows columns in the underlying table.
  • A list of different colors is at JavaScript Color Table.
  • The object containing the colors, colors, is an Array, where each element in the array relates to a row and, this element is, initself, another Array, where each element refers to the column within the array.
  • Having modified the array we then need to tell Q to use the modified array, which is what occurs with the code table.cellColors = colors;

How to apply this rule

For the first time in a project

  • Select the table(s)/chart(s) that you wish to apply the rule to.
  • Start typing the name of the Rule into the Search features and data box in the top right of the Q window.
  • Click on the Rule when it appears in the QScripts and Rules section of the search results.


  • Select Automate > Browse Online Library.
  • Choose this rule from the list.

Additional applications of the rule

  • Select a table or chart that has the rule and any table(s)/chart(s) that you wish to apply the rule to.
  • Click on the Rules tab (bottom-left of the table/chart).
  • Select the rule that you wish to apply.
  • Click on the Apply drop-down and choose your desired option.
  • Check New items to have it automatically applied to new items that you create. Use Edit > Project Options > Save as Template to create a new project template that automatically uses this rule.

Removing the rule

  • Select the table(s)/chart(s) that you wish to remove the rule from.
  • Press the Rules tab (bottom-right corner).
  • Press Apply next to the rule you wish to remove and choose the appropriate option.

How to modify the rule

  • Click on the Rules tab (bottom-left of the table/chart).
  • Select the rule that you wish to modify.
  • Click Edit Rule and make the desired changes. Alternatively, you can use the JavaScript below to make your own rule (see Customizing Rules).


You can find a simpler version of this code, which does not contain the controls, here.

includeWeb('Table JavaScript Utility Functions');


if (table.rowSpans.length > 0)
    form.ruleNotApplicable('table/plot has row spans');

// Set up controls for user input.
form.setHeading('Color Rows of Tables or Bars in Plots');
let description = form.newLabel('Set colors for rows that contain the specified ' +
                                'text in their labels.');
description.lineBreakAfter = true;
let label_row = form.newLabel('Text:');
let text_box = form.newTextBox('textBox');
let color_picker = form.newColorPicker('color');
form.setInputControls([description, label_row, text_box, color_picker]);
let row_text = text_box.getValue().toLowerCase(); // case insensitive
let color = color_picker.getValue();
form.setSummary('Color rows or bars containing "' + row_text + '"');

let colors = table.cellColors;
let row_labels = table.rowLabels;
row_labels.forEach(function (label, index) {
    if (label.toLowerCase().indexOf(row_text) > -1) { // check if row label contains text
        for (let i = 0; i < table.numberColumns; i++) // set color for each element in row
            colors[index][i] = color;
table.cellColors = colors;

Prior to the 15th of December, 2015, this page was known as Plots – Automatically Color Rows or Bars of Plots (and Tables)

See also