skills.rest
Luqman-Ud-Din
Luqman-Ud-DinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-detect-ux-chart-render

Detect chart containers with axes or legends but no data marks.

Updated May 22, 2026
Search Tags:#recharts#apexcharts#empty state#chart rendering#dashboard qa#tooltip testing#visual defects
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-ux-chart-render
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-ux-chart-render
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-ux-chart-render
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-ux-chart-render

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill detects chart-rendering failures where the visualization shell appears on the page but the actual data never renders, preventing empty dashboards and misleading analytics screens from reaching users.

Core Features & Use Cases

  • Empty chart detection: Flags charts that show axes, gridlines, or legends but no bars, lines, points, or other data marks.
  • Orphan tooltip detection: Finds tooltips that remain visible without an active data point beneath them.
  • Blank plot diagnosis: Identifies axis labels and legend entries that suggest data should be present even though the plot area is empty.
  • Use Case: A product dashboard opens with chart scaffolding and labels, but no series render; this Skill surfaces the issue before release.

Quick Start

Ask the agent to scan the current page for charts that render scaffolding without visible data marks and report any orphan tooltips or blank plot areas.

Frequently Asked Questions about qa-detect-ux-chart-render

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

FAQPage Schema
How do I detect empty chart rendering where axes and legends appear but data marks are missing?▼

Empty chart rendering is detected by inspecting the DOM for chart scaffolding elements like axes and gridlines while verifying the absence of actual data marks such as bars, lines, or points.

Why does my dashboard show chart scaffolding but no data series render?▼

Charts display scaffolding without data series when rendering fails to populate visual marks; DOM inspection identifies blank plot areas where axis labels suggest data should appear.

Does empty chart detection work with Recharts, ApexCharts, ECharts, and Highcharts?▼

Empty chart detection applies to SVG and component-based chart libraries including Recharts, ApexCharts, ECharts, Highcharts, and Chart.js by inspecting their rendered DOM scaffolding.

How do I find orphan tooltips that stay visible without an active data point?▼

Orphan tooltips are found by checking tooltip-marker consistency, identifying tooltips that remain visible in the DOM when no active data point or marker exists beneath them.

What is the best way to QA dashboard pages for blank plot areas before release?▼

The best way to QA dashboard pages is scanning for charts that render scaffolding without visible data marks, reporting blank plot areas and orphan tooltips before release.

Can chart rendering defects be detected on analytics pages using component-based libraries?▼

Chart rendering defects can be detected on analytics and reporting pages using component-based libraries by inspecting DOM chart scaffolding, data mark presence, and tooltip-marker consistency.

Related Skills

Explore More Design & Creative Skills→
alongor666alongor666
1

vue-component-dev

Develop Vue 3 components with Pinia stores and ECharts charts.

Community
Intermediate
kagentikagenti
292

helm:debug

Render Helm templates and inspect values, releases, and hook jobs.

Official
Intermediate
Rachit246-artRachit246-art

charts

Generate React data visualizations with Recharts chart components.

Community
Intermediate
bacchus-labsbacchus-labs
4

visual-regression-testing

Automate visual regression testing by comparing screenshots against baselines.

Official
Advanced