Customize Each Part

Start with the part you want to change. Data marks and axis geometry use XY's validated renderer-neutral style vocabulary. Colorbars, legends, tooltips, controls, and annotation labels are DOM chrome and also accept component or slot styles.

Marks are rendered geometry rather than DOM nodes. Use typed props for common choices, or the mark's validated style= mapping when CSS-shaped paint is clearer. Unsupported properties raise while the chart is built instead of silently disappearing in one renderer.

Use fill, fill-opacity, stroke, stroke-width, stroke-opacity, and opacity only on mark families that support them. Lines use stroke properties; areas, points, bars, and columns also support fill properties. Bar-like marks add border-radius, while line-like marks add stroke-dasharray.

Treat the x and y axes independently. Grid lines are owned by the axis they cross: the y axis draws horizontal guides and the x axis draws vertical ones. Axis baselines, tick marks, tick text, and titles are separate style properties, so hiding one never requires hiding the others.

Keep the y-axis grid and turn off the x-axis grid for a calm reporting chart. grid_color, grid_width, grid_dash, and grid_opacity style the guides; the remaining zero-width and transparent properties remove the baseline and ticks without removing the horizontal grid.

Use "solid", "dashed", "dotted", or "dashdot" for grid_dash. Setting grid_opacity=0 is the direct way to disable one direction of grid.

This column chart keeps a deliberate bottom axis. The baseline uses axis_color and axis_width; tick marks use tick_color, tick_width, and tick_length; the month text uses tick_label_color. The y axis remains visually quiet while still drawing horizontal guides.

Add label="Month" and label_color only when the axis title adds information that the surrounding heading does not already provide. tick_label_strategy controls collisions independently: use "rotate", "stagger", "hide", or "none" for dense categorical axes.

For compact dashboard charts, remove both baselines, ticks, and tick text; disable the x grid; and retain only the y grid. This is the same quiet axis treatment used by the product-ready examples, shown here with two vivid series and a compact stroke-shaped legend.

The reusable recipe is: tick_label_strategy="none", transparent axis and tick colors with zero widths on both axes, grid_opacity=0 on the x axis, and a subtle grid_color on the y axis. Keep extra top padding when a legend sits inside the plot.

Set a continuous mark's colormap= and domain= together when colors must have a stable meaning across charts. Add xy.colorbar(...) to explain that scale, then style its container, gradient, ticks, and title through the colorbar, colorbar_bar, colorbar_tick, and colorbar_title slots.

Use a legend instead when colors identify discrete categories. Built-in colorbars are available in browser, SVG, native PNG, and Chromium output; host framework components passed through render= are not part of standalone XY exports. See Colorbars for supported marks, orientation, inferred scales, and custom-component boundaries.

Configure legend content and layout with xy.legend(...). Style the component directly, or use the chart's legend, legend_item, and legend_swatch slots when one rule should cover several charts. Complete literal Tailwind utilities work through class_name / class_names when the host enables Reflex's TailwindV4Plugin.

A short, rounded swatch makes an area-series legend read like its visible stroke instead of a generic color chip. A genuinely custom host legend is ordinary Reflex UI: hide the built-in legend with xy.legend(show=False), keep the chart in state, and render the controls beside it. Host-owned UI is not included in standalone XY exports.

Tooltip fields must already be resident in a rendered data channel. Use named data columns for readable titles and formats, then style the built-in tooltip directly or through the chart's tooltip slot.

For a host-owned tooltip, set xy.tooltip(show=False), handle on_point_hover, and render ordinary framework UI from the received row. The built-in tooltip remains the right choice when it must track the pointer or survive a standalone export.

Annotation geometry is painted with the chart; annotation text is DOM chrome. Use geometry props such as color, width, and opacity, then use the annotation's style or the chart's annotation_label slot for its label.

threshold(...) and threshold_zone(...) are semantic aliases for reference lines and bands. Arrow shafts, markers, rules, and zones remain painted geometry; only their labels respond to DOM slot styles.

Crosshairs, selections, and the modebar are configured independently from data marks. Interaction colors belong in xy.theme(...); DOM pieces can also use the crosshair_x, crosshair_y, selection, modebar, and modebar_button slots.

Move across the plot to inspect the crosshair. Open the modebar selection menu, or Shift-drag, to inspect the styled selection rectangle. Framework callbacks such as on_select_end can turn the result into filters or related views.