Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahmadsoe/ember-highcharts
A Highcharts, HighStock and HighMaps component for ember cli
https://github.com/ahmadsoe/ember-highcharts
Last synced: about 2 months ago
JSON representation
A Highcharts, HighStock and HighMaps component for ember cli
- Host: GitHub
- URL: https://github.com/ahmadsoe/ember-highcharts
- Owner: ahmadsoe
- License: mit
- Created: 2014-11-19T02:36:44.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-07-26T13:46:17.000Z (2 months ago)
- Last Synced: 2024-07-27T13:58:54.093Z (2 months ago)
- Language: JavaScript
- Homepage: https://ahmadsoe.github.io/ember-highcharts/
- Size: 3.76 MB
- Stars: 140
- Watchers: 11
- Forks: 84
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-ember - ember-highcharts - A Highcharts, HighStock and HighMaps components for ember-cli. (Packages / Charts)
README
[](https://github.com/ahmadsoe/ember-highcharts/actions/workflows/ci.yml)
[](http://emberobserver.com/addons/ember-highcharts)
[](https://codeclimate.com/github/ahmadsoe/ember-highcharts)
[](https://badge.fury.io/js/ember-highcharts)
# ember-highcharts
A [Highcharts](http://www.highcharts.com/products/highcharts), [Highstock](http://www.highcharts.com/products/highstock),
and [Highmaps](http://www.highcharts.com/products/highmaps) component for [Ember CLI](http://www.ember-cli.com/).
## Compatibility
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
## Legacy versions
- If you need support for Ember < 3, use ember-highcharts < v1.2.0
- If you need support for Ember < 2.12.0, use ember-highcharts < v1.0.0
- If you need support for Ember < 1.13.0, use ember-highcharts v0.1.3
## Installation
```
ember install ember-highcharts
```
## Usage
This component takes in five arguments:
```handlebars
```
### mode
The `mode` argument is optional and it determines whether to use Highcharts, Highstock, or Highmaps.
The possible values are:
| Value | Description |
| ------------ | --------------------------- |
| falsy value | defaults to Highcharts mode |
| "StockChart" | uses Highstock mode |
| "Map" | uses Highmaps mode |
| "Gantt" | uses Highcharts Gantt mode |
### chartOptions
The `chartOptions` argument is a generic object for setting different options with Highcharts/Highstock/Highmaps.
Use this option to set things like the chart title and axis settings.
### content
The `content` argument matches up with the `series` option in the Highcharts/Highstock/Highmaps API.
Use this option to set the series data for your chart.
### theme
The `theme` argument is optional and it allows you to pass in a
[Highcharts theme](http://www.highcharts.com/docs/chart-design-and-style/themes).
### callback
The `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)).
### Example Bar Chart
Here's an example of how to create a basic bar chart:
```js
// component.js
import Component from '@glimmer/component';
import defaultTheme from '../themes/default-theme';
export default class BarBasic extends Component {
chartOptions = {
chart: {
type: 'bar',
},
title: {
text: 'Fruit Consumption',
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges'],
},
yAxis: {
title: {
text: 'Fruit eaten',
},
},
};
chartData = [
{
name: 'Jane',
data: [1, 0, 4],
},
{
name: 'John',
data: [5, 7, 3],
},
];
theme = defaultTheme;
}
```
```handlebars
```
Check out more chart examples in the [tests/dummy app](tests/dummy/app) in this repo.
## Configuration
### Highstock, Highmaps, etc
We now use dynamic imports to import the Highcharts packages you need based on the `mode` argument passed.
### Global Highcharts Config Options
Ember-highcharts provides its own set of default configurations in `addon/utils/option-loader.js`.
At runtime you can optionally configure custom styles by providing a `app/highcharts-configs/application.js` file.
This file should provide a hook that returns the final configuration.
```js
// app/highcharts-configs/application.js
export default function (defaultOptions) {
defaultOptions.credits.href = 'http://www.my-great-chart.com';
defaultOptions.credits.text = 'great charts made cheap';
defaultOptions.credits.enabled = true;
return defaultOptions;
}
```
### Generating Chart Components
Ember-highcharts also provides blueprints to easily create sub-classes of the default high-charts component.
```bash
ember generate chart
```
### Obtaining a Reference to the Chart Instance
The `chart` instance is exposed to the yielded content if used in block form:
```handlebars
```
_where `` is an example component that may wish to access the `chart` instance_.
## Contributing
See [contributing guidelines](CONTRIBUTING.md).
## Changelog
See [CHANGELOG.md](CHANGELOG.md).
## Licensing
Highcharts has its own seperate [licensing agreement](https://shop.highsoft.com/highcharts).
The ember-highcharts addon is released under the MIT license.
## Credit
This add-on is built based on the [gist](https://gist.github.com/poteto/cd2bb47e77bf87c94d33) and
[medium](https://medium.com/delightful-ui-for-ember-apps/using-highcharts-js-in-an-ember-app-18a65d611644)
by [@poteto](https://github.com/poteto)