Server — Studio — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/server/studio

Render Studio

Build server-rendered charts interactively. Every preview below is generated by renderChart() from semiotic/server — the same function you'd call from Node.js, a serverless function, or a build script.

Chart Type

Theme

Width

Height

Orientation

Show Legend

Show Grid

Title

Description (a11y)

Y-Threshold Annotation

Export

renderChart() returned 3.0KB SVG in 1.6ms

Generated code

import { renderChart } from "semiotic/server" const svg = renderChart("BarChart", { data: [ { category: "North", value: 42000, group: "Q1" }, { category: "South", value: 28000, group: "Q1" }, { category: "East", value: 35000, group: "Q1" }, { category: "West", value: 51000, group: "Q1" }, { category: "North", value: 58000, group: "Q2" }, { category: "South", value: 35000, group: "Q2" }, { category: "East", value: 41000, group: "Q2" }, { category: "West", value: 62000, group: "Q2" } ], categoryAccessor: "category", valueAccessor: "value", theme: "light", showLegend: false, showGrid: false, legendPosition: "right" })