node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



Ember addon for the @esri/cedar charting library.

View it live



This addon exposes the {{cedar-chart}} component that you can use to declaratively add a Cedar chart to your ember application.

{{!-- you can pass the definition as an object --}}
  onError=(action 'showError')
{{!-- or you can pass the individual parts of a definition --}}
  onError=(action 'showError')


This addon also exposes a shim you can use to work w/ the cedar library directly:

import cedar from 'cedar';
this.chart = new cedar.Chart(this.elementId, definition);


Below are the instructions for using v0.x.

This addon exposes a component you can use to declaratively add a Cedar chart to your ember application:

  onUpdateStart=(action 'onChartUpdateStart')
  onUpdateEnd=(action 'onChartUpdateEnd')
  onError=(action 'onChartError')
  transform=(action chartTransform')

See the Cedar documentation for details on how to construct a chart specification and other chart parameters.


To consume this addon in any ember application:

ember install ember-cli-cedar


@esri/cedar depends on amCharts, which will be installed locally as an npm dependency. However, you can choose whether your app loads amCharts from local files or from the CDN.

To load amCharts from local files, include the following configuration in ember-cli-build.js:

cedar: {
  amCharts: {
    // publicPath: amCharts will be included at this path in the public folder
    // use this if you are not loading amCharts from the CDN
    publicPath: 'amcharts',
    // imports: an array of amcharts files to be imported (bundled) in vendor files
    imports: [
      // amCharts base lib, this one is required
      // you will likely need at least one of the following:
      'serial.js', // bar and line charts
      'xy.js', // scatter charts
      'pie.js', // pie and donut charts
      'radar.js', // radar charts
      // plugins are complely optioinal
      // this one adds a download button on the chart
  // amCharts uses hardcoded paths to assets (like images and plugin files)
  // so you will need to make sure those don't get fingerprinted
  fingerprint: {
    // this needs to be the same as publicPath above
    exclude: ['amcharts']

To load amCharts from the CDN, simply add the appropriate amCharts scripts and/or styles to your index.html before the vendor.js script:

<!-- load the amCharts base library -->
<script src=""></script>
<!-- for bar, line, and area charts -->
<script src=""></script>
<!-- for pie charts -->
<script src=""></script>
<!-- for scatter and bubble charts -->
<script src=""></script>
<!-- for radar charts -->
<script src=""></script>
<!-- optioinally load the amcharts plugin to export the chart as and image or table -->
<script src=""></script>
<link rel="stylesheet" href="" type="text/css" media="all" />
<script src="{{rootURL}}assets/vendor.js"></script>


Running the Dummy App

After cloning the repository you can test this addon in the dummy app with:

NOTE: Windows users may need to specify an alternate livereload port like:

ember server -lrp 9000

Running in Another App

In the root of this repo run:

npm link

In the consuming app, run:

npm link ember-cli-cedar
ember generate ember-cli-cedar
ember server

Running Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server


  • ember build

For more information on using ember-cli, visit


Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.


Copyright 2017 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's LICENSE file.