ReddRadar
Agent skill
area-chart
Configure area charts in drizzle-cube dashboards for cumulative trends and stacked time series. Use when creating area charts, stacked area graphs, or cumulative visualizations.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/area-chart
SKILL.md
Area Chart Configuration
Configure area charts for drizzle-cube dashboards. Area charts display quantitative data over time with filled regions, ideal for showing cumulative trends and volume.
Chart Type
chartType: 'area'
Basic Configuration
{
id: 'area-chart-1',
title: 'Revenue Over Time',
query: JSON.stringify({
measures: ['Sales.totalRevenue'],
timeDimensions: [{
dimension: 'Sales.date',
granularity: 'month',
dateRange: 'last 12 months'
}]
}),
chartType: 'area',
chartConfig: {
xAxis: ['Sales.date'],
yAxis: ['Sales.totalRevenue']
},
displayConfig: {
stacked: false
},
x: 0, y: 0, w: 8, h: 4
}
Chart Configuration (chartConfig)
xAxis (Time)
- Type:
string[] - Purpose: Time dimension
- Example:
['Sales.createdAt']
yAxis (Values)
- Type:
string[] - Purpose: Measures to display as filled areas
- Example:
['Sales.revenue', 'Sales.costs']
series (Multiple Areas)
- Type:
string[] - Purpose: Dimension for separate areas
- Example:
['Products.category']
Display Configuration (displayConfig)
stacked
- Type:
boolean - Default:
false - Purpose: Stack areas on top of each other
showLegend
- Type:
boolean - Default:
true
showGrid
- Type:
boolean - Default:
true
colors
- Type:
string[] - Purpose: Custom area colors
Examples
Simple Area Chart
{
id: 'cumulative-sales',
title: 'Cumulative Sales',
query: JSON.stringify({
measures: ['Orders.totalRevenue'],
timeDimensions: [{
dimension: 'Orders.createdAt',
granularity: 'week',
dateRange: 'last 90 days'
}]
}),
chartType: 'area',
chartConfig: {
xAxis: ['Orders.createdAt'],
yAxis: ['Orders.totalRevenue']
},
x: 0, y: 0, w: 12, h: 4
}
Stacked Area Chart
{
id: 'revenue-by-source',
title: 'Revenue by Source',
query: JSON.stringify({
measures: ['Revenue.total'],
dimensions: ['Revenue.source'],
timeDimensions: [{
dimension: 'Revenue.date',
granularity: 'month',
dateRange: 'this year'
}]
}),
chartType: 'area',
chartConfig: {
xAxis: ['Revenue.date'],
yAxis: ['Revenue.total'],
series: ['Revenue.source']
},
displayConfig: {
stacked: true,
showLegend: true
},
x: 0, y: 0, w: 12, h: 5
}
Use Cases
- Cumulative Trends: Show accumulation over time
- Volume Visualization: Display magnitude/volume
- Multiple Streams: Stacked sources or categories
- Trend Emphasis: Emphasize overall direction
Related Skills
- Use
line-chartfor non-cumulative trends - Use
bar-chartfor discrete comparisons
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?