sgds-data-visualisation

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

18|10|Updated Aug 30, 2022
One-click install
npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-data-visualisation
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sgds-data-visualisation
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/skills/sgds-data-visualisation
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-data-visualisation

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about sgds-data-visualisation

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

FAQPage Schema
How do I apply the SGDS colour palette to ECharts in my dashboard?

To apply the SGDS colour palette to ECharts, you map the fixed SGDS colour tokens directly to your chart series during the configuration step. This ensures brand cohesion and consistent data visualisations across dashboards.

What is the best way to maintain consistent chart theming across an SGDS application?

Maintaining consistent chart theming involves enforcing a fixed colour palette and reusing standard theming guidelines across all charts. This approach replaces manual colour alignment and guarantees uniform styling for data stories.

How do I set up and initialise ECharts within an SGDS application?

Setting up ECharts in an SGDS application requires correct package imports and chart initialisation configuration. Following integration guidance ensures your charts render properly and are ready for SGDS theming.

Can I use this approach for multiple chart types in a single dashboard?

Yes, you can build a dashboard showing key metrics with a uniform theme across multiple chart types. The SGDS theming guidance applies broadly to various ECharts visualisations to maintain visual consistency.

Do I need to manually align colours when creating data visuals for SGDS?

No, you do not need to manually align colours when creating data visuals for SGDS. By using the fixed SGDS colour tokens with ECharts, the styling is enforced automatically to ensure brand cohesion.