Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jherdman/ember-cli-chartist
Ember Addon for Chartist.js
https://github.com/jherdman/ember-cli-chartist
chartist ember ember-addon
Last synced: about 1 month ago
JSON representation
Ember Addon for Chartist.js
- Host: GitHub
- URL: https://github.com/jherdman/ember-cli-chartist
- Owner: jherdman
- License: mit
- Created: 2015-01-08T05:58:23.000Z (about 10 years ago)
- Default Branch: main
- Last Pushed: 2022-07-20T20:49:07.000Z (over 2 years ago)
- Last Synced: 2024-12-10T02:11:03.784Z (about 2 months ago)
- Topics: chartist, ember, ember-addon
- Language: JavaScript
- Homepage:
- Size: 2.57 MB
- Stars: 58
- Watchers: 2
- Forks: 22
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Chartist.js for Ember-CLI Projects
[](https://emberobserver.com/addons/ember-cli-chartist)
This is an ember-cli wrapper for [Chartist](https://github.com/gionkunz/chartist-js).
It allows you to render Chartist charts in your templates using components.
## Important note
- You should probably not use this addon as Chartist is not maintained.
- Per the previous **this package is also in maintenance mode only**
- Consider easing your upgrade burden by copying the component code to your
application (along with the license) as this is MIT licensed.
## Compatibility
- Ember.js v3.20 or above
- Ember CLI v3.20 or above
- ember-auto-import v2 required
- Node.js v12 or above
## Setup
In an existing ember-cli project. Install with:
```shell
ember install ember-cli-chartist
```
In the template where you want the chart to appear:
```hbs
```
- `data` is an optional attribute. Its value should be an object. Check the
[Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get)
for expected data structure.
- `type` is a required attribute. It can be any of the recognized chat types.
### Where does the data come from?
The data can be specified in an Ember route or controller. In the example above it's coming from the model which is defined in the route.
`/app/routes/application.js`
```javascript
import Route from '@ember/routing/route';
export default class ApplicationRoute extends Route {
model() {
return {
chartData: {
labels: ['Day1', 'Day2', 'Day3'],
series: [
[5, 4, 8],
[10, 2, 7],
[8, 3, 6],
],
},
};
}
}
```
### Chart types
There are three types of charts; line, bar, and pie. The default is line. You can change the chart type using the `type` attribute.
`/app/templates/application.hbs`
```hbs
```
### Responsive scaling
Chartist charts scale up and down in size. They do so at specified ratios. You can change the ratio using the `ratio` attribute.
`/app/templates/application.hbs`
```hbs
```
See [Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#creating-a-chart-using-aspect-ratios)
for the full list of ratios and info on how to create your own.
### Chart configuration
Chartist charts have a whole bunch of cool configuration options. You can pass
those to the `chartist-chart` components with the `options` attribute. You'll
need to create the options object in a similar way as you do for the `data`
attribute object.
`/app/templates/application.hbs`
```hbs
```
`/app/controllers/application.js`
```javascript
import Controller from '@ember/controller';
export default ApplicationController extends Controller {
chartOptions = {
showArea: true,
lineSmooth: false,
axisX: {
showGrid: false
}
};
};
```
See the [Chartist docs](http://gionkunz.github.io/chartist-js/api-documentation.html)
for all available config options. There's bunch of good-uns!
#### Responsive config
You can also configure your charts based on media queries. The same
configuration options are available, but you provide them via the `responsiveOptions`
attribute. They can be used in tandem with standard `options`.
```hbs
```
`/app/controllers/application.js`
```javascript
import Controller from '@ember/controller';
export default ApplicationController extends Controller {
chartResOptions = [
['screen and (min-width: 640px)', {
showArea: true,
lineSmooth: false,
axisX: {
showLabel: false
}
}]
];
};
```
#### Other configuration
There are other ways to configure chartist-chart components that are specific to
the addon.
`updateOnData`: By default, when the data associated with a chartist-chart is
changed, the chart will be updated to reflect the data. That can be turned off
by setting updateOnData to false. Note: If you use this option, you will have
to manually draw and redraw the chart using Chartist methods.
```hbs
```
### Custom CSS
If you want to use custom CSS you can tell the addon to not include the compiled version.
In your app's `ember-cli-build.js`:
```javascript
let app = new EmberApp({
'ember-cli-chartist': {
useCustomCSS: true,
},
});
```
If you use custom CSS, you'll likely want to import the Chartist Scss into your
app's scss, you will need to install [ember-cli-sass](https://www.npmjs.com/package/ember-cli-sass).
You can then import the Chartist scss with:
In `app.scss`
```scss
@import 'chartist/chartist.scss';
```
you can also import the Chartist settings scss:
```scss
@import 'chartist/chartist-settings.scss';
```
For more on custom styles see the [Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#the-sass-way)
## Extending `chartist-chart`
Care has been taken to provide as many knobs and parameters as you'd need to **NOT**
extend the `