CSS Styling

yFiles for HTML provides CSS classes for specific default visual elements, allowing you to style the view using CSS stylesheets.

The default visuals can also be completely replaced with custom visuals if the provided CSS classes are not sufficient. For details, see the articles in Styling Selection, Focus, and Highlight and Resource Keys.

Default Look and Feel

The library provides a default look and feel for elements such as tooltips, the label editor input box, scrollbars, and handles. You can override or disable this default styling with custom CSS.

During the instantiation of a GraphComponent, a <style> tag containing the default look and feel is added to the DOM, if one doesn’t already exist. You can overwrite these styles with a more specific CSS selector for the respective default style.

For example, the yfiles.css file provided with the yFiles for HTML library files includes CSS rules that are more specific than the programmatically added styling. Therefore, you can copy and overwrite these rules to customize the look and feel.

The yfiles.css file included with the library is optional. If you load it explicitly, no <style> tag is added to the DOM during the instantiation of a GraphComponent.

The CSS Styling demo demonstrates how to create a dark theme for the diagram using CSS.

In addition to the styling that is added automatically, you have more options to adjust the styling of the component with CSS, as described in the following sections.

Styling of Scrollbars

The scrollbars of the GraphComponent are styled with a default look and feel, as described earlier. You can overwrite these defaults to customize the scrollbar styling.

The vertical and horizontal scrollbars both have the class yfiles-scrollbar and are further specialized with the classes yfiles-scrollbar-vertical and yfiles-scrollbar-horizontal. The key components of a scrollbar are:

• Two buttons (e.g., up and down) that have classes like .yfiles-button.yfiles-button-up.
• A scrollbar range div with the class .yfiles-scrollbar-range (and further specialized with .yfiles-scrollbar-range-vertical or .yfiles-scrollbar-range-horizontal).
• The content of the scrollbar range, which holds the slider with the class .yfiles-scrollbar-slider.

You can find all scrollbar-related CSS rules in the yfiles.css file included with the library. The CSS Styling demo provides a more detailed example of how to customize the scrollbars.

To set the width of the vertical scrollbar to 30 pixels, use the following CSS rules:

.yfiles-canvascomponent .yfiles-scrollbar.yfiles-scrollbar-vertical,
.yfiles-canvascomponent .yfiles-scrollbar.yfiles-scrollbar-vertical div,
.yfiles-canvascomponent .yfiles-scrollbar-range.yfiles-scrollbar-range-vertical .yfiles-scrollbar-slider,
.yfiles-canvascomponent .yfiles-scrollbar .yfiles-scrollbar-range.yfiles-scrollbar-range-vertical {
  width: 30px;
}

.yfiles-canvascomponent .yfiles-scrollbar .yfiles-scrollbar-range.yfiles-scrollbar-range-vertical {
  top: 30px;
  bottom: 30px;
}

.yfiles-canvascomponent .yfiles-scrollbar-vertical .yfiles-button {
  width: 30px;
  height: 30px;
}

To change the color of the slider of the vertical scrollbar to dark blue, use the following rule:

.yfiles-canvascomponent .yfiles-scrollbar-vertical .yfiles-scrollbar-slider-content {
  background-color: darkblue;
  opacity: 1;
}

Styling of Handles

The default visualizations for handles consist of two parts: the elements in the defs section of the main SVG for each handle type, which will be referred to as handle templates, and use elements that reference these handle templates. Both parts can be styled separately. Styling the handle templates in the defs section will affect all handle instances of that type. Styling a use reference will affect only that specific instance.

The default handle templates in the defs section have the CSS class yfiles-handle-template. Additionally, there are specific classes for the various HandleType values.

The use elements that reference the handle templates and act as the handles visible on the screen have the CSS class yfiles-handle. Additionally, resize handles have one or two classes for their location offset.

Changing style properties like fill or stroke that apply to all handles of a specific type should usually be done on the handle template.

// makes resize handles blue
.yfiles-handle-resize-template {
  fill: blue;
}

Using SVG currentColor, you can set different colors for individual handles.

// use currentColor for resize handles
.yfiles-handle-resize-template {
  fill: currentColor;
}
// makes all handles that use currentColor blue
.yfiles-handle {
  color: blue;
}
// makes top-right handle red
.yfiles-handle-top.yfiles-handle-right {
  color: red;
}

Styling of Port Candidates

Similar to the Styling of Handles, the default visualization for port candidates provides the yfiles-port-candidate CSS class to the use element, while the elements in the defs section have the yfiles-port-candidate-template class.

Depending on the actual port candidate, the classes yfiles-valid, yfiles-invalid, yfiles-focused, or yfiles-non-focused may be set.

The following snippet shows how to change the fill color of valid port candidates:

.yfiles-port-candidate-template.yfiles-valid {
  fill: cornflowerblue;
}

Styling of Marquee Rectangle

You can style the marquee rectangle using the yfiles-marquee-rect-template CSS class. For example, to create a gray marquee rectangle, you can use the following rules:

.yfiles-marquee-rect-template {
  fill: lightgray;
  stroke: darkgray;
}

Styling of Lasso Selection

The lasso marquee of the LassoSelectionInputMode can be styled using the yfiles-lasso-template CSS class.

Additionally, the following CSS classes are available to further customize the styling of the different lasso visualizations:

The following example shows how to style the lasso marquee gray:

.yfiles-lasso-template {
  fill: lightgray;
  stroke: darkgrey;
}

Styling of Overview Viewport Rectangle

The viewport rectangle of the OverviewInputMode uses the yfiles-overview-viewport-template CSS class, which you can use to customize the visual appearance of the SVG rect element:

.yfiles-overview-viewport-template {
  fill: lightgray;
  stroke: darkgray;
}

Styling of Table Indicators

The table provides visual indicators for several interactive gestures. (For more information, see Tables.) The indicators consist of a single SVG rect element, and the following table lists the CSS classes that are provided for these indicators:

To change all indicators to a gray color, you can use the following CSS rules:

.yfiles-stripe-highlight-template {
  stroke: #cdcdcd;
}
.yfiles-stripe-resize-template,
.yfiles-stripe-selection-template,
.yfiles-stripe-drag-template {
  stroke: #cdcdcd;
  fill: rgba(0,0,0,0.2)
}

Styling Snap References

You can style snap references by specifying one or more CSS rules.

Each snap reference visual provides the yfiles-snap-reference CSS class.

The visualization is further separated into the following snap line types, each of which provides a specific CSS class:

For example, to change the color of all snap reference types, you can use the following CSS:

.yfiles-snap-reference {
  stroke: darkgray;
}

Styling the Grid Visual

When the SVG render mode is used, the GridRenderer offers the following CSS classes to easily customize the grid’s appearance:

Styling of Selection, Focus, and Highlight Indicators

For information about styling the selection, focus, and highlight indicators, please see Using CSS Styling for the Indicators.

Styling of the Label Position Suggestions

During label dragging, the possible positions that the label model provides are visualized with a rectangular indicator. You can style this indicator with the following CSS classes:

For a blue highlight on the position, you could use the following CSS rules:

.yfiles-label-position-highlight-template,
.yfiles-label-position-candidate-template {
  stroke: #00BFFF;
  opacity: 0.5;
}

Styling of the Label Input Element

For information about styling the label input element, see CSS Transition or Animation for the Input Element.

Styling of the Tooltip Element

For information about styling the tooltip element, please see Styling of the Tooltip Element.