{"id":13805304,"url":"https://github.com/ahmadsoe/ember-highcharts","last_synced_at":"2025-05-13T19:30:42.976Z","repository":{"id":23476064,"uuid":"26840868","full_name":"ahmadsoe/ember-highcharts","owner":"ahmadsoe","description":"A Highcharts, HighStock and HighMaps component for ember cli","archived":false,"fork":false,"pushed_at":"2025-05-06T11:36:25.000Z","size":4420,"stargazers_count":141,"open_issues_count":10,"forks_count":86,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-06T12:47:24.559Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ahmadsoe.github.io/ember-highcharts/","language":"JavaScript","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/ahmadsoe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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}},"created_at":"2014-11-19T02:36:44.000Z","updated_at":"2025-05-06T11:35:44.000Z","dependencies_parsed_at":"2024-01-09T05:01:01.049Z","dependency_job_id":"66402635-9667-4dbd-b3ac-faa9e9581d0f","html_url":"https://github.com/ahmadsoe/ember-highcharts","commit_stats":{"total_commits":335,"total_committers":36,"mean_commits":9.305555555555555,"dds":0.6417910447761195,"last_synced_commit":"0006ebebfccd6f0d5ff47c92271ac2186566f27f"},"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadsoe%2Fember-highcharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadsoe%2Fember-highcharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadsoe%2Fember-highcharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadsoe%2Fember-highcharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahmadsoe","download_url":"https://codeload.github.com/ahmadsoe/ember-highcharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254012967,"owners_count":21999345,"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","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":[],"created_at":"2024-08-04T01:00:59.805Z","updated_at":"2025-05-13T19:30:42.625Z","avatar_url":"https://github.com/ahmadsoe.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":["Charts"],"readme":"[![CI](https://github.com/ahmadsoe/ember-highcharts/actions/workflows/ci.yml/badge.svg)](https://github.com/ahmadsoe/ember-highcharts/actions/workflows/ci.yml)\n[![Ember Observer Score](http://emberobserver.com/badges/ember-highcharts.svg)](http://emberobserver.com/addons/ember-highcharts)\n[![Code Climate](https://codeclimate.com/github/ahmadsoe/ember-highcharts/badges/gpa.svg)](https://codeclimate.com/github/ahmadsoe/ember-highcharts)\n[![npm version](https://badge.fury.io/js/ember-highcharts.svg)](https://badge.fury.io/js/ember-highcharts)\n\n# ember-highcharts\n\nA [Highcharts](http://www.highcharts.com/products/highcharts), [Highstock](http://www.highcharts.com/products/highstock),\nand [Highmaps](http://www.highcharts.com/products/highmaps) component for [Ember CLI](http://www.ember-cli.com/).\n\n## Compatibility\n\n- Ember.js v3.28 or above\n- Ember CLI v3.28 or above\n\n## Legacy versions\n\n- If you need support for Ember \u003c 3, use ember-highcharts \u003c v1.2.0\n- If you need support for Ember \u003c 2.12.0, use ember-highcharts \u003c v1.0.0\n- If you need support for Ember \u003c 1.13.0, use ember-highcharts v0.1.3\n\n## Installation\n\n```\nember install ember-highcharts\n```\n\n## Usage\n\nThis component takes in five arguments:\n\n```handlebars\n\u003cHighCharts\n  @mode={{this.mode}}\n  @chartOptions={{this.chartOptions}}\n  @content={{this.content}}\n  @theme={{this.theme}}\n  @callback={{this.callBackFunc}}\n/\u003e\n```\n\n### mode\n\nThe `mode` argument is optional and it determines whether to use Highcharts, Highstock, or Highmaps.\nThe possible values are:\n\n| Value        | Description                 |\n| ------------ | --------------------------- |\n| falsy value  | defaults to Highcharts mode |\n| \"StockChart\" | uses Highstock mode         |\n| \"Map\"        | uses Highmaps mode          |\n| \"Gantt\"      | uses Highcharts Gantt mode  |\n\n### chartOptions\n\nThe `chartOptions` argument is a generic object for setting different options with Highcharts/Highstock/Highmaps.\nUse this option to set things like the chart title and axis settings.\n\n### content\n\nThe `content` argument matches up with the `series` option in the Highcharts/Highstock/Highmaps API.\nUse this option to set the series data for your chart.\n\n### theme\n\nThe `theme` argument is optional and it allows you to pass in a\n[Highcharts theme](http://www.highcharts.com/docs/chart-design-and-style/themes).\n\n### callback\n\nThe `callback` argument is optional and allows you to pass in a function that runs when the chart has finished loading ([API](https://api.highcharts.com/class-reference/Highcharts.Chart#Chart)).\n\n### Example Bar Chart\n\nHere's an example of how to create a basic bar chart:\n\n```js\n// component.js\nimport Component from '@glimmer/component';\nimport defaultTheme from '../themes/default-theme';\n\nexport default class BarBasic extends Component {\n  chartOptions = {\n    chart: {\n      type: 'bar',\n    },\n    title: {\n      text: 'Fruit Consumption',\n    },\n    xAxis: {\n      categories: ['Apples', 'Bananas', 'Oranges'],\n    },\n    yAxis: {\n      title: {\n        text: 'Fruit eaten',\n      },\n    },\n  };\n\n  chartData = [\n    {\n      name: 'Jane',\n      data: [1, 0, 4],\n    },\n    {\n      name: 'John',\n      data: [5, 7, 3],\n    },\n  ];\n\n  theme = defaultTheme;\n}\n```\n\n```handlebars\n\u003cHighCharts\n  @chartOptions={{this.chartOptions}}\n  @content={{this.chartData}}\n  @theme={{this.theme}}\n/\u003e\n```\n\nCheck out more chart examples in the [test-app/app/components](test-app/app/components) in this repo.\n\n## Configuration\n\n### Highstock, Highmaps, etc\n\nWe now use dynamic imports to import the Highcharts packages you need based on the `mode` argument passed.\n\n### Obtaining a Reference to the Chart Instance\n\nThe `chart` instance is exposed to the yielded content if used in block form:\n\n```handlebars\n\u003cHighCharts\n  @mode={{this.mode}}\n  @chartOptions={{this.chartOptions}}\n  @content={{this.content}}\n  @theme={{this.theme}}\n  as |chart|\n\u003e\n  \u003cMyCustomLegend @chart={{chart}}\u003e\n\u003c/HighCharts\u003e\n```\n\n_where `\u003cMyCustomLegend\u003e` is an example component that may wish to access the `chart` instance_.\n\n## Contributing\n\nSee [contributing guidelines](CONTRIBUTING.md).\n\n## Changelog\n\nSee [CHANGELOG.md](CHANGELOG.md).\n\n## Licensing\n\nHighcharts has its own seperate [licensing agreement](https://shop.highsoft.com/highcharts).\n\nThe ember-highcharts addon is released under the MIT license.\n\n## Credit\n\nThis add-on is built based on the [gist](https://gist.github.com/poteto/cd2bb47e77bf87c94d33) and\n[medium](https://medium.com/delightful-ui-for-ember-apps/using-highcharts-js-in-an-ember-app-18a65d611644)\nby [@poteto](https://github.com/poteto)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadsoe%2Fember-highcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahmadsoe%2Fember-highcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadsoe%2Fember-highcharts/lists"}