Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including ember-cli-chart with all npm packages installed. Try it out:

var emberCliChart = require("ember-cli-chart")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ember-cli-chart v3.7.2

Ember component for ChartJS

Ember Chart

Build Status Ember Observer Score

This Ember CLI addon is a simple wrapper for ChartJS (v2.9).

Compatibility

  • Ember.js v3.12 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above

Installation

$ ember install ember-cli-chart

Usage

In your handlebars template just do:

{{ember-chart
  type=CHARTTYPE
  data=CHARTDATA
  options=CHARTOPTIONS
  width=CHARTWIDTH
  height=CHARTHEIGHT
  plugins=CHARTPLUGINS
  customLegendElement=CUSTOMLEGENDELEMENT
}}
  • 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

{{ember-chart type='pie' data=model.chartData width=200 height=200}}

More Resources

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free