skills.rest
HiokKuek
HiokKuekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sgds-data-visualisation

Configures Apache ECharts with the SGDS colour palette for charts in SGDS applications.

Updated Sep 5, 2026
Search Tags:#charts#frontend#dashboard#echarts#data visualisation#colour palette#sgds
One-click install
npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-data-visualisation-hiokkuek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sgds-data-visualisation
Source: https://github.com/HiokKuek/hdb_pricing/tree/main/.agents/skills/sgds-data-visualisation
Command: npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-data-visualisation-hiokkuek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires echarts.

What problem does it solve? SGDS does not bundle a charting library, so developers building data visualisations in SGDS applications must choose and configure a charting tool themselves while keeping colours consistent with the design system. ## Core Features & Use Cases - ECharts Integration Guidance: Explains that Apache ECharts must be installed separately via npm and initialised independently of @govtechsg/sgds-web-component. - SGDS Colour Palette: Provides the five fixed hex values from SGDS data-visualisation primitive tokens (purple, cyan, green, blue, yellow) for use in chart colour arrays. - Per-Chart and Global Theming: Shows how to set the palette in a single chart option or register a global ECharts theme reused across all charts on a page. - Use Case: When building a dashboard in an SGDS application, apply the SGDS palette to an ECharts bar or line chart so the visualisation matches the rest of the design system. ## Quick Start Ask the AI to set up an ECharts chart in your SGDS app using the official SGDS colour palette.

Frequently Asked Questions about sgds-data-visualisation

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

FAQPage Schema
How do I add charts to an SGDS application?▼

SGDS does not bundle a charting library, so install Apache ECharts separately with npm install echarts, then initialise it with echarts.init and set your chart option. Apply the SGDS palette through the color array in the option.

What charting library should I use with SGDS?▼

The recommended approach is Apache ECharts, installed independently from @govtechsg/sgds-web-component. You then apply the SGDS data-visualisation colour palette so charts stay visually consistent with the design system.

Can I use CSS variables in the ECharts color array?▼

No, ECharts does not resolve CSS custom properties inside the color array. You must use the raw hex values of the SGDS primitive tokens, such as #ac1cdb for purple and #00758d for cyan.

How do I apply the SGDS palette to multiple charts?▼

Register a named theme once at app startup using echarts.registerTheme with the five SGDS hex colours, then pass the theme name when initialising each chart. For a single chart, set the color array directly in its option.

What colours are in the SGDS data visualisation palette?▼

The palette contains five fixed hex values from SGDS primitive tokens: purple #ac1cdb, cyan #00758d, green #0e7c3d, blue #0269d0, and yellow #7e6917. ECharts cycles through them sequentially across series.

Related Skills

Explore More Software Engineering Skills→
GovTechSGGovTechSG
18

sgds-data-visualisation

Implement SGDS-aligned ECharts data visualisations with the SGDS colour palette.

Official
Intermediate
GovTechSGGovTechSG
18

sgds-patterns

Catalog reusable SGDS typography patterns with raw HTML templates.

Official
Intermediate
tddworkstddworks
1.4k

implement-feature

Implement ClaudeBar features with architecture-first design, TDD, and Swift 6.2 patterns.

Official
Advanced
githubgithub
38.5k

java-junit

Write JUnit 5 unit tests with parameterized and data-driven testing patterns.

Official
Basic