Back to Skills

echarts-1-use-responsive-design

vamseeachanta
Updated 2 days ago
3 views
3
2
3
View on GitHub
Otherdesigndata

About

This skill provides responsive design techniques for ECharts visualizations, enabling charts to automatically resize with window changes. It includes methods for setting explicit dimensions, implementing loading states during data fetching, and handling empty data scenarios. Developers should use this to create adaptive, user-friendly charts that maintain functionality across different screen sizes.

Quick Install

Claude Code

Recommended
Primary
npx skills add vamseeachanta/workspace-hub -a claude-code
Plugin CommandAlternative
/plugin add https://github.com/vamseeachanta/workspace-hub
Git CloneAlternative
git clone https://github.com/vamseeachanta/workspace-hub.git ~/.claude/skills/echarts-1-use-responsive-design

Copy and paste this command in Claude Code to install this skill

GitHub Repository

vamseeachanta/workspace-hub
Path: .claude/skills/data/visualization/echarts/1-use-responsive-design
0

Related Skills

d3js

Other

This skill enables developers to create fully customized, interactive data visualizations using D3.js, offering complete control over SVG elements and data binding. It's ideal for building unique, complex charts with sophisticated transitions and interactions that standard libraries can't achieve. Use it when you need bespoke, data-driven visualizations rather than simple, pre-styled charts.

View skill

plotly-with-pandas

Other

This skill provides Plotly integration with Pandas for streamlined data visualization from DataFrames. It enables direct plotting from CSV data and includes NumPy compatibility for mathematical visualizations. Use it when working with tabular data in Jupyter environments where interactive charts are needed.

View skill

plotly-vertical-legends-avoid-toolbar-clash

Other

This skill provides Plotly layout configurations to position legends vertically on the right side, preventing overlap with the horizontal toolbar. It includes specific margin adjustments and compact styling to ensure the legend has adequate space. The skill also recommends a trace ordering strategy for multi-dataset plots to logically group legend entries.

View skill

highcharts-1-basic-line-chart

Other

This Claude skill provides a ready-to-use Highcharts implementation for creating basic line charts with minimal setup. It includes a complete HTML template with configurable data series, axes, and labels that developers can directly copy and modify. Use this skill when you need to quickly generate or explain simple time-series or categorical data visualizations in web applications.

View skill