https://github.com/adopted-ember-addons/ember-cli-chart

A simple ember component for adding Charts
https://github.com/adopted-ember-addons/ember-cli-chart

Last synced: about 1 month ago
JSON representation

A simple ember component for adding Charts

• Host: GitHub
• URL: https://github.com/adopted-ember-addons/ember-cli-chart
• Owner: adopted-ember-addons
• License: mit
• Created: 2014-09-14T00:45:30.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2024-12-16T10:55:23.000Z (10 months ago)
• Last Synced: 2025-04-04T02:06:46.417Z (6 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.org/package/ember-cli-chart
• Size: 1.55 MB
• Stars: 138
• Watchers: 9
• Forks: 76
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Ember Chart

[![CI](https://github.com/aomran/ember-cli-chart/actions/workflows/ci.yml/badge.svg?event=push)](https://github.com/aomran/ember-cli-chart/actions/workflows/ci.yml)

[![Ember Observer Score](https://emberobserver.com/badges/ember-cli-chart.svg)](https://emberobserver.com/addons/ember-cli-chart)

This Ember CLI addon is a simple wrapper for [ChartJS](http://www.chartjs.org/) (v3.5).

### Compatibility

* Ember.js v3.20 or above

* Ember CLI v3.20 or above

* Node.js v12 or above

### Installation

```

$ ember install ember-cli-chart

```

### Usage

In your handlebars template just do:

```hbs

```

- CHARTTYPE: String; one of the following -- `line`, `bar`, `radar`, `polarArea`, `pie` or `doughnut`.

- CHARTDATA: Array; refer to the ChartJS documentation

- CHARTOPTIONS: Object; refer to the ChartJS documentation. This is optional.

- CHARTWIDTH: Number; pixel width of the canvas element. Only applies if the chart is NOT responsive.

- CHARTHEIGHT: Number; pixel height of the canvas element. Only applies if the chart is NOT responsive.

- CHARTPLUGINS: Array; refer to ChartJS documentaion. This is optional.

- CUSTOMLEGENDELEMENT: HTMLElement; A custom element to put a custom legend in, when using `legendCallback`. This is optional.

#### Example

```

```

#### More Resources

- [Screencast on creating bar charts with ember-cli-chart](https://www.emberscreencasts.com/posts/46-bar-charts-with-ember-cli-chart)