CSS Styling

CSS Styling

🎨 CSS Styling with card_mod

For users who want to go beyond the built-in styling options, the card exposes a rich set of CSS class names that can be targeted with card-mod. This is useful for theme integration, per-card overrides, or visual tweaks that aren't available as configuration options (e.g. animated transitions, custom shadows, gradient backgrounds, repeating-pattern overlays).

Reliability note (v3.32): card-mod styles used to disappear on a page reload (F5) or app restart and only come back after re-saving the card — a race between card-mod's style injection and the card's first build (#268). Fixed: injected styles now survive the card's initial build and every later re-render. If you style the same property both ways — e.g. card_background_color: in the config and an ha-card { background: ... } in card-mod — the built-in option wins, because it is applied as an inline style; pick one, or add !important to the card-mod rule.

Setup

Install card-mod from HACS first. Then add a card_mod: block to any card config:

type: custom:statistics-graph-chart-card
entities:
  - entity: sensor.power
card_mod:
  style: |
    .sgc-plot {
      background: rgba(0, 0, 0, 0.1);
    }

CSS class reference

Class	Where it appears	What it covers
Container
.sgc-card	Root	Outermost card wrapper. Most card-mod overrides target this.
.sgc-header	Top of card	Title + icon + battery row.
.sgc-title	Header	Title text element (wrapped in .sgc-title-wrap, which also carries .pos-left / .pos-center / .pos-right).
.sgc-header-icon	Header	MDI / image icon next to the title.
.sgc-battery-icon	Header	Battery indicator.
.sgc-state-rows	Above/below graph	Wrapper for all state rows.
.sgc-state-row	Per entity	One row with name + value + dot.
.sgc-state-color	Per entity	The colored dot.
.sgc-state-name	Per entity	Entity name text.
.sgc-state-value	Per entity	Primary value text.
.sgc-state-unit	Per entity	Unit suffix.
.sgc-state-icon	Per entity	MDI icon in the state row.
.sgc-state-second	Per entity	Secondary value next to primary.
.sgc-state-timestamp	Per entity	Timestamp suffix for record values.
.sgc-state-range	Per entity	(min → max) suffix.
Graph area
.sgc-plot	Chart container	The SVG/canvas plot region. Target this for chart backgrounds.
.sgc-plot-wrap	Outer wrapper	Wraps .sgc-plot and handles scrolling.
.sgc-svg	Main SVG	All vector chart elements live here.
.sgc-x-axis / .sgc-y-axis	Axes	Axis <g> groups. Both the primary and the secondary (right) Y axis use .sgc-y-axis — there is no separate y2 class; the sticky secondary group additionally gets .sgc-y-axis-sticky.
.sgc-axis-label / .sgc-axis-tick	Axes	Individual tick labels and tick marks; further qualified by .sgc-x-label / .sgc-y-label and .sgc-x-tick / .sgc-y-tick (date labels also get .sgc-x-date-label).
.sgc-grid	Grid lines	The <g> wrapping all grid lines. To style the lines themselves target .sgc-grid-line, or .sgc-y-grid-line / .sgc-x-grid-line for one direction only.
.sgc-now-line	Now indicator	Vertical "now" line.
Tooltip
.sgc-tooltip	Hover tooltip	The floating box that follows the cursor (Timeline / Scatter).
.sgc-pie-tooltip	Hover tooltip	Tooltip for Pie / Ranking / Radial Bar / Polar Area / Radar / Heatmap / Calendar.
.sgc-tt-time	Tooltip header	Timestamp at the top of the tooltip.
.sgc-tt-row	Tooltip row	One row inside the tooltip.
.sgc-tt-name / .sgc-tt-val / .sgc-tt-swatch	Tooltip cells	Name, value, color swatch in the tooltip.
.sgc-pie-tt-row / .sgc-pie-tt-dot / .sgc-pie-tt-name / .sgc-pie-tt-val	Pie tooltip	Same parts for the canvas-chart tooltip.
Legend
.sgc-legend	Compact legend	Inline color-key under the graph (inside .sgc-legend-wrap).
.sgc-legend-item	Per entry	One legend item (swatch + name).
.sgc-legend-swatch	Per entry	The colored swatch.
.sgc-legend-stats	Per entry	The stats text next to a legend name — the legend_stats values, including the new live chip.
.sgc-detail-legend	Detail legend	Grid container for the per-entity stats legend (inside .sgc-detail-legend-wrap).
.sgc-detail-legend-entity	Detail legend	One entity block in the per-entity stats legend; gets .legend-hidden when the series is toggled off. Its parts are .sgc-detail-legend-name, .sgc-detail-legend-stats and .sgc-detail-stat-label.
Mode-specific
.sgc-stl-cell	State Timeline	One state segment in the timeline. Round corners, color, or per-state styling go here.
.sgc-ann-label	Annotations	Every annotation caption, further qualified by .sgc-ann-threshold-label, .sgc-ann-band-label, .sgc-ann-span-label, .sgc-ann-event-label. Useful because in v3.32 label opacity is derived proportionally from the annotation's opacity — target these classes (or use label_opacity) to override it.
.sgc-ann-threshold / .sgc-ann-band / .sgc-ann-span / .sgc-ann-event	Annotations	The annotation shapes themselves, drawn into .sgc-annotations-bg / .sgc-annotations-fg.
.sgc-extrema	Min/Max labels	The <g> holding all floating Min/Max value labels on bars / data points.
.sgc-dp-wrap / .sgc-dp-bar	Date picker bar	.sgc-dp-wrap is the slot in the card; .sgc-dp-bar is the bar itself (variants .dp-centered, .dp-center-stacked). Inner parts include .sgc-dp-nav, .sgc-dp-label, .sgc-dp-modes, .sgc-dp-preset, .sgc-dp-panel.
.sgc-ip-wrap / .sgc-ip / .sgc-ip-btn	Interval picker	.sgc-ip-wrap is the slot, .sgc-ip the row (with .align-left / .align-center / .align-right), .sgc-ip-btn each quick-select button (.active on the selected one).

Example: Tooltip with a different background than the card

If the card has a transparent background but you want a solid tooltip:

card_mod:
  style: |
    .sgc-card {
      background: transparent;
      box-shadow: none;
    }
    .sgc-tooltip,
    .sgc-pie-tooltip {
      background: rgba(20, 20, 20, 0.95) !important;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
    }
    .sgc-tt-time,
    .sgc-pie-tt-row .sgc-pie-tt-name:first-child {
      color: #4A90D9;
      font-weight: 600;
    }

Example: Vertical dashed-bar background (Unifi-style)

Paint a repeating gradient pattern behind the chart:

card_mod:
  style: |
    .sgc-plot {
      background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.08) 0px,
        rgba(255, 255, 255, 0.08) 2px,
        transparent 2px,
        transparent 7px
      );
    }

Tweak the stripe width (the 2px value) and spacing (the 7px value) to taste.

Example: Pulse animation on a record-tracking state row

card_mod:
  style: |
    @keyframes sgc-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
    .sgc-state-color {
      animation: sgc-pulse 2s ease-in-out infinite;
    }

Example: Theme-aware accent for the header

card_mod:
  style: |
    .sgc-title {
      background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

Notes

• All classes are stable across releases, but new ones may be added — existing ones won't be renamed without a version bump in the release notes.
• Shadow DOM: card-mod handles it transparently, but if you're using raw CSS without card-mod, you'll need to inject into the right shadow root.
• The !important flag is often needed when overriding tooltip / popup styles since the card sets them inline.