Something went wrong. Try again.
Cursor plugin specification and official plugins
Something went wrong. Try again.
5.1 kB · 269 lines
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270---description: Highcharts chart patterns and best practices for analytics visualizationsglobs: - "**/charts/**/*.tsx" - "**/charts/**/*.ts" - "**/analytics/**/*.tsx" - "**/dashboard/**/*.tsx" - "**/visualization/**/*.tsx"alwaysApply: false---
# Highcharts Best Practices
When building analytics charts with Highcharts, follow these patterns for consistency and quality.
## Chart Configuration
### Always Use Transparent Backgrounds
```typescript// ✅ Good - inherits page/card backgroundchart: { backgroundColor: "transparent",}
// ❌ Bad - hardcoded backgroundchart: { backgroundColor: "#ffffff",}```
### Disable Animation in Production
```typescript// ✅ Good - better performancechart: { animation: false,},plotOptions: { series: { animation: false, },}```
### Disable Credits
```typescript// ✅ Good - always disable Highcharts brandingcredits: { enabled: false }```
## Color Usage
### Use Design System Colors
```typescriptimport { COLORS, COLOR_ARRAY } from "@/lib/chart-constants";
// ✅ Good - use predefined paletteseries: [{ color: COLORS.greenPrimary,}]
// ✅ Good - auto-assign from arrayplotOptions: { bar: { colorByPoint: true, colors: COLOR_ARRAY, }}
// ❌ Bad - hardcoded arbitrary colorsseries: [{ color: "#ff0000",}]```
### Use Semantic Colors for Meaningful Data
```typescriptimport { COMPLEXITY_COLORS, INTENT_COLORS } from "@/lib/chart-constants";
// ✅ Good - complexity data uses semantic colorsconst color = COMPLEXITY_COLORS[dataItem.complexity] || COLORS.neutralPrimary;
// ❌ Bad - arbitrary colors for semantic dataconst color = COLOR_ARRAY[index];```
## Styling
### Use CSS Variables for Theme Support
```typescript// ✅ Good - supports light/dark themesstyle: { color: "var(--color-theme-text-secondary)",}
// ❌ Bad - hardcoded colors break themesstyle: { color: "#666666",}```
### Use Shared Style Constants
```typescriptimport { CHART_STYLES, COMMON_CHART_OPTIONS } from "@/lib/chart-constants";
// ✅ Good - consistent stylingxAxis: { labels: { style: CHART_STYLES.text.tertiary, },},yAxis: COMMON_CHART_OPTIONS.yAxis("Count"),tooltip: COMMON_CHART_OPTIONS.tooltip,```
## Data Handling
### Filter Low-Percentage Outliers
```typescriptimport { filterLowPercentage } from "@/lib/data-utils";
// ✅ Good - remove noise from LLM classification dataconst filteredData = filterLowPercentage(data, 1); // Remove items under 1%```
### Limit Categories for Readability
```typescript// ✅ Good - limit to top N categoriesconst topCategories = sortedData.slice(0, 7);const otherCount = sortedData.slice(7).reduce((sum, d) => sum + d.count, 0);if (otherCount > 0) { topCategories.push({ category: "Other", count: otherCount });}
// ❌ Bad - show all 50 categoriesconst allCategories = sortedData; // Creates unreadable chart```
### Sort Data Appropriately
```typescript// ✅ Good - sort by value for rankingsconst sorted = [...data].sort((a, b) => b.count - a.count);
// ✅ Good - sort chronologically for time seriesconst sorted = [...data].sort((a, b) => new Date(a.date) - new Date(b.date));```
## Pie Charts
### Use Donut Style with Inner Size
```typescriptplotOptions: { pie: { innerSize: "50%", // Creates donut effect borderWidth: 2, borderColor: "var(--color-theme-bg)", }}```
### Limit to 7 Categories Maximum
If you have more than 7 categories, aggregate smaller ones into "Other" or switch to a bar chart.
## Bar Charts
### Use Horizontal Bars for Long Labels
```typescript// ✅ Good for long category nameschart: { type: "bar", // Horizontal bars}
// Consider vertical column only for short labelschart: { type: "column", // Vertical bars}```
### Calculate Dynamic Height
```typescript// ✅ Good - height scales with datachart: { height: Math.max(300, data.length * 28),}```
## Time Series Charts
### Use Stacked Area for Composition Over Time
```typescriptplotOptions: { area: { stacking: "normal", lineWidth: 1, lineColor: "transparent", marker: { enabled: false }, }}```
### Format Date Labels Consistently
```typescriptimport { formatDateLabel } from "@/lib/data-utils";
xAxis: { categories: dates.map(formatDateLabel), // "Dec 8", "Dec 9", etc.}```
## Tooltips
### Use Shared Tooltips for Multi-Series Charts
```typescripttooltip: { ...COMMON_CHART_OPTIONS.tooltip, shared: true,}```
### Show Percentages in Tooltips
```typescripttooltip: { pointFormat: "{series.name}: <b>{point.y} ({point.percentage:.1f}%)</b>",}```
## Accessibility
### Provide Meaningful Descriptions
```typescriptaccessibility: { description: "Bar chart showing user activity by category over the past 30 days",}```
## Empty States
### Always Handle No Data
```typescriptif (!data || data.length === 0) { return ( <Card> <DashboardEmptyState title="No Data Available" description="No data found for the selected date range." /> </Card> );}```