Skills
.Work. You
Rest

openchart

Community

Generate clean data-driven charts from specs.

Data & Analytics#data visualization#data formatting#sankey#openchart#vizspec#chart encoding#chart chrome
AuthorCozythecoder
Version1.0.0
Installs0

System Documentation

What problem does it solve?

OpenChart turns raw data into validated, renderable visualization specifications so you can focus on storytelling and design decisions instead of fiddling with chart configuration.

Core Features & Use Cases

  • Chart and table generation: Produce line, bar, area, arc (pie/donut), point (scatter), circle (bubbles), table, graph, and sankey VizSpec outputs from your data.
  • Editorial “chrome” guidance: Add title, subtitle, and source attribution to make charts publication-ready and trustworthy.
  • Chart-type decision support: Choose the right mark based on whether your x-axis is temporal, whether variables are categorical or quantitative, and whether you need rankings, distributions, correlations, or flow diagrams.
  • Data sizing and formatting guardrails: Recommend granularity and row limits and ensure axes use correct formats for dates, currency, and percentages.

Quick Start

Use the OpenChart skill to write a VizSpec JSON object for your dataset, then render it using the OpenChart components by loading the required CSS stylesheet.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: openchart
Download link: https://github.com/Cozythecoder/frontend-design-md/archive/main.zip#openchart

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.