# Configuring visualization overrides > For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt) Source: https://developers.thoughtspot.com/docs/visualization-overrides # Configuring visualization overrides The Visual Embed SDK allows you to apply visual styling overrides programmatically to the charts and tables generated from Search data queries in an embedded app. ## Overview The visualization overrides feature allows developers to pre-define the chart and table settings for their embedding application users and apply these overrides at load time. This eliminates the need for embedding application users to manually adjust charts and tables in the edit mode. Using the `visualOverrides` object, embed application developers can preset the following properties in the new answers retrieved from a search data query: - Chart properties, such as the legend position, data labels, axis ranges, column colors, conditional formatting, and grid lines - Table properties, including column visibility, text wrap, content density, and summary configuration ## Configuring visual overrides The `visualOverrides` object in the `VisualizationOverrides` interface lets you apply styling overrides to charts and tables generated in the embedded ThoughtSpot Search interface. These overrides can be categorized as: - Visualization-level overrides that affect settings such as legend visibility, data labels, axis ranges, colors, gridlines, and conditional formatting on a chart. - Column-level overrides applied such as number formatting, headline visibility, and sort order in a table. Within `visualOverrides`, the chart and table settings can be applied in the `chart` and `table` objects. ### Chart override settings For chart overrides, use the top-level `chart` object and configure the following properties as needed: | Property | Description | | --- | --- | | `legend` _Optional_ | Object properties for setting visibility, position, and color palette of a legend. | | `show` _Optional_ | _Boolean_. Shows or hides the chart legend. | | `position` _Optional_ | _String_. Position of the legend relative to the chart. Valid values include: - `LegendPosition.Top` to position the legend at the top of the chart. - `LegendPosition.Bottom` to position the legend at the bottom of the chart. - `LegendPosition.Left` to position the legend at the left of the chart. - `LegendPosition.Right` to position the legend at the right of the chart. | | `colorPalette` _Optional_ | Custom color palette properties for the legend. Overrides the default color sequence applied by ThoughtSpot. To customize color, specify the hex code in the `color` parameter. | | `dataLabel` _Optional_ | Data label visibility settings, including per-column label filters. | | `allLabels` _Boolean_. When `true`, shows data labels on all data points across all series. | | `stackLabels` _Boolean_. When `true`, shows cumulative total labels on stacked chart segments. | | `columnDataLabel` _Boolean_. Per-column data label visibility and filter threshold settings. For column data labels, you can define the following properties: - `name`: _String_. Required parameter. Column name to apply the data label configuration to. - `visible`: _Boolean_. Optional parameter. Shows or hides data labels for this column. - `filter`: Optional parameter. Sets a filter threshold. When set, the labels are displayed only for data points that meet the filter condition. Define the following attributes to set a filter: | | For `filter`, include the following attributes: - `value`: _Integer_. Threshold value for the filter comparison. - `operator`: _String_. Comparison operator for the threshold filter. Valid values for this attribute are: - `DataLabelFilterOperator.GreaterThan` - Shows the label when value > threshold. - `DataLabelFilterOperator.LessThan` - Shows the label when value < threshold. - `DataLabelFilterOperator.GreaterThanOrEqualTo` - Shows the label when value ≥ threshold. - `DataLabelFilterOperator.LessThanOrEqualTo` - Shows the label when value ≤ threshold. - `DataLabelFilterOperator.EqualTo` - Shows the label when value = threshold. - `DataLabelFilterOperator.NotEqualTo` - Shows the label when value is not equal to the threshold. | | `display` _Optional_ | Object for chart display settings. | | `summaries` Row and column totals and grand totals. Applies to cross-tab (pivot) charts. Enable or disable the following settings as needed: - `showRowTotals`: _Boolean_. Shows a totals cell at the end of each row. - `showColumnTotals`: _Boolean_. Shows a totals cell at the bottom of each column. - `showRowGrandTotals`: _Boolean_. Shows a grand total row summarizing all rows. - `showColumnGrandTotals`: _Boolean_. Shows a grand total column summarizing all columns. | | `regressionLine` _Boolean_. When `true`, overlays a statistical regression (trend) line on the chart. | | `gridLine` _Optional_. Shows or hides grid lines on the chart. Specify the following attributes: - `x`: _Boolean_. When `true`, shows vertical grid lines along the x-axis. - `y`: _Boolean_. When `true`, shows horizontal grid lines along the y-axis. | | `axis` _Optional_. | Per-axis configurations. Each entry controls one axis group, identified by its linked columns. | | `linkedColumns` _Array of strings_. Column names bound to this axis configuration. | | `showName` _Boolean_. Shows or hides the axis name label. | | `showLabelValue` _Boolean_. Shows or hides the value labels along the axis. | | `yAxisRange` Sets the y-axis range to a specific minimum and maximum value. Use to enforce a consistent scale across embed instances. Valid values include: - `min`: _Integer_. Minimum value of the y-axis domain. - `max`: _Integer_. Maximum value of the y-axis domain. | | `columns` | Per-column overrides: series color and conditional formatting rules. Include the following attributes: | | `name` _String_. Column name to apply overrides to. | | `color` _String_. Default series color for this column as a hex string. For example, `#1A73E8`. | | `conditionalFormatting` Conditional formatting rules applied to data points in this column. Specify the following properties as needed. To apply conditional formatting, set an array of rules in the `rows` object. Each rule is evaluated independently; the first matching rule is applied. For more information, see [Conditional formatting overrides]({{navprefix}}/{{viz-overrides}}#_conditional_formatting_overrides). | | `updateMaskPaths` | _Array of strings_. Field mask for partial updates. Specifies which fields to apply when updating an existing visualization. Pass an empty array `[]` to apply all provided fields. | | | | ### Table overrides If the answers are in the table format, use the `table` object and define the following attributes:

Property

Description

columns

Per-column overrides: visibility, text wrapping, and conditional formatting.

name
String. Column name to apply overrides to.

wrapText
Boolean. When true, wraps long cell content across multiple lines. When false, clips content to a single line.

show
Boolean. Show or hide the column in the table.

Conditional formatting
Conditional formatting rules applied to data points in this column. Specify the following properties as needed. To apply conditional formatting, set an array of rules in the rows object. Each rule is evaluated independently; the first matching rule is applied. For more information, see Conditional formatting overrides.

### Conditional formatting overrides The conditional formatting properties can be configured in both chart and table override settings in the `columns` object.

Property

Description

conditionalFormatting

Conditional formatting rules applied to data points in this column. Specify the following properties as needed. To apply conditional formatting, set an array of rules in the rows object. Each rule is evaluated independently; the first matching rule is applied.

operator.
String. Required parameter. Comparison operator that triggers the formatting rule. Valid values are:

  • ConditionalFormattingOperator.Is to set the exact cell value.

  • ConditionalFormattingOperator.IsNot to exclude a cell value.

  • ConditionalFormattingOperator.Contains to set cell value to a specified string.

  • ConditionalFormattingOperator.DoesNotContain to set a cell value that does not contain the specified string.

  • ConditionalFormattingOperator.StartsWith to set a specific starting string for the cell value.

  • ConditionalFormattingOperator.EndsWith to set a cell value that ends with the specified string.

  • ConditionalFormattingOperator.GreaterThan to set a cell value greater than the specified value.

  • ConditionalFormattingOperator.LessThan to set a cell value that is less than the specified value.

  • ConditionalFormattingOperator.GreaterThanEqualTo to set a cell value that is greater than or equal to the specified value.

  • ConditionalFormattingOperator.LessThanEqualTo to set a cell value that is less than or equal to the specified value.

  • ConditionalFormattingOperator.EqualTo to set a cell value that is equal to the specified value.

  • ConditionalFormattingOperator.NotEqualTo to set a cell value that is not exactly equal to the specified value.

  • ConditionalFormattingOperator.IsBetween to set a cell value that is between the defined range of values.

  • ConditionalFormattingOperator.IsNull to set a null value.

  • ConditionalFormattingOperator.IsNotNull to set a value that is not null.

value
String. Literal value to compare against within a range of 0 to 1000000. Used when comparisonType is set as ConditionalFormattingComparisonType.ValueBased and the operator is set as ConditionalFormattingOperator.IsBetween.

comparisonType
String. Determines what the operator compares against. Valid values are:

  • ConditionalFormattingComparisonType.ValueBased to compare the column value against a literal string in value.

  • ConditionalFormattingComparisonType.ColumnBased to compares the column value against another column specified in columnToCompare.

  • columnToCompare: String. Column name to compare against (right-hand side). Used when comparisonType is ConditionalFormattingComparisonType.ColumnBased.

  • ConditionalFormattingComparisonType.ParameterBased to compare the column value against a ThoughtSpot parameter specified in comparisonParameterId.

  • comparisonParameterId: String. Parameter ID to compare against. Used when comparisonType is ConditionalFormattingComparisonType.ParameterBased.

plotAsBand
Boolean. When true, draws a reference band across the chart area instead of coloring individual data points.

isHighlightRow
Boolean. When true, applies the formatting to the entire table row instead of just the individual cell.

lhsColumnId
String. The column whose value is evaluated against the rule (left-hand side of the comparison).

fontProperties
Text styling applied to the cell when the condition is met. Specify the following attributes:

  • color: String. Text color as a hex string. For example, #ffffff.

  • bold: Boolean. When true, renders the text in bold.

  • italic: Boolean. When true, renders the text in italic.

  • strikeThrough: Boolean. When true, renders the text with a strikethrough.

  • underline: Boolean. When true, renders the text with an underline.

  • backgroundFormatType: String. Type of background fill to apply when the condition is met. Specify one of the following attributes:

    • BackgroundFormatType.Solid to apply a flat solid fill color. Requires solidBackgroundAttrs. In the solidBackgroundAttrs, you can specify the fill color in the color attribute.

    • BackgroundFormatType.Gradient to apply a gradient fill. Requires gradientBackgroundAttrs. In the GradientBackgroundAttrs:

      • Specify an array of hex color strings defining the gradient stops in colors.

      • Specify the midpoint position of the gradient with a value range between 0 and 100.

      • Specify the numeric range values that map to the gradient color stops in backgroundFormatRange.

      • To scale the gradient range to the data minimum and maximum values, set isAutoScaled to true.

## Code sample The following example shows the chart and table override settings for the new Answers generated from the embedded Search interface: ```JavaScript import { init, // Core SDK initialization function. AuthType, // for authentication type selection. SearchEmbed, // Embeds the ThoughtSpot Search page into a host application. ConditionalFormattingOperator, // Enum for conditional formatting comparison operators. DataLabelFilterOperator, // Enum for data label filter operators. ConditionalFormattingComparisonType, // Enum for conditional formatting comparison. BackgroundFormatType, // Enum for the background fill type in conditional formatting rules. TableTheme, // Enum for the visual theme of embedded tables. TableContentDensity, // Enum for the row height and padding density of embedded tables. LegendPosition, // Enum for the position of the chart legend. } from "@thoughtspot/visual-embed-sdk"; init({ thoughtSpotHost: '', // Replace with your application URL authType: AuthType.None, }); const embed = new SearchEmbed('#tsEmbed', { frameParams: { width: '100%', height: '100%', }, dataSource: "", // Replace with your application URL visualOverrides: { chart: { // Show or hide the chart legend, and set its position. legend: { show: true, position: LegendPosition.Bottom, }, // Data labels to show on chart series. dataLabel: { // Show labels on all data points across all series. allLabels: true, // Show cumulative total labels on stacked chart segments. stackLabels: true, // Per-column label visibility and optional value filters. // Use filters to suppress labels below or above a threshold. columnDataLabel: [{ name: 'Ship Mode', visible: true, // Only show the data label when the value is greater than 0 filter: { value: 0, operator: DataLabelFilterOperator.GreaterThan }, }, { name: 'Discount', // Hide data labels for this column entirely. visible: false, // No filter applied filter: null, //label is hidden regardless of value. }, ], }, // chart display settings. display: { // Controls row/column summary rows on crosstab (pivot) charts. summaries: { showRowTotals: true, // Show totals at the end of each row. showColumnTotals: false, // Hide totals at the bottom of each column. showRowGrandTotals: true, // Show the grand total row. showColumnGrandTotals: true, // Show the grand total column. }, // Show a statistical regression (trend) line on the chart. regressionLine: true, // Show or hide horizontal and vertical grid lines. gridLine: { x: true, // Show vertical grid lines (x-axis). y: true, // Show horizontal grid lines (y-axis). }, }, // Each entry in this array configures one axis group. columns listed in "linkedColumns" share the same axis settings. axis: [{ // Columns bound to this axis configuration. linkedColumns: ['Total Discount', 'Ship Mode'], // Show the axis name label. showName: true, // Show tick mark value labels along the axis. showLabelValue: true, // Fix the y-axis domain to a specific minimum/maximum range. // Useful for enforcing a consistent scale across embed instances. yAxisRange: { min: 0, max: 100, }, }, ], // Per-column series color and conditional formatting rules. columns: [{ name: 'Total Discount', // Default series color for this column (hex string). color: '#ababab', // Applies visual formatting rules to data points that meet the specified conditions. Each entry in rows[] is one rule. conditionalFormatting: { rows: [{ // Trigger this rule when the cell value is greater than 3300. operator: ConditionalFormattingOperator.GreaterThan, value: '3300', // When true, draws a reference band across the chart instead of coloring individual data points. plotAsBand: true, // Compare the column value against a literal value. comparisonType: ConditionalFormattingComparisonType.ValueBased, // The column whose value is evaluated against the rule. lhsColumnId: 'Total Discount', // Applied to cell text when the condition is met. fontProperties: { color: '#ffffff', // White text. bold: true, italic: false, strikeThrough: false, underline: false, }, // Use a solid fill color or a gradient fill. backgroundFormatType: BackgroundFormatType.Solid, solidBackgroundAttrs: { color: '#2E75F0', // Blue background when condition is met. }, // For gradient fill, set "BackgroundFormatType.Gradient". // backgroundFormatType: BackgroundFormatType.Gradient, // gradientBackgroundAttrs: { // colors: ['#000000', '#ffffff'], // }, }, ], }, }, ], // Field mask for partial updates. An empty array applies all provided fields. updateMaskPaths: [], }, table: { // Per-column overrides for visibility, text wrapping, and conditional formatting. columns: [{ name: "Total Discount", // Column name wrapText: true, // wrap long content across multiple lines show: true, // Conditional formatting rules to cells in this column. conditionalFormatting: { rows: [{ // Trigger rule based on the cell value. Compares the column value against the literal string in `value`. operator: ConditionalFormattingOperator.GreaterThan, value: "3300", // For value range-based matching condition, use `ConditionalFormattingOperator.IsBetween` and `rangeValues` // operator: ConditionalFormattingOperator.IsBetween ('IS_BETWEEN'). // rangeValues: { min: 0, max: 1000000 }, // Apply formatting to the entire table row instead of just the individual cell. isHighlightRow: false, comparisonType: ConditionalFormattingComparisonType.ValueBased, // The column whose value is evaluated against the rule (left-hand side). lhsColumnId: "Total Discount", // Text styling applied to the cell when the condition is met. fontProperties: { color: "#ffffff", // White text. bold: true, italic: false, strikeThrough: false, underline: false, }, // Use solid or gradient fill color for background styling backgroundFormatType: BackgroundFormatType.Solid, solidBackgroundAttrs: { color: "#2E75F0", //Solid fill color applied when the condition is met. }, }, ], }, }, // second column with no conditional formatting. { name: "Ship Mode", wrapText: false, show: true, }, ], // Table-level display settings. display: { // Set the row height and padding density of the table. tableContentDensity: TableContentDensity.Compact, // Use TableContentDensity.Regular for standard row height. }, displaySummaryConfig: { // Show summary rows for all columns by default. showAllSummaries: true, // Per-column exceptions to showAllSummaries. columnVisibility: [{ columnId: "Total Discount", visible: false }, { columnId: "Total Extended Price", visible: false }, ], }, // Field mask for partial updates. An empty array applies all provided fields. updateMaskPaths: [], }, }, }); embed.render(); ``` ## Limitations - Visual overrides cannot be applied to the existing saved answers or an answer with a modified search query. The overrides apply only to the new answers generated from the Search data interface. - Visual overrides are not supported in Liveboard and Spotter embedding. - Visual overrides do not control which fields are placed on the x-axis, y-axis, or slice-by-color. They also do not control whether measures share a single axis or are placed on dual axes. - Legend colors use a positional color palette and per-value mapping. Colors are applied in sequence to legend items in the order they appear in the chart. The overrides may not result in the exact legend item-to-color mapping by attribute value. - Overrides cannot be modified via HostEvents. To change overrides after the component has rendered, create a new embed with the updated configuration. ThoughtSpot recommends testing the overrides on a development or test environment before applying them on production instances. - Overrides do not create undo and redo history entries. Applying `visualOverrides` does not add entries to the answer’s undo and redo history. Embedding application users cannot undo a visual override through the ThoughtSpot UI. - Overrides do not trigger answer re-execution. Setting `visualOverrides` does not re-run the underlying query. Overrides are merged into the existing visualization configuration after the answer is loaded, with no performance impact on query execution. ## Additional references - [Embed Search page]({{navprefix}}/{{embed-search}}) - [Embed full application]({{navprefix}}/{{full-embed}}) - [SearchViewConfig]({{navprefix}}/{{SearchViewConfig}}) - [AppViewConfig]({{navprefix}}/{{AppViewConfig}})