Cartesian
Trends and categories
Line, area, range, stacked, time series, column, bar, scatter, bubble, and waterfall all share the same x/y axis primitives, group/stack containers, and tooltip pipeline.
PrimeUI
Charts.
A unified chart system for Vue. SVG and Canvas rendering from the same compound API, axes, legends, tooltips, animation, decimation, real-time updates, and fully replaceable surfaces in one package.
Browse 14 product-grade chart scenarios across SVG and Canvas. Each tab uses the same compound API for axes, legends, tooltips, hover, zoom, drilldown, live updates, and renderer-specific theming.
Types
Every chart family from one component tree.
Start with cartesian series for trends and categories, polar shapes for share and ratios, density grids for matrices, or financial primitives for OHLC. The component changes, but the same data, axes, hover, tooltip, and animation contracts keep working.
Radial
Share, ratio, direction
Pie, donut, gauge, nightingale, radar, and polar share segment, ring, and radial axis primitives with consistent hover, drilldown, and label collision logic.
Density
Matrices and hierarchy
Heatmap renders ordered or numeric category grids with continuous color scales. Treemap renders nested rectangles with drilldown, slice-dice, and squarify layout algorithms.
Financial
Candlestick, OHLC, and combos
Candlestick, hollow, and OHLC bars share the same time-series machinery as line and area. Combo and synced charts compose multiple types with a shared scale.
Configuration
The cross-cutting layer every chart inherits.
Title, axes, legends, and data labels are explicit parts you add to any chart. They share the same theming tokens, formatters, and slot contracts, so configuration learned in one chart family transfers to all of them.
Title & Caption
Header, subtitle, footer
Chart.Title places a header and subtitle. Chart.Caption places a footer with attribution or notes. Both accept slot content and align with the chart frame.
Axes
Category, linear, time
Chart.XAxis and Chart.YAxis configure scales, tick formatting, label rotation, grid lines, and dual axes. Time axes auto-adapt to the visible range.
Legend
Series, toggle, drill
Chart.Legend lists series with swatches, click-to-toggle, drilldown breadcrumbs, and custom slots. Chart.ColorLegend renders continuous color scales for heatmaps.
Data Labels
Values on the marks
Chart.DataLabels places per-point or per-segment values with formatters, anchors, collision avoidance, and render-prop fallback for custom labels.
Interactions
Hover, zoom, annotate without re-wiring.
Interactions are explicit parts you compose. Add hover effects, range selection, navigator brushes, or annotations with a tag, and the chart picks up the behavior alongside its scales, axes, and animation pipeline.
Hover & Tooltip
Snap, peer, follow
Chart.Hover highlights the nearest mark, dims peers, and fires events. Chart.Tooltip renders a synced or follow-cursor card with custom slot content, formatters, and item layout.
Zoom & Pan
Drag, wheel, pinch
Chart.Zoom enables drag-to-zoom on the plot area, wheel zoom, pinch on touch, and double-click reset. Locked axes, modifier keys, and constrained ranges are first-class options.
Navigator
Window onto the whole series
Chart.Navigator pairs the main chart with a context strip and a draggable window. Resize handles, sync between charts, and live decimation keep large ranges responsive.
Annotations
Markers, thresholds, bands
Chart.Annotation marks events with labels. Chart.ReferenceLine and Chart.ReferenceBand draw thresholds and ranges on any axis. All three layer cleanly with hover and tooltip.
Customization
Compose charts like product UI.
Charts are built from explicit parts. Start with PrimeOne UI pieces, then replace only the title, legend, tooltip body, label, slice, bar, or axis tick that your product needs. The compound API stays readable.
Compound API
Explicit structure
Use Chart.Canvas or Chart.Svg as root, then declare Chart.Line, Chart.Bar, Chart.XAxis, Chart.Legend, Chart.Tooltip, Chart.Annotation, and child parts directly in your template.
Slots & Render Props
Replace any surface
Every label, tooltip item, legend swatch, axis tick, slice, and bar accepts a slot or render function with full context, so custom UI keeps the chart's layout and interactions.
Theming
Tokens, palettes, dark mode
ChartTheme tokens control axis, gridline, tooltip, palette, and legend colors. Switch tokens at runtime; canvas redraws, SVG re-styles. Light and dark presets ship by default.
Data Attributes
Stable styling hooks
Public data-slot, data-series, data-state, and data-renderer attributes let teams theme or test charts without depending on private DOM structure or generated class names.
International & Accessibility
Locale, RTL, and a11y are first-class.
Charts are not a numbers-only surface. Locale, calendar-aware time axes, RTL flow, keyboard navigation, and screen reader contracts apply to every chart family without custom plumbing.
Locale
Numbers, dates, currency
Axis labels, tooltips, legend values, and data labels render through Intl.NumberFormat and Intl.DateTimeFormat with locale, currency, unit, and digit grouping options.
RTL
Right-to-left layout
RTL flips axes, tooltip placement, legend order, and zoom direction. Right-anchored Y axes, mirrored scrubbing, and Arabic/Hebrew numerals follow the document direction.
Accessibility
Keyboard, ARIA, descriptions
Chart.Accessibility provides keyboard navigation between marks, focusable series, ARIA live updates, and slot-driven point descriptions for screen readers.
Rendering & Performance
Built for product-scale charts.
Charts ship with two renderers from one API, automatic decimation, bounded layout, lifecycle animation, and built-in export. The renderer is a swap, not a rewrite, when scale or fidelity needs change.
SVG & Canvas
Same API, two renderers
Chart.Svg keeps DOM nodes for crisp print, accessibility, and CSS theming. Chart.Canvas draws to a single canvas for large datasets and real-time updates. The child API is identical.
Decimation
Downsample without losing shape
Chart.Decimation runs LTTB, min-max, or aggregate algorithms over 100K+ points and keeps the visual envelope. Real-time streams drop frames, not signal.
Animation
Lifecycle and easing
Mount, update, and exit animations follow the same easing primitives. Per-renderer property animation keeps the canvas frame rate stable while SVG stays declarative.
Export
PNG, JPEG, SVG, PDF, print
Chart.ExportMenu serializes the current chart to PNG, JPEG, SVG, or PDF. Canvas re-renders to raster at 2× for retina, SVG inlines styles, and PDF embeds a JPEG with zero dependencies. Transparent variants ship for PNG and SVG.
Ready to build your charts?
Install the Vue package, import the chart styles and PrimeOne UI parts, then assemble the chart families and configuration your product needs.