{"_id":"@aquacloud_ai/aqc-charts","_rev":"4-ae544c8c7e7695617cd5d85a61c9a9f2","name":"@aquacloud_ai/aqc-charts","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.1":{"name":"@aquacloud_ai/aqc-charts","version":"0.1.1","keywords":["react","echarts","charts","typescript","visualization"],"author":{"name":"Emil Lindfors","email":"emil@aquacloud.ai"},"license":"MIT","_id":"@aquacloud_ai/aqc-charts@0.1.1","maintainers":[{"name":"aquacloudai","email":"emil@aquacloud.ai"}],"homepage":"https://github.com/aquacloudai/aqc-charts#readme","bugs":{"url":"https://github.com/aquacloudai/aqc-charts/issues"},"dist":{"shasum":"a8fb5123227e3b3bbeb9a0cecd8d4a865454bc09","tarball":"https://registry.npmjs.org/@aquacloud_ai/aqc-charts/-/aqc-charts-0.1.1.tgz","fileCount":140,"integrity":"sha512-2ap/LG6gpQcCdyGd2nkGudo6aQuPzvQaNoWBAJgiv+/q6cYXXpMFh6Q6CNqqmeWZQZF1RDLNKwSZosknmfu7Vw==","signatures":[{"sig":"MEUCIEGWvw7IBgKOD1I21V64sM0RSnvqarfl4iAStGXiPT3zAiEAukT/XueKoCmwYOGMwRmNuGFmd1t2vprkHfr5TZUGioY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":718708},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"bun":">=1.0.0","node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"f19bfc052cd1721a749bc1d9e18e1a0e0bfc9d15","scripts":{"dev":"rolldown --config rolldown.config.js --watch","docs":"typedoc src/index.ts","lint":"oxlint src","test":"vitest run","build":"rolldown --config rolldown.config.js && bun run build:types","clean":"rm -rf dist","format":"dprint fmt","example":"cd example && bun run dev","release":"np --no-yarn","test:ui":"vitest --ui","lint:fix":"oxlint src --fix","typecheck":"tsc --noEmit","test:watch":"vitest","build:types":"tsc --project tsconfig.build.json","format:check":"dprint check","test:coverage":"vitest run --coverage","prepublishOnly":"bun run clean && bun run build"},"_npmUser":{"name":"aquacloudai","email":"emil@aquacloud.ai"},"repository":{"url":"git+https://github.com/aquacloudai/aqc-charts.git","type":"git"},"_npmVersion":"10.8.2","description":"Modern Apache ECharts React components with TypeScript","directories":{},"sideEffects":false,"_nodeVersion":"20.19.4","dependencies":{"echarts":"6.0.0","echarts-stat":"1.2.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"np":"^10.2.0","vite":"^7.0.0","react":"^19.1.0","dprint":"^0.50.0","oxlint":"^1.3.0","vitest":"^3.2.4","typedoc":"^0.28.5","rolldown":"^1.0.0-beta.18","@swc/core":"^1.12.6","happy-dom":"^18.0.1","react-dom":"^19.1.0","@vitest/ui":"^3.2.4","typescript":"^5.8.3","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@vitest/coverage-v8":"^3.2.4","@testing-library/react":"^16.3.0","@testing-library/jest-dom":"^6.6.3","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/aqc-charts_0.1.1_1756469893360_0.41206520377262157","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@aquacloud_ai/aqc-charts","version":"0.1.2","keywords":["react","echarts","charts","typescript","visualization"],"author":{"name":"Emil Lindfors","email":"emil@aquacloud.ai"},"license":"MIT","_id":"@aquacloud_ai/aqc-charts@0.1.2","maintainers":[{"name":"aquacloudai","email":"emil@aquacloud.ai"}],"homepage":"https://github.com/aquacloudai/aqc-charts#readme","bugs":{"url":"https://github.com/aquacloudai/aqc-charts/issues"},"dist":{"shasum":"1e47d306cf51517de65ba5c1ea852ff18cfe3a5e","tarball":"https://registry.npmjs.org/@aquacloud_ai/aqc-charts/-/aqc-charts-0.1.2.tgz","fileCount":142,"integrity":"sha512-gZC5LfteVqntFivpGOUK0hnSm1KuPuiB84De7R8wDxeEbcYkkbEcH/uyBHCzquzCDcMO0YL8uE/6b03nJ/c2yw==","signatures":[{"sig":"MEQCICQosPRj/9bPOoprM3Ct3aVGch6rYG5+1GI2cGMFVz+EAiByEPAzZW4J4r5/qIVDKRPeFIfjf6lbaT0XGpECO0xN6A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":765249},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"bun":">=1.0.0","node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"3f454d4553f2a136818ae0ea0d9fb797d3b5aca3","scripts":{"dev":"rolldown --config rolldown.config.js --watch","docs":"typedoc src/index.ts","lint":"oxlint src","test":"vitest run","build":"rolldown --config rolldown.config.js && bun run build:types","clean":"rm -rf dist","format":"dprint fmt","example":"cd example && bun run dev","release":"np --no-yarn","test:ui":"vitest --ui","lint:fix":"oxlint src --fix","typecheck":"tsc --noEmit","test:watch":"vitest","build:types":"tsc --project tsconfig.build.json","format:check":"dprint check","test:coverage":"vitest run --coverage","prepublishOnly":"bun run clean && bun run build"},"_npmUser":{"name":"aquacloudai","email":"emil@aquacloud.ai"},"repository":{"url":"git+https://github.com/aquacloudai/aqc-charts.git","type":"git"},"_npmVersion":"10.8.2","description":"Modern Apache ECharts React components with TypeScript","directories":{},"sideEffects":false,"_nodeVersion":"20.19.4","dependencies":{"echarts":"6.0.0","echarts-stat":"1.2.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"np":"^10.2.0","vite":"^7.0.0","react":"^19.1.0","dprint":"^0.50.0","oxlint":"^1.3.0","vitest":"^3.2.4","typedoc":"^0.28.5","rolldown":"^1.0.0-beta.18","@swc/core":"^1.12.6","happy-dom":"^18.0.1","react-dom":"^19.1.0","@vitest/ui":"^3.2.4","typescript":"^5.8.3","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@vitest/coverage-v8":"^3.2.4","@testing-library/react":"^16.3.0","@testing-library/jest-dom":"^6.6.3","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/aqc-charts_0.1.2_1756898949039_0.9904419681171344","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@aquacloud_ai/aqc-charts","version":"0.1.3","keywords":["react","echarts","charts","typescript","visualization"],"author":{"name":"Emil Lindfors","email":"emil@aquacloud.ai"},"license":"MIT","_id":"@aquacloud_ai/aqc-charts@0.1.3","maintainers":[{"name":"aquacloudai","email":"emil@aquacloud.ai"}],"homepage":"https://github.com/aquacloudai/aqc-charts#readme","bugs":{"url":"https://github.com/aquacloudai/aqc-charts/issues"},"dist":{"shasum":"2b0a75797f55c21d66a81d203be265e4caff028d","tarball":"https://registry.npmjs.org/@aquacloud_ai/aqc-charts/-/aqc-charts-0.1.3.tgz","fileCount":142,"integrity":"sha512-gnnNbHb0+qT8POMH5YVVKYutUKwfvpMU+H+LSZ6x4GErhBqVjEg3lhD6AtUXpoGwHRAy+6EJZcBee9/C/FTEJg==","signatures":[{"sig":"MEQCIH8sBPS/hDYxPWRGjKpVS/+tfap191d3nLSBVipNmrLKAiB/JNfyJioA37Fw+y7LF+fui52PUeWY3C+TdqzxIz4f9Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":771946},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"bun":">=1.0.0","node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"7c65a949a5280ceb8a5c11e492ecf30304753ce5","scripts":{"dev":"rolldown --config rolldown.config.js --watch","docs":"typedoc src/index.ts","lint":"oxlint src","test":"vitest run","build":"rolldown --config rolldown.config.js && bun run build:types","clean":"rm -rf dist","format":"dprint fmt","example":"cd example && bun run dev","release":"np --no-yarn","test:ui":"vitest --ui","lint:fix":"oxlint src --fix","typecheck":"tsc --noEmit","test:watch":"vitest","build:types":"tsc --project tsconfig.build.json","format:check":"dprint check","test:coverage":"vitest run --coverage","prepublishOnly":"bun run clean && bun run build"},"_npmUser":{"name":"aquacloudai","email":"emil@aquacloud.ai"},"repository":{"url":"git+https://github.com/aquacloudai/aqc-charts.git","type":"git"},"_npmVersion":"10.8.2","description":"Modern Apache ECharts React components with TypeScript","directories":{},"sideEffects":false,"_nodeVersion":"20.19.5","dependencies":{"echarts":"6.0.0","echarts-stat":"1.2.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"np":"^10.2.0","vite":"^7.0.0","react":"^19.1.0","dprint":"^0.50.0","oxlint":"^1.3.0","vitest":"^3.2.4","typedoc":"^0.28.5","rolldown":"^1.0.0-beta.18","@swc/core":"^1.12.6","happy-dom":"^18.0.1","react-dom":"^19.1.0","@vitest/ui":"^3.2.4","typescript":"^5.8.3","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@vitest/coverage-v8":"^3.2.4","@testing-library/react":"^16.3.0","@testing-library/jest-dom":"^6.6.3","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/aqc-charts_0.1.3_1758631771411_0.33298339195055604","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@aquacloud_ai/aqc-charts","version":"0.2.0","description":"Modern Apache ECharts React components with TypeScript","keywords":["react","echarts","charts","typescript","visualization"],"author":{"name":"Emil Lindfors","email":"emil@aquacloud.ai"},"license":"MIT","homepage":"https://github.com/aquacloudai/aqc-charts#readme","repository":{"type":"git","url":"git+https://github.com/aquacloudai/aqc-charts.git"},"bugs":{"url":"https://github.com/aquacloudai/aqc-charts/issues"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./legacy":{"types":"./dist/legacy.d.ts","import":"./dist/legacy.js","require":"./dist/legacy.cjs"}},"sideEffects":["./dist/index.js","./dist/index.cjs","./src/index.ts","./src/utils/echarts.ts"],"scripts":{"dev":"rolldown --config rolldown.config.js --watch","build":"rolldown --config rolldown.config.js && bun run build:types","build:types":"tsc --project tsconfig.build.json","test":"vitest run","test:watch":"vitest","test:ui":"vitest --ui","test:coverage":"vitest run --coverage","lint":"oxlint src","lint:fix":"oxlint src --fix","format":"dprint fmt","format:check":"dprint check","typecheck":"tsc --noEmit","example":"cd example && bun run dev","docs":"typedoc src/index.ts","clean":"rm -rf dist","prepublishOnly":"bun run clean && bun run build","release":"np --no-yarn"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","echarts":">=6.0.0","echarts-stat":">=1.2.0"},"peerDependenciesMeta":{"echarts-stat":{"optional":true}},"devDependencies":{"@swc/core":"^1.12.6","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.3.0","@testing-library/user-event":"^14.6.1","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@vitest/coverage-v8":"^3.2.4","@vitest/ui":"^3.2.4","dprint":"^0.50.0","echarts":"6.0.0","echarts-stat":"1.2.0","happy-dom":"^18.0.1","np":"^10.2.0","oxlint":"^1.3.0","react":"^19.1.0","react-dom":"^19.1.0","rolldown":"^1.0.0-beta.18","typedoc":"^0.28.5","typescript":"^5.8.3","vite":"^7.0.0","vitest":"^3.2.4"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"engines":{"node":">=18.0.0","bun":">=1.0.0"},"_id":"@aquacloud_ai/aqc-charts@0.2.0","gitHead":"8cb28726fafe76ae4915fc2347b3f6faaec061bd","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-vPdLHdY8gDw86l0i+iP/9tD4FXGt3DElDvHoCo98vKYq9JFwp1qe79XMtRxMRW2qsWmV3UGLykCtnjFt0EvzaQ==","shasum":"f6a2037a416fbc777969845f556da45687d2fdee","tarball":"https://registry.npmjs.org/@aquacloud_ai/aqc-charts/-/aqc-charts-0.2.0.tgz","fileCount":152,"unpackedSize":664446,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC7knt8aNaS5NVFm2+OW6yB25905AVYgENlgA5rN9y4JgIgLd93zkC0O2SC1MSD7aIAzeo1LFiPGAssvIdfAdFcrTc="}]},"_npmUser":{"name":"aquacloudai","email":"emil@aquacloud.ai"},"directories":{},"maintainers":[{"name":"aquacloudai","email":"emil@aquacloud.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/aqc-charts_0.2.0_1767878896814_0.2695749678044943"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-29T12:18:13.275Z","modified":"2026-01-08T13:28:17.265Z","0.1.1":"2025-08-29T12:18:13.529Z","0.1.2":"2025-09-03T11:29:09.223Z","0.1.3":"2025-09-23T12:49:31.639Z","0.2.0":"2026-01-08T13:28:17.056Z"},"bugs":{"url":"https://github.com/aquacloudai/aqc-charts/issues"},"author":{"name":"Emil Lindfors","email":"emil@aquacloud.ai"},"license":"MIT","homepage":"https://github.com/aquacloudai/aqc-charts#readme","keywords":["react","echarts","charts","typescript","visualization"],"repository":{"type":"git","url":"git+https://github.com/aquacloudai/aqc-charts.git"},"description":"Modern Apache ECharts React components with TypeScript","maintainers":[{"name":"aquacloudai","email":"emil@aquacloud.ai"}],"readme":"# 📊 AQC Charts\n\n> Modern Apache ECharts React components with TypeScript, built for performance and developer experience\n\n[![npm version](https://badge.fury.io/js/aqc-charts.svg)](https://badge.fury.io/js/aqc-charts)\n[![CI](https://github.com/yourusername/aqc-charts/workflows/CI/badge.svg)](https://github.com/yourusername/aqc-charts/actions)\n[![Coverage Status](https://coveralls.io/repos/github/yourusername/aqc-charts/badge.svg?branch=main)](https://coveralls.io/github/yourusername/aqc-charts?branch=main)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue.svg)](https://www.typescriptlang.org/)\n\nAQC Charts is a production-ready React charting library built on Apache ECharts. Designed with modern patterns, TypeScript-first architecture, and an extensible foundation for enterprise applications.\n\n## ✨ Why AQC Charts?\n\n- 🏗️ **Modern React Patterns**: Built with hooks, refs, and proper lifecycle management\n- 📘 **TypeScript First**: Complete type safety with comprehensive interfaces and generics\n- ⚡ **Performance Optimized**: Smart memoization, efficient re-renders, and minimal bundle size\n- 🎨 **Flexible Theming**: Built-in light/dark themes plus custom theme object support\n- 🔧 **Extensible Architecture**: Easy to add new chart types and data transformations\n- 📱 **Responsive by Default**: Automatic resizing and responsive behavior\n- 🚀 **Latest ECharts**: Always compatible with the newest Apache ECharts features\n- 🛡️ **Production Ready**: Comprehensive error handling, loading states, and edge cases\n- 🧪 **Well Tested**: High test coverage with modern testing tools\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\n# npm\nnpm install aqc-charts\n\n# yarn  \nyarn add aqc-charts\n\n# pnpm\npnpm add aqc-charts\n\n# bun\nbun add aqc-charts\n```\n\n### Basic Usage\n\n```tsx\nimport React from 'react';\nimport { LineChart, BarChart, PieChart } from 'aqc-charts';\n\nconst App = () => {\n  const salesData = [\n    {\n      name: 'Revenue',\n      type: 'line',\n      data: [120, 132, 101, 134, 90, 230, 210],\n      color: '#5470c6'\n    },\n    {\n      name: 'Profit',\n      type: 'line', \n      data: [220, 182, 191, 234, 290, 330, 310],\n      color: '#91cc75'\n    }\n  ];\n\n  return (\n    <div>\n      <LineChart\n        data={salesData}\n        xAxis={{ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }}\n        title=\"Weekly Performance\"\n        subtitle=\"Revenue vs Profit Analysis\"\n        height={400}\n        smooth={true}\n        area={true}\n        onClick={(params, chart) => {\n          console.log('Data point clicked:', params);\n        }}\n      />\n    </div>\n  );\n};\n\nexport default App;\n```\n\n## 📖 Components\n\n### 📈 LineChart\n\nPerfect for showing trends, time series data, and continuous relationships.\n\n```tsx\n<LineChart\n  data={[\n    {\n      name: 'Temperature',\n      type: 'line',\n      data: [22, 24, 26, 28, 25, 23, 21],\n      color: '#ff6b6b'\n    }\n  ]}\n  xAxis={{ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }}\n  title=\"Weekly Temperature\"\n  smooth={true}\n  area={true}\n  symbol={true}\n  connectNulls={false}\n  theme=\"light\"\n/>\n```\n\n**Props:**\n\n- `data` - Array of chart series with type definitions\n- `smooth` - Enable smooth curve interpolation\n- `area` - Fill area under the line(s)\n- `stack` - Stack multiple series\n- `symbol` - Show/hide data point markers\n- `symbolSize` - Size of data point markers\n- `connectNulls` - Connect lines across null data points\n\n### 📊 BarChart\n\nIdeal for comparing categories, rankings, and discrete data sets.\n\n```tsx\n<BarChart\n  data={[\n    {\n      name: 'Sales',\n      type: 'bar',\n      data: [320, 332, 301, 334, 390],\n      color: '#fac858'\n    },\n    {\n      name: 'Target',\n      type: 'bar',\n      data: [300, 320, 280, 340, 380],\n      color: '#91cc75'\n    }\n  ]}\n  xAxis={{ data: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5'] }}\n  title=\"Quarterly Sales vs Target\"\n  horizontal={false}\n  stack={false}\n  showValues={true}\n  barWidth=\"60%\"\n/>\n```\n\n**Props:**\n\n- `horizontal` - Render bars horizontally\n- `stack` - Stack multiple bar series\n- `showValues` - Display values on bars\n- `barWidth` - Custom bar width (string or number)\n- `barMaxWidth` - Maximum bar width constraint\n\n### 🍰 PieChart\n\nGreat for showing proportions, market share, and part-to-whole relationships.\n\n```tsx\n<PieChart\n  data={[\n    { name: 'Desktop', value: 1048 },\n    { name: 'Mobile', value: 735 },\n    { name: 'Tablet', value: 580 },\n    { name: 'Other', value: 484 }\n  ]}\n  title=\"Device Usage Statistics\"\n  radius={['40%', '70%']}\n  center={['50%', '50%']}\n  roseType={false}\n  showLabels={true}\n  showLegend={true}\n/>\n```\n\n**Props:**\n\n- `radius` - Inner and outer radius (donut chart support)\n- `center` - Chart center position\n- `roseType` - Rose chart type (`'radius'` | `'area'` | `false`)\n- `showLabels` - Show/hide slice labels\n- `showLegend` - Show/hide legend\n\n### ⚙️ BaseChart\n\nLow-level component for advanced customization and custom chart types.\n\n```tsx\n<BaseChart\n  option={{\n    title: { text: 'Custom Visualization' },\n    xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] },\n    yAxis: { type: 'value' },\n    series: [{\n      type: 'scatter',\n      data: [[0, 10], [1, 15], [2, 8], [3, 20]],\n      symbolSize: 8\n    }]\n  }}\n  theme=\"dark\"\n  renderer=\"svg\"\n  width=\"100%\"\n  height={400}\n  onChartReady={(chart) => {\n    // Access full ECharts API\n    console.log('Chart initialized:', chart);\n  }}\n/>\n```\n\n## 🎨 Theming System\n\n### Built-in Themes\n\n```tsx\n// Light theme (default)\n<LineChart data={data} theme=\"light\" />\n\n// Dark theme\n<LineChart data={data} theme=\"dark\" />\n```\n\n### Custom Themes\n\n```tsx\nconst customTheme = {\n  backgroundColor: '#1a1a1a',\n  textStyle: { \n    color: '#ffffff',\n    fontFamily: 'Inter, sans-serif'\n  },\n  color: [\n    '#ff6b6b', '#4ecdc4', '#45b7d1', \n    '#96ceb4', '#feca57', '#ff9ff3'\n  ],\n  grid: {\n    borderColor: '#333333'\n  }\n};\n\n<LineChart data={data} theme={customTheme} />\n```\n\n### Theme Variables\n\n```tsx\nimport { lightTheme, darkTheme } from 'aqc-charts';\n\n// Extend existing themes\nconst myTheme = {\n  ...darkTheme,\n  color: ['#your', '#custom', '#colors'],\n  backgroundColor: '#your-bg-color'\n};\n```\n\n## 🔧 Advanced Usage\n\n### Chart Instance Access\n\n```tsx\nimport { useRef } from 'react';\nimport { LineChart, ChartRef } from 'aqc-charts';\n\nconst MyComponent = () => {\n  const chartRef = useRef<ChartRef>(null);\n\n  const exportChart = () => {\n    const chart = chartRef.current?.getEChartsInstance();\n    const dataURL = chart?.getDataURL({\n      type: 'png',\n      pixelRatio: 2,\n      backgroundColor: '#fff'\n    });\n    \n    // Create download link\n    const link = document.createElement('a');\n    link.download = 'chart.png';\n    link.href = dataURL;\n    link.click();\n  };\n\n  const refreshChart = () => {\n    chartRef.current?.refresh();\n  };\n\n  return (\n    <div>\n      <button onClick={exportChart}>Export as PNG</button>\n      <button onClick={refreshChart}>Refresh Chart</button>\n      \n      <LineChart\n        ref={chartRef}\n        data={data}\n        onChartReady={(chart) => {\n          console.log('Chart ready!', chart);\n        }}\n      />\n    </div>\n  );\n};\n```\n\n### Event Handling\n\n```tsx\n<LineChart\n  data={data}\n  onClick={(params, chart) => {\n    console.log('Data point clicked:', {\n      seriesName: params.seriesName,\n      dataIndex: params.dataIndex,\n      value: params.value\n    });\n  }}\n  onMouseOver={(params, chart) => {\n    // Custom hover behavior\n    chart.getEChartsInstance()?.dispatchAction({\n      type: 'highlight',\n      seriesIndex: params.seriesIndex,\n      dataIndex: params.dataIndex\n    });\n  }}\n  onDataZoom={(params, chart) => {\n    console.log('Zoom changed:', params);\n  }}\n/>\n```\n\n### Loading States\n\n```tsx\nconst [isLoading, setIsLoading] = useState(false);\nconst [chartData, setChartData] = useState([]);\n\nconst fetchData = async () => {\n  setIsLoading(true);\n  try {\n    const response = await api.getChartData();\n    setChartData(response.data);\n  } finally {\n    setIsLoading(false);\n  }\n};\n\nreturn (\n  <LineChart\n    data={chartData}\n    loading={isLoading}\n    height={400}\n  />\n);\n```\n\n### Responsive Design\n\n```tsx\n// Responsive chart that adapts to container\n<div style={{ width: '100%', height: '50vh' }}>\n  <LineChart\n    data={data}\n    width=\"100%\"\n    height=\"100%\"\n    // Chart automatically resizes when container changes\n  />\n</div>\n```\n\n## 📚 TypeScript Support\n\nFull TypeScript support with comprehensive type definitions:\n\n```tsx\nimport type { \n  ChartSeries, \n  ChartDataPoint, \n  ChartTheme,\n  LineChartProps,\n  BarChartProps,\n  PieChartProps \n} from 'aqc-charts';\n\n// Strongly typed chart data\nconst typedData: ChartSeries[] = [\n  {\n    name: 'Sales',\n    type: 'line',\n    data: [100, 200, 300], // Type-checked\n    color: '#5470c6'\n  }\n];\n\n// Strongly typed pie chart data\nconst pieData: ChartDataPoint[] = [\n  { name: 'Category A', value: 335 },\n  { name: 'Category B', value: 310 }\n];\n\n// Custom theme with type safety\nconst customTheme: ChartTheme = {\n  backgroundColor: '#ffffff',\n  color: ['#ff0000', '#00ff00', '#0000ff']\n};\n```\n\n## 🎯 Examples\n\n### Real-time Data\n\n```tsx\nimport { useEffect, useState } from 'react';\nimport { LineChart } from 'aqc-charts';\n\nconst RealTimeChart = () => {\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setData(prevData => [\n        ...prevData.slice(-50), // Keep last 50 points\n        { \n          name: 'Live Data',\n          type: 'line',\n          data: [...prevData[0]?.data.slice(-50) || [], Math.random() * 100]\n        }\n      ]);\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <LineChart\n      data={data}\n      title=\"Real-time Data Stream\"\n      smooth={true}\n      height={400}\n    />\n  );\n};\n```\n\n### Multi-axis Charts\n\n```tsx\n<LineChart\n  data={[\n    {\n      name: 'Temperature',\n      type: 'line',\n      data: [22, 24, 26, 28, 25],\n      yAxisIndex: 0,\n      color: '#ff6b6b'\n    },\n    {\n      name: 'Humidity',\n      type: 'line', \n      data: [65, 70, 68, 72, 69],\n      yAxisIndex: 1,\n      color: '#4ecdc4'\n    }\n  ]}\n  xAxis={{ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] }}\n  yAxis={[\n    { type: 'value', name: 'Temperature (°C)', position: 'left' },\n    { type: 'value', name: 'Humidity (%)', position: 'right' }\n  ]}\n  title=\"Temperature & Humidity\"\n/>\n```\n\n### Dashboard Layout\n\n```tsx\nconst Dashboard = () => (\n  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>\n    <LineChart\n      data={revenueData}\n      title=\"Revenue Trend\"\n      height={300}\n    />\n    <BarChart\n      data={salesData}\n      title=\"Sales by Region\"\n      height={300}\n    />\n    <PieChart\n      data={userSegmentData}\n      title=\"User Segments\"\n      height={300}\n    />\n    <LineChart\n      data={performanceData}\n      title=\"Performance Metrics\"\n      height={300}\n    />\n  </div>\n);\n```\n\n## 🧪 Testing\n\nAQC Charts comes with comprehensive test utilities:\n\n```tsx\nimport { render, screen } from '@testing-library/react';\nimport { LineChart } from 'aqc-charts';\n\ntest('renders chart with title', () => {\n  render(\n    <LineChart\n      data={[{ name: 'Test', type: 'line', data: [1, 2, 3] }]}\n      title=\"Test Chart\"\n    />\n  );\n  \n  expect(screen.getByText('Test Chart')).toBeInTheDocument();\n});\n```\n\n## 🛠️ Development\n\n### Prerequisites\n\n- [Bun](https://bun.sh/) (recommended) or Node.js 18+\n- React 18+\n- TypeScript 5+\n\n### Setup\n\n```bash\n# Clone repository\ngit clone https://github.com/yourusername/aqc-charts.git\ncd aqc-charts\n\n# Install dependencies\nbun install\n\n# Start development\nbun run dev\n\n# Run tests\nbun run test\n\n# Run example app\nbun run example\n```\n\n### Scripts\n\n```bash\nbun run dev          # Development mode with hot reload\nbun run build        # Build library for production\nbun run test         # Run test suite\nbun run test:ui      # Run tests with UI\nbun run test:watch   # Run tests in watch mode\nbun run lint         # Lint code with Oxlint\nbun run format       # Format code with dprint\nbun run typecheck    # Type checking with TypeScript\nbun run example      # Run example application\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n### Quick Contribution Steps\n\n1. Fork the repository\n2. Create your feature branch: `git checkout -b feature/amazing-feature`\n3. Make your changes and add tests\n4. Ensure tests pass: `bun run test`\n5. Lint and format: `bun run lint && bun run format`\n6. Commit your changes: `git commit -m 'Add amazing feature'`\n7. Push to the branch: `git push origin feature/amazing-feature`\n8. Open a Pull Request\n\n### Development Guidelines\n\n- Write TypeScript with strict mode\n- Add tests for new features\n- Follow the existing code style\n- Update documentation for API changes\n- Use conventional commit messages\n\n## 📊 Performance\n\nAQC Charts is built for performance:\n\n- **Bundle Size**: ~15KB gzipped (excluding ECharts)\n- **Render Performance**: Optimized with React.memo and useMemo\n- **Memory Usage**: Proper cleanup and disposal\n- **Tree Shaking**: Full ES modules support\n- **Development Speed**: Ultra-fast with modern Rust tooling\n\n## 🔒 Browser Support\n\n- Chrome/Edge 88+\n- Firefox 85+\n- Safari 14+\n- iOS Safari 14+\n- Android Chrome 88+\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [Apache ECharts](https://echarts.apache.org/) - The powerful charting library that powers this component\n- [React](https://reactjs.org/) - The UI library\n- [TypeScript](https://www.typescriptlang.org/) - For type safety and developer experience\n- Modern Rust tooling: [Bun](https://bun.sh/), [Rolldown](https://rolldown.rs/), [Oxlint](https://oxc-project.github.io/), [dprint](https://dprint.dev/)\n\n## 🔗 Links\n\n- [Documentation](https://yourusername.github.io/aqc-charts)\n- [Examples](https://yourusername.github.io/aqc-charts/examples)\n- [API Reference](https://yourusername.github.io/aqc-charts/api)\n- [npm Package](https://www.npmjs.com/package/aqc-charts)\n- [GitHub Repository](https://github.com/yourusername/aqc-charts)\n- [Issue Tracker](https://github.com/yourusername/aqc-charts/issues)\n\n---\n\n<div align=\"center\">\n\n**[⭐ Star us on GitHub](https://github.com/yourusername/aqc-charts) | [📖 Read the Docs](https://yourusername.github.io/aqc-charts) | [💬 Join Discussions](https://github.com/yourusername/aqc-charts/discussions)**\n\nMade with ❤️ by the AQC Charts team\n\n</div>\n","readmeFilename":"README.md"}