Advanced Styling Gallery

This gallery focuses on advanced renderer and composition paths that do not belong in the product-ready examples: scalar fields, density reduction, uncertainty, explicit geometry, facets, and host-owned chrome. Start with Examples when you want a polished chart pattern to copy; use this page when you need to inspect a less common styling boundary.

A compact combo chart gives monthly production the visual weight of blue columns while an amber line keeps the cumulative signal easy to compare. The host-owned key distinguishes bar and line marks, and only quiet horizontal guides remain inside the plot.

The cursor-tooltip example below uses area; choose ecdf when the cumulative signal is a distribution rather than a month-by-month measure.

For every available component and argument, use the API reference.

heatmap supplies the filled scalar field and contour supplies its crisp isolines. The second chart shows screen-bounded hexbin geometry. These marks accept deliberately narrower paint vocabularies than DOM chrome because their color is data-driven.

This pair shows advanced geometry from error_band, errorbar, segments, stem, and triangle_mesh. A restrained dashboard palette separates each geometry without adding decorative chart chrome.

Badges exist only when the representation reports a real quality tradeoff. Enabling density while supplying per-point color produces an “aggregated channels” badge. This example styles the badge generated from that real data reduction.

facet_chart applies the same mark, axis, annotation, theme, and chart-slot styles to every panel. XY's standalone wrapper owns the grid, so wrapper layout selectors belong in export CSS.

For standalone HTML, style the grid itself at export time:

XY's built-in tooltip already follows the pointer and can be fully restyled. This example keeps that client-owned positioning while rendering an interactive host-owned legend below the chart. Reflex hover callbacks expose the resolved row rather than pointer coordinates, so a state-backed tooltip cannot follow the cursor without additional positioning data.

That pattern keeps the legend interactive while the styled built-in tooltip tracks the pointer and remains available to standalone chart exports. For a fixed chart, a simpler host-owned key can sit next to reflex_xy.chart(...), as shown in Customize Each Part.

• Keep mark paint in typed props or mark style; WebGL, SVG, and native raster can all consume that contract.
• Keep essential colors in chart tokens when the export must be self-contained.
• Pass ordinary compiled CSS with to_html(custom_css=...) for standalone DOM chrome, facets, media queries, or a portable design system.
• Tailwind class names remain in the exported markup, but Tailwind's compiled rules are not bundled automatically.
• Host-owned Reflex components and interaction state are application UI, not serializable XY chart content.
• Compare live HTML with to_svg() and both native and Chromium to_png() when exact renderer parity matters.