Examples

Explore polished chart treatments built for real product interfaces. Each responsive preview includes the complete Python needed to recreate it. Switch to Code for the implementation; examples with more than 10 lines of hardcoded inputs add a separate Data tab. Compare the patterns, or recolor the live playground with a preset or your own three brand colors. Jump to the palette playground →

Each preview displays a compact legend above the plot. The copied chart uses xy.legend(show=False) so it does not render a second legend; replace it with xy.legend(...) when the legend should be part of your application or export.

Use a soft violet gradient to keep the trend readable while letting the area carry the full visual weight.

Compare two monthly production signals with vivid blue and emerald strokes and independent fades that preserve both series when they overlap.

Stacked columns make the total easy to compare while retaining the contribution of each product tier. Only the exposed top of each stack is rounded.

A 100% stacked area emphasizes how the mix changes over time independently of the total volume. The shared boundary makes the handoff between channels easy to follow, while the tooltip reports the actual Desktop and Mobile shares.

Compare demand for each product across six regions without hiding the individual series inside a stack. Even with axis text removed, each hovered bar reports its product and region together.

The clean plot omits category-axis text, so each stage keeps a distinct categorical color and the hover tooltip reports the full stage name and completion value.

Diverging columns preserve one shared zero baseline, so gains and pullbacks are immediately comparable without introducing a warning-red color.

Combine columns and a line on one shared production scale when two related signals need different visual emphasis. Blue bars, an amber line, a compact legend, and horizontal guides keep the two measures visually distinct; the tooltip keeps the two named measures distinct.

Compare product adoption and retention without turning the chart into a table. Bubble size signals account reach, while six categorical colors keep product segments distinct in the custom legend and hover readout.

Lollipop stems make release cadence easy to scan without adding another bar chart. Violet tracks the stable channel and cyan highlights the faster preview channel, with release names and deploy counts available on hover.

Choose a preset or edit the Primary, Secondary, and Accent colors to recolor a responsive grid of area and bar charts in real time. Manual edits switch the palette to Custom; Reset restores Berry. Copy any card when the palette and chart treatment fit your product—the generated code uses xy.theme(palette=...) where a chart-wide series cycle is the clearest fit.

These examples use the same public composition model as the rest of XY. Start from the closest pattern, replace the data, then tune the mark colors, axes, tooltip, and theme. For the full option surface, continue to Line, Bar, or the broader Styling Gallery.