Visual Editor

Visual editor

Every option can be set without touching YAML. The editor is built from Home Assistant's own pickers and fields, so it looks like the rest of the dashboard editor, and it never drops an option it does not show: whatever you write in YAML is still there after you change something in the editor.

Open it from Add card → Chartdeck, or from the edit button on an existing card. The title is at the top, then the sections: Entities, Style, Chart (chart styles only), Limits, Colours, Display and Actions. Open one by clicking its header; Show code editor at the bottom switches to YAML and back.

What each section is set to (v2.3.0+)

A closed section says what it holds under its name, so you can check a card without opening anything:

• Entities: how many entities (3 entities), with plus matches when entities that match are added too, or No entities yet.
• Style: the style in use.
• Limits: the range and the target, such as 0 to 100 · target 80. A limit taken from an entity shows the entity's id.
• Colours: the band preset (Battery (low is bad)), the number of bands when they are your own (3 bands), or No bands.

A new card with no entities opens on the Entities section.

Entities

The list of entities the card shows. Use the picker at the bottom to add one, the arrows to reorder, the bin to remove, and the chevron on the right of a row to open that entity's options. Each button names its row for screen readers ("Remove entity: Kitchen battery").

Opened, a row shows Attribute (instead of the state), Name, Unit, Decimals, Icon, Minimum, Maximum, Target, its own Colours and its own three actions; chart styles add the style's own per-series options, and history charts add Only show this series while…. Anything set here overrides the card-wide setting for that entity only; anything left empty uses the card-wide setting. See Options.

On a bar or gauge style, an entity whose state is not a number (a door that reads on, the sun that reads below_horizon) is flagged under its row (v2.3.0+): the style can't draw it. Pick a sensor that reports a number, or read a number from one of its attributes with Attribute (instead of the state). An entity that is only unavailable or unknown for now is not flagged. Chart styles that draw states, such as the state timeline, never flag.

Below the list, Also show every entity that matches and Leave out add entities by area, floor, label, domain or device class. See Options.

Style

A picture button for each style, in groups: Bars, Gauges, History charts, Parts of a total, Comparisons and Distributions. The highlighted one is in use. Bar is the default, so choosing it removes the style line from the YAML. See Styles.

Since v2.3.0:

• What it's for. The line above the buttons names the chosen style and what it is good for ("Treemap · Power use by floor and room, as boxes sized by share"). Hover over any button to read the same for that style.
• When a change turns something off, it says so. group_by means times (hour, day…) on history charts and places (floor, area…) on the treemap, sunburst, icicle, radar and Marimekko. Moving between the two kinds drops a grouping the new style can't read, and a notice names it: "Grouping by Day was turned off: Treemap can't group that way." Picking the battery grid sorts emptiest first when no sort is set, and says that too.
• Keyboard. The buttons are one group with a single Tab stop. The arrow keys, Home and End move between styles (left and right swap in right-to-left languages); Enter, Space or a click picks one. Screen readers hear each group's name and what each style is for.

The ring, arc and needle add their own options under the buttons: angles, centre text and scale numbers. See Ring, Arc and Needle.

Chart

Only chart styles have this section: the style's own options. Each chart's page lists them.

Since v2.3.0 a long list of options folds into sections, the first one open:

• Time span and readings: the period, where readings come from, grouping and comparing with earlier spans.
• Look: line shape, colours, dots, value labels and the style's own drawing options.
• Axes and gridlines: axis lines, labels, gridlines, the value range, the scale and the tooltip.
• Markers and extras: zoom, forecasts, shaded bands, the now line, highest and lowest marks and unusual readings.
• Layout and sharing: where names go, compact spacing, tapping names to hide series, sync groups and small multiples.

A chart with only a few options, or with options of one kind, keeps them in one list. The annotations and Only show the series while… sit under the sections.

Instructions that used to sit in brackets after a label now sit under the field as helper text: "Zoom and pan", with "Pinch, Ctrl + scroll, or drag." underneath.

Limits

Minimum, Maximum and Target. Each has a drop-down:

• Default uses 0 for Minimum, 100 for Maximum and no marker for Target. It takes the whole line, as there is nothing else to enter.
• Number shows a number field.
• Entity shows an entity picker, and the card follows that entity's state.

A minimum at or above the maximum leaves nothing to fill, and the card shows an error. Since v2.3.0 the section says so in plain words above the fields: "The minimum (50) isn't below the maximum (20), so nothing can fill." A limit taken from an entity is only known when the card draws, so it isn't checked here.

Colours

Colour icons to match their band, then a Preset drop-down (Battery (low is bad), Usage (high is bad), Temperature, None), then one row per band with From, Colour, an optional Label and Icon. Add band adds a row. Choosing Custom… as the colour reveals a CSS colour field, filled in with the current colour; the band changes only when you type a new one. The link button switches From to an entity. Editing a band by hand switches the preset to Custom. See Colour bands.

The card sorts bands by where they start, so their order in the list doesn't matter. Two bands that start at the same value do: only one of them can show, and since v2.3.0 a warning under the bands says so.

On a narrow screen (a phone, or a narrow dialog) each band's start keeps its buttons on the first line and the colour, label and icon each get a line of their own.

Display

• Show name, Show value, Show icon, Show target, Show legend and Animate switches, one per row. Click the switch or its label. Chart styles add the Export menu switch.
• Columns: the most entities side by side; a narrow card uses fewer.
• Sort: As listed, Lowest first or Highest first.
• Decimals (0–20) and Unit: for every entity that does not set its own.

Actions

Tap action, Hold action and Double tap action, using Home Assistant's own action picker. Defaults are more-info, none and none.

Languages

The editor follows the language in your Home Assistant profile. Since v2.3.0 it speaks English, Arabic, Bengali, Chinese (Simplified and Traditional), Dutch, French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Urdu and Vietnamese. In Arabic and Urdu it reads right to left.

YAML and the editor always agree

Anything you set in the editor appears in the YAML, and the other way round. Settings that equal their default (for example animate: true) are left out of the YAML rather than written, so the code stays short. Keys the editor does not know about are kept untouched.

The full list of keys is on Options.