{"id":40755653,"url":"https://github.com/chartgpu/chartgpu-react","last_synced_at":"2026-01-25T21:03:06.228Z","repository":{"id":333767816,"uuid":"1137195548","full_name":"ChartGPU/chartgpu-react","owner":"ChartGPU","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-20T22:23:21.000Z","size":58,"stargazers_count":28,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-25T07:52:15.100Z","etag":null,"topics":["chart","chart-library","charting","charts","charts-and-dashboards-for-visualization","charts-and-graphs","data-visualization","data-viz","echarts","gpu-acceleration","performance","react","react-components","react18","typescript","webgpu","webgpu-engine","webgpu-shaders"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChartGPU.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-19T03:40:02.000Z","updated_at":"2026-01-25T07:48:43.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ChartGPU/chartgpu-react","commit_stats":null,"previous_names":["chartgpu/chartgpu-react"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ChartGPU/chartgpu-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChartGPU%2Fchartgpu-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChartGPU%2Fchartgpu-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChartGPU%2Fchartgpu-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChartGPU%2Fchartgpu-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChartGPU","download_url":"https://codeload.github.com/ChartGPU/chartgpu-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChartGPU%2Fchartgpu-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28758493,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T20:56:06.009Z","status":"ssl_error","status_checked_at":"2026-01-25T20:54:48.203Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","chart-library","charting","charts","charts-and-dashboards-for-visualization","charts-and-graphs","data-visualization","data-viz","echarts","gpu-acceleration","performance","react","react-components","react18","typescript","webgpu","webgpu-engine","webgpu-shaders"],"created_at":"2026-01-21T16:09:53.027Z","updated_at":"2026-01-25T21:03:06.194Z","avatar_url":"https://github.com/ChartGPU.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# chartgpu-react\n\nReact bindings for [ChartGPU](https://github.com/huntergemmer/chart-gpu) - a WebGPU-powered charting library delivering high-performance data visualization.\n\n## Features\n\n- **WebGPU-Accelerated**: Leverages GPU compute and rendering for exceptional performance\n- **React 18+**: Built with modern React patterns (hooks, functional components)\n- **Type-Safe**: Full TypeScript support with comprehensive type definitions\n- **Production-Ready**: Handles async initialization, cleanup, and edge cases safely\n- **Flexible API**: Declarative options-based configuration\n\n## Installation\n\n```bash\nnpm install chartgpu-react chartgpu react react-dom\n```\n\n## Requirements\n\n- React 18.0.0 or higher\n- Browser with WebGPU support:\n  - Chrome/Edge 113+\n  - Safari 18+\n  - Firefox (not yet supported)\n\nCheck browser compatibility at [caniuse.com/webgpu](https://caniuse.com/webgpu)\n\n## Quick Start\n\n```tsx\nimport { ChartGPUChart } from 'chartgpu-react';\n\nfunction MyChart() {\n  const options = {\n    series: [\n      {\n        type: 'line',\n        data: [\n          { x: 0, y: 0 },\n          { x: 1, y: 1 },\n          { x: 2, y: 4 },\n          { x: 3, y: 9 },\n        ],\n        lineStyle: {\n          width: 2,\n          color: '#667eea',\n        },\n      },\n    ],\n    xAxis: { type: 'value' },\n    yAxis: { type: 'value' },\n  };\n\n  return (\n    \u003cChartGPUChart\n      options={options}\n      style={{ width: '100%', height: '400px' }}\n    /\u003e\n  );\n}\n```\n\n## Component API\n\n### `ChartGPUChart`\n\nMain React component wrapping ChartGPU functionality.\n\n#### Props\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `options` | `ChartGPUOptions` | Yes | Chart configuration (series, axes, styling) |\n| `className` | `string` | No | CSS class name for the container div |\n| `style` | `React.CSSProperties` | No | Inline styles for the container div |\n| `onInit` | `(instance: ChartGPUInstance) =\u003e void` | No | Callback fired when chart instance is created |\n| `onDispose` | `() =\u003e void` | No | Callback fired when chart instance is disposed |\n\n#### Behavior\n\n**Lifecycle Management:**\n- Creates ChartGPU instance on mount via `ChartGPU.create()`\n- Safely handles async initialization race conditions\n- Automatically disposes instance on unmount\n- Prevents state updates after component unmount\n\n**Options Updates:**\n- Calls `instance.setOption(options)` when `options` prop changes\n- Triggers automatic re-render of the chart\n\n**Resize Handling:**\n- Listens to window resize events\n- Calls `instance.resize()` automatically\n- Ensures chart maintains correct dimensions\n\n## Examples\n\n### Multi-Series Line Chart\n\n```tsx\nimport { ChartGPUChart } from 'chartgpu-react';\n\nfunction MultiSeriesExample() {\n  const options = {\n    series: [\n      {\n        type: 'line',\n        name: 'Revenue',\n        data: generateData(50),\n        lineStyle: { color: '#667eea', width: 2 },\n      },\n      {\n        type: 'line',\n        name: 'Expenses',\n        data: generateData(50),\n        lineStyle: { color: '#f093fb', width: 2 },\n      },\n    ],\n    xAxis: { type: 'value' },\n    yAxis: { type: 'value' },\n    grid: { left: 60, right: 40, top: 40, bottom: 40 },\n    tooltip: { show: true },\n  };\n\n  return (\n    \u003cChartGPUChart\n      options={options}\n      style={{ width: '100%', height: '400px' }}\n    /\u003e\n  );\n}\n```\n\n### Area Chart with Gradient\n\n```tsx\nfunction AreaChartExample() {\n  const options = {\n    series: [\n      {\n        type: 'line',\n        data: generateSineWave(100),\n        lineStyle: { color: '#667eea', width: 2 },\n        areaStyle: { color: 'rgba(102, 126, 234, 0.2)' },\n      },\n    ],\n    xAxis: { type: 'value' },\n    yAxis: { type: 'value' },\n  };\n\n  return \u003cChartGPUChart options={options} style={{ height: '300px' }} /\u003e;\n}\n```\n\n### Using Chart Instance Callbacks\n\n```tsx\nfunction ChartWithCallbacks() {\n  const handleInit = (instance: ChartGPUInstance) =\u003e {\n    console.log('Chart initialized:', instance);\n    \n    // Add event listeners\n    instance.on('click', (payload) =\u003e {\n      console.log('Chart clicked:', payload);\n    });\n  };\n\n  const handleDispose = () =\u003e {\n    console.log('Chart cleaned up');\n  };\n\n  return (\n    \u003cChartGPUChart\n      options={options}\n      onInit={handleInit}\n      onDispose={handleDispose}\n      style={{ height: '400px' }}\n    /\u003e\n  );\n}\n```\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Run type checking\nnpm run typecheck\n\n# Build library\nnpm run build\n\n# Run examples in dev mode\nnpm run dev\n```\n\nThe dev server will start at `http://localhost:3000` and open the examples page automatically.\n\n### Local Development with Linked ChartGPU\n\nTo develop `chartgpu-react` against a local version of the `chartgpu` package (useful for testing changes across both repositories):\n\n```bash\n# 1. Link the chartgpu package from the sibling repo\ncd ../chart-gpu\nnpm link\n\n# 2. Link chartgpu into this project\ncd ../chartgpu-react\nnpm link chartgpu\n\n# 3. Build and run - will use the linked local package\nnpm run build\nnpm run dev\n```\n\n**Note:** After linking, `npm run build` and `npm run dev` will resolve imports to your local `chartgpu` package instead of the published version. This allows you to test changes in both repos simultaneously.\n\nTo unlink and return to the published package:\n\n```bash\nnpm unlink chartgpu\nnpm install\n```\n\n## Type Exports\n\nThe package re-exports common types from ChartGPU for convenience:\n\n```typescript\nimport type {\n  ChartGPUInstance,\n  ChartGPUOptions,\n  ChartGPUEventPayload,\n  ChartGPUCrosshairMovePayload,\n  AreaSeriesConfig,\n  LineSeriesConfig,\n  BarSeriesConfig,\n  PieSeriesConfig,\n  ScatterSeriesConfig,\n  SeriesConfig,\n  DataPoint,\n} from 'chartgpu-react';\n```\n\n## Technical Details\n\n### Async Initialization Safety\n\nThe component uses a mounted ref pattern to prevent React state updates after unmount:\n\n```typescript\nuseEffect(() =\u003e {\n  mountedRef.current = true;\n  \n  const initChart = async () =\u003e {\n    const instance = await ChartGPU.create(container, options);\n    \n    // Only update state if still mounted\n    if (mountedRef.current) {\n      instanceRef.current = instance;\n    } else {\n      // Dispose immediately if unmounted during async create\n      instance.dispose();\n    }\n  };\n  \n  initChart();\n  \n  return () =\u003e {\n    mountedRef.current = false;\n    instanceRef.current?.dispose();\n  };\n}, []);\n```\n\nThis pattern ensures:\n1. No memory leaks from orphaned chart instances\n2. No React warnings about setState on unmounted components\n3. Clean resource cleanup even if creation takes time\n\n### Options Updates\n\nOptions changes trigger `setOption()` on the existing instance rather than recreating the chart:\n\n```typescript\nuseEffect(() =\u003e {\n  instanceRef.current?.setOption(options);\n}, [options]);\n```\n\nThis provides better performance for dynamic data updates.\n\n## Browser Compatibility\n\nWebGPU is required. Check support at runtime:\n\n```typescript\nconst checkSupport = async () =\u003e {\n  if (!('gpu' in navigator)) {\n    console.warn('WebGPU not supported');\n    return false;\n  }\n  return true;\n};\n```\n\n## License\n\nMIT\n\n## Related Projects\n\n- [ChartGPU](https://github.com/ChartGPU/ChartGPU) - Core WebGPU charting library\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchartgpu%2Fchartgpu-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchartgpu%2Fchartgpu-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchartgpu%2Fchartgpu-react/lists"}