skills.rest
Cozythecoder
CozythecoderCOMMUNITY
Explore all skills by this author →
GitHub

openchart

Generate OpenChart VizSpec JSON objects for charts, tables, and flow diagrams.

4|Updated Apr 9, 2026
Search Tags:#data visualization#data formatting#sankey#openchart#vizspec#chart encoding#chart chrome
One-click install
npx skills add https://github.com/Cozythecoder/frontend-design-md --skill openchart
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: openchart
Source: https://github.com/Cozythecoder/frontend-design-md/tree/main/plugins/openchart/skills/openchart
Command: npx skills add https://github.com/Cozythecoder/frontend-design-md --skill openchart

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about openchart

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a chart from raw data without manually configuring visualization options?▼

To generate a data visualization without manual configuration, you can create a validated VizSpec JSON object that compiles and renders charts and tables directly from your provided dataset. This approach handles mark types and encoding mappings automatically.

What is the best way to choose the correct chart type for time series and categorical data?▼

Choosing the correct chart type for time series and categorical data requires selecting the right mark based on whether your x-axis is temporal and whether variables are categorical or quantitative. Chart-type decision support evaluates rankings, distributions, and correlations.

How do I add titles and source attribution to make my charts publication-ready?▼

To add titles and source attribution to make charts publication-ready, you define the editorial chrome within your chart specification. This process ensures your visualizations include proper titles, subtitles, and source attributions for trustworthiness.

Does this chart generation approach support sankey diagrams and scatter plots?▼

Yes, this chart generation approach supports sankey diagrams and scatter plots. It produces VizSpec outputs for graph and flow relationship views, point scatter plots, line, bar, area, arc, circle, and table visualizations.

What are the limitations when formatting axes for dates, currency, and percentages in data visualizations?▼

Limitations when formatting axes for dates, currency, and percentages involve maintaining data sizing and formatting guardrails. You must ensure axes use correct formats and adhere to recommended granularity and row limits to render properly.

Related Skills

Explore More Data & Analytics Skills→
hung-phanhung-phan
1

feature-engineering

Transform raw datasets into machine learning features with scaling, encoding, and vectorization.

Community
Advanced
Tnemo65Tnemo65

academic-plotting

Generate publication-ready ML figures via Gemini diagrams and matplotlib/seaborn charts.

Community
Advanced
skeduloDevelopersskeduloDevelopers
2

page-builder-column-templates

Correct Skedulo Page Builder list column templates using Nunjucks HTML rendering.

Official
Intermediate
jagreehaljagreehal
3

data-visualization

Select chart types and encoding strategies for perceptual accuracy and accessibility.

Community
Basic