Skills
.Work. You
Rest

sgds-data-visualisation

Official

Create SGDS-consistent data visuals with ECharts.

Data & Analytics#theming#charts#echarts#data-visualisation#colour-palette#sgds
AuthorGovTechSG
Version1.0.0
Installs0

System Documentation

What problem does it solve?

SGDS teams need consistent data visuals across applications without manually aligning colours and chart styling. This skill provides guidance on using a trusted charting library (ECharts) and applying the SGDS colour palette to ensure brand cohesion.

Core Features & Use Cases

  • ECharts integration guidance: how to set up and initialise charts in SGDS apps with correct imports and configuration.
  • SGDS colour palette enforcement: applying the fixed colour tokens to chart series to maintain visual consistency.
  • Use Case: build a dashboard showing key metrics with a uniform theme across multiple chart types.

Quick Start

Initialise an ECharts chart and apply the SGDS colour palette to ensure visual consistency.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: sgds-data-visualisation
Download link: https://github.com/GovTechSG/sgds-web-component/archive/main.zip#sgds-data-visualisation

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 510,000+ vetted skills library on demand.