DOCSEARCHbyAlgolia
Submit Docs

Unovis Documentation

website·Indexed 33 days ago

https://unovis.dev

A browser-first data visualization library featuring components like Line, Treemap, Boxplot, and TopoJSONMap. Includes an MCP server for rendering charts locally in Node.js via ChartSpec JSON objects, supporting output types such as SVG, PNG, and interactive HTML.

Tokens
53.8K
Snippets
292
Records
414
Agent score
62%

What's inside Unovis

  2. Overview of the Unovis data visualization framework

    Unovis is an open-source modular data visualization framework used to create charts, maps, and network graphs. It is designed to be UI-framework agnostic, providing official support for React, Angular, Svelte, and vanilla TypeScript or JavaScript. Key features include high customizability via CSS variables and a wide range of supported visualization types including diagrams and detailed maps.

  3. Understand and manage bleed in XY Containers

    Bleed is the extra space inside an XY Container required to ensure marks (e.g., half of a scatter point's diameter or half of a bar's width) are not clipped at the edges of the domain. The XY Container automatically calculates the maximum bleed required by all its components and shrinks the scale ranges accordingly to fit the marks fully.

  4. Highlight chart areas with the Plotband component

    The Plotband component is used to create horizontal or vertical bands across chart areas to highlight specific ranges. It supports customizable colors with transparency and flexible labeling with multiple positioning options.

  5. Visualize hierarchical relationships with the Multi-Level Chord Diagram

    The Multi-Level Chord Diagram component allows for the visualization of hierarchical relationships and interactions between multiple entities. It is specifically designed to showcase data flow and connections across different levels of a system or network to illustrate the relative importance of interconnected components.

  6. Use Unovis with various UI frameworks

    Unovis is a framework-independent data visualization library built with TypeScript. It can be used without any UI framework or integrated with React, Angular, Svelte, Vue, and Solid. To optimize application bundle size, individual component modules can be imported separately.

  7. Implement multi-color items in Bullet Legends

    The Bullet Legend now supports multiple color arrays per item, allowing for more complex and sophisticated legend designs.

  8. Use the Annotations component to overlay text on visualizations

    The Annotations component allows developers to overlay customized and stylized text on top of Unovis visualizations. It is designed to integrate with any Unovis component and is typically used to highlight points of interest, annotate trends, or add text labels to charts and graphs.

  9. Create Boxplot charts in XY Container

    The Boxplot component provides box-and-whisker plots for the XY Container. It requires three grouped accessors to ensure boxes are rendered completely: median, quartiles (an array [q1, q3]), and whiskers (an array [min, max]). It supports configuration for barWidth, barMaxWidth, barPadding, roundedCorners, and dataStep for handling missing data. It is compatible with Axis, Crosshair, Tooltip, and Brush.

  10. Understand the Unovis repository file structure

    The Unovis repository is organized as a monorepo where the packages directory contains the core library, framework-specific wrappers, and supporting applications.
    packages
├── angular   # exports @unovis/angular 
├── dev       # dev demo app
├── react     # exports @unovis/react
├── shared    # shared code and integrations
├── solid     # exports @unovis/solid
├── svelte    # exports @unovis/svelte
├── ts        # core library; exports @unovis/ts
├── vue       # UI framework wrapper
├── website   # unovis.dev website

  11. Understand the Unovis ChartSpec structure

    Every chart in the Unovis package is described by a ChartSpec JSON object. This spec acts as a contract between tools (which generate the spec) and renderers (which consume it to produce SVG, PNG, or HTML).

    Key structural rules:

    • container: 'xy': Used for charts with shared, domain-synchronized scales (e.g., line, area, bars, scatter, timeline, boxplot). Supports optional xAxis and yAxis configurations.
    • container: 'single': Used for standalone components (e.g., donut, sankey, heatmap, treemap, chord, graph, map).
    • components: An array of components to render. They are drawn in array order, meaning later entries appear on top of earlier ones.
    interface ChartSpec {
  specVersion?: string                         // contract version, e.g. "0.1"
  container: 'xy' | 'single'
  width: number
  height: number
  theme: 'light' | 'dark'
  title?: string
  containerConfig?: Record<string, unknown>   // extra container options
  components: { type: string; config: Record<string, unknown> }[]
  xAxis?: Record<string, unknown>              // XY containers only
  yAxis?: Record<string, unknown>
  colors?: string[]
  locale?: string                              // BCP-47, for date/number formatting
  legend?: { name: string; color?: string; paletteIndex?: number }[]
  data: unknown
}

  12. Add reference lines with the Plotline component

    The Plotline component allows developers to draw precise reference lines across any XY component. It supports both X and Y axis orientation and offers customizable line styles (solid, dashed, dotted), colors, widths, and positioning.