Grid variables

Highcharts Grid includes a set of predefined CSS variables for theming the table surface and interaction states. Define global variables such as --hcg-font-size, --hcg-background, and --hcg-padding to establish a baseline style, then override specific areas with section-specific variables.

For theming of elements, such and inputs and buttons, see Element variables.

Variable naming and fallback

Most variables follow this pattern:

  1. Start from a global variable.
  2. Override with section-specific variables where needed.
  3. Fall back to global values when section variables are not defined.

Example:

.theme-custom {
    --hcg-padding: 10px;
    --hcg-header-vertical-padding: 6px;
}

In this case, the initial global padding for all table cells (th and td) is set to 10px, while top/bottom padding for headers (th) is overridden using 6px.

Background and color fallback chain

For normal body cells, the effective background fallback chain is --hcg-cell-background -> --hcg-row-background -> --hcg-column-background -> --hcg-background. Body cell text color follows the same pattern: --hcg-cell-color -> --hcg-row-color -> --hcg-column-color -> --hcg-color. In a non-conditional theme, setting every level usually adds little value because the most specific variable for that cell wins.

These options exist mainly for Conditional theming, where you may want to style only selected rows, columns, or cells. There is no required variable for the "base" background color, but if you are not using conditional rules, --hcg-background is the recommended starting point because it is the simplest. Headers are a small exception: header backgrounds use --hcg-header-background -> --hcg-cell-background -> --hcg-column-background, while header text color uses --hcg-header-color -> --hcg-column-color -> --hcg-cell-color -> --hcg-color.

Fonts and text

Globals

VariableDefault ValueValid Values
--hcg-font-familySystem fonts *font-family
--hcg-font-size1remfont-size
--hcg-font-weightnormalfont-weight
--hcg-color#000000/#ffffffcolor
--hcg-text-alignlefttext-align

* System fonts: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, sans-serif.

Section prefixes

Variable PrefixApplies ToFallback
--hcg-headerHeader cellsGlobal
--hcg-cellBody cells--hcg-row
--hcg-rowRows--hcg-column
--hcg-row-evenEven rows--hcg-row
--hcg-columnColumnsGlobal
--hcg-column-evenEven columns--hcg-column
--hcg-captionCaptionGlobal
--hcg-descriptionDescriptionGlobal
--hcg-paginationPaginationGlobal

Example

.theme-custom {
    --hcg-font-family: Arial, sans-serif;
    --hcg-font-size: 14px;
    --hcg-header-font-weight: 700;
    --hcg-column-even-font-family: Georgia, serif;
    --hcg-caption-font-size: 20px;
}

Backgrounds

Globals

VariableDefault ValueValid Values
--hcg-backgroundtransparentbackground

Section Prefixes

Variable PrefixApplies ToFallback
--hcg-headerHeader cellsGlobal
--hcg-cellBody cells--hcg-row
--hcg-rowRows--hcg-column
--hcg-row-evenEven rows--hcg-row
--hcg-columnColumnsGlobal
--hcg-column-evenEven columns--hcg-column
--hcg-paginationPaginationGlobal

Example

.theme-custom {
    --hcg-background: #ffffff;
    --hcg-row-even-background: #f7f7f7;
    --hcg-header-background: #1f2937;
    --hcg-header-color: #ffffff;
}

Borders

Globals

VariableDefault ValueValid Values
--hcg-border-width0border-width
--hcg-border-stylesolidborder-style
--hcg-border-color#000000/#ffffffborder-color
--hcg-border-radius *0border-radius

* --hcg-border-radius controls the outer table radius only.

Section Prefixes

Variable PrefixApplies ToFallback
--hcg-rowBorder between rowsGlobal border
--hcg-columnBorder between columnsGlobal border
--hcg-header-rowBorders between header rows--hcg-row
--hcg-header-columnBorders between header columns--hcg-column

Example

.theme-custom {
    --hcg-border-width: 2px;
    --hcg-border-style: solid;
    --hcg-border-color: #d6d6d6;
    --hcg-border-radius: 8px;
    --hcg-column-border-width: 0;
    --hcg-row-border-width: 1px;
}

Padding

Globals

VariableFallbackDefault ValueValid Values
--hcg-padding0padding (single value)
--hcg-horizontal-padding--hcg-padding0padding (single value)
--hcg-vertical-padding--hcg-padding0padding (single value)

Section Prefixes

Variable PrefixApplies ToFallback
--hcg-headerHeader cellsGlobals
--hcg-captionCaptionGlobals
--hcg-descriptionDescriptionGlobals
--hcg-paginationPaginationGlobals

Example

.theme-custom {
    --hcg-padding: 8px;
    --hcg-header-vertical-padding: 6px;
    --hcg-pagination-padding: 12px;
}

If format or formatter are used to insert links in table cells, or caption/description, the following variables can be used to style them. Color and font weight is always inherited from the parent element.

VariableDefault ValueValid Values
--hcg-link-colorinheritcolor
--hcg-link-text-decorationunderlinetext-decoration
--hcg-link-font-weightinheritfont-weight
--hcg-link-hovered-color--hcg-link-colorcolor
--hcg-link-hovered-text-decorationnonetext-decoration

Hover colors

Globals

The following global variables are available for hover states on cells, rows, columns and column headers:

VariableDefault ValueValid Values
--hcg-colorinheritcolor
--hcg-backgroundinheritbackground

Section Prefixes

Variable PrefixApplies ToFallback
--hcg-header-hoverHeader cells--hcg-column-hover
--hcg-cell-hoverBody cells--hcg-row OR --hcg-column
--hcg-row-hoverRowsNone
--hcg-column-hoverColumnsNone
--hcg-column-hover-headerHeader cells when hovering column--hcg-column-hover

Hover Opacity

The --hcg-hover-opacity variable control blending strength of hover layers. When you use even/odd row or column backgrounds, opacity can be used if you want those stripes to remain visible in hover states. The global --hcg-hover-opacity can be overridden per section using the same hover prefixes as in Hover colors, such as --hcg-header-hover-opacity, --hcg-column-hover-opacity, and --hcg-cell-hover-opacity.

VariableDefault ValueValid Values
--hcg-hover-opacity100%opacity

Example

.theme-custom {
    --my-hover-color: red;
    --hcg-row-even-background: lightgrey;
    --hcg-cell-hover-background: var(--my-hover-color);
    --hcg-column-hover-background: var(--my-hover-color);
    --hcg-hover-opacity: 18%;
    --hcg-cell-hover-opacity: 60%;
}

In this example, hover color is set once through --my-hover-color, even rows keep their lightgrey striping through opacity blending, global hover uses 18%, and direct cell hover is strengthened to 60%.

Sync colors

When using Highcharts Grid as a component in Highcharts Dashboards, synchronization highlights cells, rows and columns. By default hover states are used for sync as well, but can be overridden by using sync section prefixes instead.

The same section-prefix, fallback, and opacity logic from Hover colors applies, using -sync- variables instead of -hover-.

.theme-custom {
    --hcg-cell-hover-background: lightred;
    --hcg-cell-sync-hover-background: red;
    --hcg-cell-sync-hover-color: white;
}

In this example hover uses a light red background, while sync uses a solid red background and white text to draw extra attention when users interacts with a synced chart on the same page.

Check our theming demo to see these concepts in practice.

Summary

  1. Define globals first (font, color, background, border, padding).
  2. Refine table sections with row/column/header/cell variables.
  3. Use hover/sync color variables together with opacity variables for interaction tuning.
  4. For other elements, use Element variables.
Edit this page