{"id":31900790,"url":"https://github.com/dsnchz/solid-highcharts","last_synced_at":"2025-10-13T12:27:48.274Z","repository":{"id":297289027,"uuid":"995636510","full_name":"dsnchz/solid-highcharts","owner":"dsnchz","description":"A SolidJS wrapper for Highcharts with full reactivity, lifecycle management, and TypeScript support.","archived":false,"fork":false,"pushed_at":"2025-06-13T21:03:25.000Z","size":109,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-21T13:40:46.843Z","etag":null,"topics":["analysis","charting-library","charts","charts-api","data-visualization","finance","solidjs","visualization"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dsnchz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-03T19:39:51.000Z","updated_at":"2025-06-27T16:04:50.000Z","dependencies_parsed_at":"2025-06-05T00:04:24.436Z","dependency_job_id":"e5692c3c-f521-4222-a3e1-769788cdd7f4","html_url":"https://github.com/dsnchz/solid-highcharts","commit_stats":null,"previous_names":["dsnchz/solid-highcharts"],"tags_count":2,"template":false,"template_full_name":"thedanchez/template-solidjs-library","purl":"pkg:github/dsnchz/solid-highcharts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-highcharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-highcharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-highcharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-highcharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dsnchz","download_url":"https://codeload.github.com/dsnchz/solid-highcharts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-highcharts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279015061,"owners_count":26085643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["analysis","charting-library","charts","charts-api","data-visualization","finance","solidjs","visualization"],"created_at":"2025-10-13T12:27:43.217Z","updated_at":"2025-10-13T12:27:48.259Z","avatar_url":"https://github.com/dsnchz.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=Ecosystem\u0026background=tiles\u0026project=solid-highcharts\" alt=\"solid-highcharts\"\u003e\n\u003c/p\u003e\n\n# @dschz/solid-highcharts\n\n[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)\n[![Highcharts](https://img.shields.io/badge/highcharts-12.0.0+-orange?style=flat-square)](https://github.com/highcharts/highcharts)\n[![npm version](https://img.shields.io/npm/v/@dschz/solid-highcharts?color=blue)](https://www.npmjs.com/package/@dschz/solid-highcharts)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@dschz/solid-highcharts)](https://bundlephobia.com/package/@dschz/solid-highcharts)\n[![JSR](https://jsr.io/badges/@dschz/solid-highcharts/score)](https://jsr.io/@dschz/solid-highcharts)\n[![CI](https://github.com/dsnchz/solid-highcharts/actions/workflows/ci.yaml/badge.svg)](https://github.com/dsnchz/solid-highcharts/actions/workflows/ci.yaml)\n[![Discord](https://img.shields.io/badge/Discord-%235865F2.svg?logo=discord\u0026logoColor=white)](https://discord.gg/yVBGJfTfQy)\n\nA comprehensive SolidJS wrapper for [Highcharts](https://www.highcharts.com/) that provides type-safe, reactive chart components with proper lifecycle management.\n\n## ✨ Features\n\n- 🎯 **Type-Safe**: Full TypeScript support with proper type inference\n- ⚡ **Reactive**: Seamless integration with SolidJS reactivity system\n- 🏗️ **Modular**: Support for all Highcharts variants (Core, Stock, Maps, Gantt)\n- 🧹 **Clean**: Automatic cleanup and memory management\n- 📱 **Responsive**: Built-in responsive chart behavior\n- 🎨 **Customizable**: Full access to Highcharts configuration options\n\n## ⚖️ Licensing\n\n**Important**: This wrapper library (`@dschz/solid-highcharts`) is MIT licensed, but **Highcharts itself is a commercial product** that requires a license for most use cases.\n\n### Highcharts Licensing\n\n- 🏢 **Commercial Use**: Requires a [Highcharts license](https://shop.highcharts.com/) for commercial projects\n- 🎓 **Non-Commercial**: Free for personal projects, school websites, and non-profit organizations\n- 🧪 **Evaluation**: Free for testing and evaluation purposes\n\n### License Requirements by Use Case\n\n| Use Case                         | Highcharts License Required |\n| -------------------------------- | --------------------------- |\n| Personal/hobby projects          | ❌ **Free**                 |\n| Educational/school websites      | ❌ **Free**                 |\n| Non-profit organizations         | ❌ **Free**                 |\n| Commercial websites/applications | ✅ **License Required**     |\n| SaaS products                    | ✅ **License Required**     |\n| Products for sale                | ✅ **License Required**     |\n\n📋 **Before using Highcharts in your project**, please review the [official Highcharts license terms](https://www.highcharts.com/products/highcharts/#non-commercial) to determine if you need to purchase a license.\n\nThis wrapper library simply provides SolidJS integration - all Highcharts licensing terms apply to your usage of the underlying Highcharts library.\n\n## 📦 Installation\n\n```bash\n# Using npm\nnpm install highcharts @dschz/solid-highcharts\n\n# Using yarn\nyarn install highcharts @dschz/solid-highcharts\n\n# Using pnpm\npnpm install highcharts @dschz/solid-highcharts\n\n# Using bun\nbun install highcharts @dschz/solid-highcharts\n```\n\n### Highcharts Module Usage\n\nAll Highcharts functionality is available from the single `highcharts` package via different import paths.\n\n**⚠️ Important: Import order matters!** Highcharts modules must be imported after the core module.\n\n**📦 Highcharts v12+**: As of Highcharts version 12, you should use ESM import paths for better compatibility and tree-shaking. The examples below show the recommended ESM imports.\n\n```tsx\n// Core Highcharts (standard charts) - ESM import\nimport Highcharts from \"highcharts/esm/highcharts\";\n\n// Stock Charts (financial/time-series data) - ESM import\nimport HighchartsStock from \"highcharts/esm/highstock\";\n\n// Maps (geographical data) - ESM import\nimport HighchartsMaps from \"highcharts/esm/highmaps\";\n\n// Gantt Charts (project timelines) - ESM import\nimport HighchartsGantt from \"highcharts/esm/highcharts-gantt\";\n\n// Additional modules (optional) -- ORDER MATTERS! MUST BE IMPORTED AFTER Highcharts IMPORT!\nimport \"highcharts/esm/modules/accessibility\";\nimport \"highcharts/esm/modules/exporting\";\nimport \"highcharts/esm/modules/export-data\";\n```\n\nSee this [post](https://www.highcharts.com/docs/getting-started/version-12) for more details.\n\n**Legacy UMD imports** (pre-v12) are still supported but ESM is recommended:\n\n```tsx\n// Legacy UMD imports (still works but not recommended)\nimport Highcharts from \"highcharts\";\nimport HighchartsStock from \"highcharts/highstock\";\nimport HighchartsMaps from \"highcharts/highmaps\";\nimport HighchartsGantt from \"highcharts/highcharts-gantt\";\n\n// Additional modules (optional) -- ORDER MATTERS! MUST BE IMPORTED AFTER Highcharts IMPORT!\nimport \"highcharts/modules/accessibility\";\nimport \"highcharts/modules/exporting\";\nimport \"highcharts/modules/export-data\";\n```\n\n### API Quick Start\n\nThis library exposes four factory functions that create the Highcharts components to use in your Solid application.\n\n#### Basic Chart\n\n```tsx\nimport Highcharts from \"highcharts/esm/highcharts\";\nimport { createChart } from \"@dschz/solid-highcharts\";\n\n// Highcharts Chart component\nconst Chart = createChart(Highcharts);\n```\n\n#### Stock Chart\n\n```tsx\n// To create a StockChart\nimport Highcharts from \"highcharts/esm/highstock\";\nimport { createStockChart } from \"@dschz/solid-highcharts\";\n\n// Highcharts StockChart component\nconst StockChart = createStockChart(Highcharts);\n```\n\n#### Map Chart\n\n```tsx\n// To create a MapChart\nimport Highcharts from \"highcharts/esm/highmaps\";\nimport { createMapChart } from \"@dschz/solid-highcharts\";\n\n// Highcharts MapChart component\nconst MapChart = createMapChart(Highcharts);\n```\n\n#### Gantt Chart\n\n```tsx\n// To create a GanttChart\nimport Highcharts from \"highcharts/esm/highcharts-gantt\";\nimport { createGanttChart } from \"@dschz/solid-highcharts\";\n\n// Highcharts GanttChart component\nconst GanttChart = createGanttChart(Highcharts);\n```\n\n#### Accessibility / Exporting Modules\n\nFor additional modules like `exporting` and `accessibility`, you simply import them to register with Highcharts:\n\n```tsx\nimport Highcharts from \"highcharts/esm/highcharts\";\nimport \"highcharts/esm/modules/accessibility\";\nimport \"highcharts/esm/modules/exporting\";\nimport \"highcharts/esm/modules/export-data\";\n\nimport { createChart } from \"@dschz/solid-highcharts\";\n\nconst Chart = createChart(Highcharts);\n```\n\n**Note**: You may need to disable import sorting rules (like `simple-import-sort` or Prettier) for these imports to prevent automatic reordering that would break functionality as the additional modules must be imported **AFTER** the target Highcharts module import.\n\n## 🔧 Component Props\n\nAll chart components returned from the factory functions accept the same props interface:\n\n```tsx\ntype HighchartOptions = Highcharts.Options \u0026 {\n  animation?: boolean | Partial\u003cAnimationOptionsObject\u003e;\n};\n\ntype HighchartsComponentProps = HighchartOptions \u0026 {\n  /** CSS class for container */\n  class?: string;\n\n  /** CSS styles for container */\n  style?: JSX.CSSProperties;\n\n  /** Access to container element */\n  ref?: (container: HTMLDivElement) =\u003e void;\n\n  /** Callback when chart is created */\n  onCreateChart?: (chart: Highcharts.Chart) =\u003e void;\n};\n```\n\n### Props Examples\n\n```tsx\n// Basic styling\n\u003cChart\n  class=\"my-chart\"\n  style={{ height: '400px', border: '1px solid #ccc' }}\n  title={{ text: 'Styled Chart' }}\n  series={[{ type: 'line', data: [1, 2, 3] }]}\n/\u003e\n\n// Chart reference and callbacks\n\u003cChart\n  ref={(container) =\u003e console.log('Container:', container)}\n  onCreateChart={(chart) =\u003e {\n    // Access chart instance\n    chart.setTitle({ text: 'Updated Title' });\n\n    // Add custom event listeners\n    chart.container.addEventListener('click', () =\u003e {\n      console.log('Chart clicked!');\n    });\n  }}\n  series={[{ type: 'line', data: [1, 2, 3] }]}\n/\u003e\n```\n\n## 🎨 Styling and Theming\n\n### CSS Styling\n\n```css\n/* Global chart container styles */\n.highcharts-container {\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Custom chart class */\n.my-chart {\n  background: #f5f5f5;\n  padding: 16px;\n}\n\n/* Responsive behavior */\n.chart-responsive {\n  width: 100%;\n  height: 400px;\n  min-height: 300px;\n}\n\n@media (max-width: 768px) {\n  .chart-responsive {\n    height: 300px;\n  }\n}\n```\n\n### Highcharts Theming\n\n```tsx\nimport Highcharts from \"highcharts/esm/highcharts\";\nimport { createChart } from \"@dschz/solid-highcharts\";\n\n// Apply global theme\nHighcharts.setOptions({\n  colors: [\"#058DC7\", \"#50B432\", \"#ED561B\", \"#DDDF00\"],\n  chart: {\n    backgroundColor: \"#f9f9f9\",\n    style: {\n      fontFamily: \"Inter, sans-serif\",\n    },\n  },\n  title: {\n    style: {\n      color: \"#333\",\n      fontSize: \"18px\",\n    },\n  },\n});\n\nconst Chart = createChart(Highcharts);\n```\n\n## 📈 Performance Tips\n\n### 1. Use Chart Boost for Large Datasets\n\n```tsx\nimport Highcharts from \"highcharts/esm/highcharts\";\nimport \"highcharts/esm/modules/boost\";\n\n\u003cChart\n  boost={{\n    useGPUTranslations: true,\n    seriesThreshold: 50,\n  }}\n  series={[\n    {\n      type: \"line\",\n      data: largeDataset, // 1000+ points\n      boostThreshold: 100,\n    },\n  ]}\n/\u003e;\n```\n\n## 🤝 Contributing\n\nAll contributions are welcome! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n### Development Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/dsnchz/solid-highcharts.git\ncd solid-highcharts\n\n# Install dependencies\nbun install\n\n# Run tests\nbun test\n\n# Build the library\nbun run build\n\n# Start development server\nbun start\n```\n\n## 📄 License\n\nMIT © [Daniel Sanchez](https://github.com/dsnchz)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsnchz%2Fsolid-highcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdsnchz%2Fsolid-highcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsnchz%2Fsolid-highcharts/lists"}