# Zyplot

> High-performance, natively rendered graphs for web, iOS, and Android, designed for developers and coding agents.

One npm package renders through ECharts and uPlot in the DOM, Swift Charts on iOS and a
Jetpack Compose Canvas on Android, behind a single serializable props contract. Twenty-one
chart forms exist on all three platforms, and each native platform adds two of its own.

## Guides

- [Documentation](https://zyplot.janblazej.dev/docs): Native-feeling charts for React and Expo from one API. Twenty-one chart forms that render through ECharts and uPlot on the web, Swift Charts on iOS and Compose on Android.
- [Installation](https://zyplot.janblazej.dev/docs/installation): Install @hzblj/zyplot with npm, yarn, pnpm or bun. One package covers web, iOS and Android, ships its own compiled styles, and needs no Tailwind CSS in your app.
- [Data types](https://zyplot.janblazej.dev/docs/data-types): The serializable data contracts every Zyplot chart takes — ChartSeries, ChartDatum, axis options, number formatting, annotations and interaction events.
- [Builders](https://zyplot.janblazej.dev/docs/builders): Typed builders for the props that are easy to get wrong — annotation, axis, marker, reveal and series set the discriminant for you and return plain objects.
- [Loading states](https://zyplot.janblazej.dev/docs/loading-states): Hold isLoading while data is in flight and a Zyplot chart shows a placeholder matched to its own shape and height, then cross-fades in with no layout shift.
- [Theming](https://zyplot.janblazej.dev/docs/theming): Theme Zyplot charts with CSS custom properties. The colour, surface and palette contract every renderer implements, and how Chart.Provider scopes it.
- [Light and dark mode](https://zyplot.janblazej.dev/docs/dark-mode): How Zyplot resolves light and dark mode, why canvas colours are read off the document, and the --zyplot-* custom properties that drive both.
- [Web renderer](https://zyplot.janblazej.dev/docs/web): The DOM renderer: ECharts draws eighteen forms, uPlot handles dense series and sparklines, and legends stay real HTML that a screen reader can read.
- [Frame and legend](https://zyplot.janblazej.dev/docs/composition): Chart.Frame gives a chart a titled card with a caption row, and Chart.Legend places series identity yourself for small multiples or a legend that filters.
- [iOS and Android](https://zyplot.janblazej.dev/docs/native): Zyplot ships an Expo module that draws with Swift Charts on iOS and a Jetpack Compose Canvas on Android — the same Chart namespace, and no WebView.
- [iOS renderer](https://zyplot.janblazej.dev/docs/native/ios): Charts drawn with SwiftUI and Swift Charts. Chart.Range and Chart.Rule are iOS-only, and xAxis takes the Swift Charts scrolling options on top of the shared ones.
- [Android renderer](https://zyplot.janblazej.dev/docs/native/android): Charts drawn on a Jetpack Compose Canvas. Chart.Waterfall and Chart.Lollipop are Android-only, and the axes take Compose overflow handling on top of the shared options.
- [useChartScrub](https://zyplot.janblazej.dev/docs/hooks/use-chart-scrub): Tracks the datum being read on all three platforms, so a price, a date and a delta can be real text above the plot while the chart draws no tooltip at all.
- [useLastReading](https://zyplot.janblazej.dev/docs/hooks/use-last-reading): Finds the last reading a series actually has, and the category it sits on — where a "now" marker belongs when the axis runs past the data.
- [Revolut](https://zyplot.janblazej.dev/docs/apps/revolut): A Revolut-style quote screen built with Zyplot: a scrubbed price readout, a candlestick toggle, glow and pulse annotations, and the same screen on iOS, Android and the web.
- [Releases](https://zyplot.janblazej.dev/docs/releases): Where to find every published Zyplot version, its notes and the commits behind it.
- [Changelog](https://zyplot.janblazej.dev/docs/changelog): New updates and improvements to Zyplot, version by version.

## Charts

- [Line chart](https://zyplot.janblazej.dev/docs/charts/line): Plot continuous trends over an ordered category or time axis, with optional smoothing, annotations and a second series to compare against.
- [Area chart](https://zyplot.janblazej.dev/docs/charts/area): Show a trend and its magnitude together, stacked to read composition over time or plain to emphasise the volume under one series.
- [Bar chart](https://zyplot.janblazej.dev/docs/charts/bar): Compare exact values across a small set of categories, vertically or turned horizontal when the labels are too long to fit under an axis.
- [Stacked bar chart](https://zyplot.janblazej.dev/docs/charts/stacked-bar): Compare category totals and the composition inside each one, normalized to 100 percent when the mix matters more than the absolute total.
- [Pie chart](https://zyplot.janblazej.dev/docs/charts/pie): A part-to-whole split for two to five slices, with a folded Other tail so a long list cannot turn into a ring of unreadable slivers.
- [Gauge chart](https://zyplot.janblazej.dev/docs/charts/gauge): One current value against a fixed range — capacity, progress or utilisation where the maximum means something to the reader.
- [Meter chart](https://zyplot.janblazej.dev/docs/charts/meter): A compact accessible scalar for table rows, settings and summaries. Two elements, role="meter" and no charting engine, so its final markup is painted on the server.
- [Histogram chart](https://zyplot.janblazej.dev/docs/charts/histogram): Bin raw numeric observations to expose the shape of a distribution — its spread, its skew and the outliers at either end.
- [Boxplot chart](https://zyplot.janblazej.dev/docs/charts/boxplot): Compare five-number summaries and outliers across groups, with the median, quartile and whisker labels in your own wording.
- [Candlestick chart](https://zyplot.janblazej.dev/docs/charts/candlestick): Open, high, low and close per session with an optional volume histogram beneath, plus hollow-up candles for price data.
- [Diverging bar chart](https://zyplot.janblazej.dev/docs/charts/diverging-bar): Positive and negative values around a shared zero — variance, sentiment, gain and loss, or change from a baseline.
- [Dumbbell chart](https://zyplot.janblazej.dev/docs/charts/dumbbell): Movement between exactly two measurements per row, when the story is the change between two known states rather than the trend between them.
- [Funnel chart](https://zyplot.janblazej.dev/docs/charts/funnel): Ordered attrition through a sequence of stages, for the case where each stage really is a subset of the one before it.
- [Heatmap chart](https://zyplot.janblazej.dev/docs/charts/heatmap): Magnitude across two categorical dimensions, to expose the clusters and the patterns a dense matrix of numbers hides.
- [Radar chart](https://zyplot.janblazej.dev/docs/charts/radar): Compare multivariate profiles on a shared set of bounded axes, for reading the shape of a profile rather than looking up a value.
- [Scatter chart](https://zyplot.janblazej.dev/docs/charts/scatter): Relationships, clusters and outliers between two measures, with an optional third encoded as point size.
- [Sankey chart](https://zyplot.janblazej.dev/docs/charts/sankey): Weighted flow between named nodes and stages, for when the volume moving between states is the story.
- [Sunburst chart](https://zyplot.janblazej.dev/docs/charts/sunburst): Hierarchical part-to-whole relationships in concentric rings, for when both the depth of the hierarchy and the split inside it matter.
- [Treemap chart](https://zyplot.janblazej.dev/docs/charts/treemap): Hierarchical part-to-whole data packed into a rectangle, for when screen efficiency matters more than reading the depth.
- [Time series chart](https://zyplot.janblazej.dev/docs/charts/time-series): Tens of thousands of ordered time points, rendered through uPlot for dense telemetry that would drop frames on a scene graph.
- [Sparkline chart](https://zyplot.janblazej.dev/docs/charts/sparkline): A tiny trend shape with no axes, tooltip or legend, for a table row or a card where the chart is context rather than the subject.

## Optional

- [llms-full.txt](https://zyplot.janblazej.dev/llms-full.txt): the whole documentation as one file
- [Repository](https://github.com/hzblj/zyplot): source, issues and releases