This Ember CLI addon is a simple wrapper for ChartJS.
It's a fork of busy-web/ember-cli-chartjs which removes most of the custom features (predefined styles, options) and ports it to typescript.
- Ember.js v3.12 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
ember install @makepanic/ember-cli-chartjs
Before using the component, you have to load chart.js
.
To do this, await the result of the ensureChartjs
method.
This change was made, because usually it's better to lazily load the dependency as not every route needs charts.
import Route from '@ember/routing/route';
import { ensureChartjs } from '@makepanic/ember-cli-chartjs/components/ember-chart';
export default class ChartRoute extends Route {
beforeModel(){
return ensureChartjs();
}
}
In your handlebars template just do:
{{ember-chart type=CHARTTYPE data=CHARTDATA options=CHARTOPTIONS width=CHARTWIDTH height=CHARTHEIGHT}}
- CHARTTYPE: String; one of the following --
line
,bar
,radar
,polarArea
,pie
ordoughnut
. - 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.
{{ember-chart type='Pie' data=model.chartData width=200 height=200}}
See the Contributing guide for details.
This project is licensed under the MIT License.