{"id":15644981,"url":"https://github.com/jherdman/ember-cli-chartist","last_synced_at":"2025-08-20T12:31:52.512Z","repository":{"id":25519471,"uuid":"28951359","full_name":"jherdman/ember-cli-chartist","owner":"jherdman","description":"Ember Addon for Chartist.js","archived":false,"fork":false,"pushed_at":"2022-07-20T20:49:07.000Z","size":2693,"stargazers_count":58,"open_issues_count":7,"forks_count":22,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-10T02:11:03.784Z","etag":null,"topics":["chartist","ember","ember-addon"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jherdman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-08T05:58:23.000Z","updated_at":"2024-05-30T02:21:46.000Z","dependencies_parsed_at":"2022-07-26T07:02:11.645Z","dependency_job_id":null,"html_url":"https://github.com/jherdman/ember-cli-chartist","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jherdman%2Fember-cli-chartist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jherdman%2Fember-cli-chartist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jherdman%2Fember-cli-chartist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jherdman%2Fember-cli-chartist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jherdman","download_url":"https://codeload.github.com/jherdman/ember-cli-chartist/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230423563,"owners_count":18223435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chartist","ember","ember-addon"],"created_at":"2024-10-03T12:03:51.491Z","updated_at":"2024-12-19T11:12:40.559Z","avatar_url":"https://github.com/jherdman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chartist.js for Ember-CLI Projects\n\n[![Ember Observer Score](https://emberobserver.com/badges/ember-cli-chartist.svg)](https://emberobserver.com/addons/ember-cli-chartist)\n\nThis is an ember-cli wrapper for [Chartist](https://github.com/gionkunz/chartist-js).\nIt allows you to render Chartist charts in your templates using components.\n\n## Important note\n\n- You should probably not use this addon as Chartist is not maintained.\n- Per the previous **this package is also in maintenance mode only**\n- Consider easing your upgrade burden by copying the component code to your\n  application (along with the license) as this is MIT licensed.\n\n## Compatibility\n\n- Ember.js v3.20 or above\n- Ember CLI v3.20 or above\n- ember-auto-import v2 required\n- Node.js v12 or above\n\n## Setup\n\nIn an existing ember-cli project. Install with:\n\n```shell\nember install ember-cli-chartist\n```\n\nIn the template where you want the chart to appear:\n\n```hbs\n\u003cChartistChart @type=\"line\" @data={{model.chartData}} /\u003e\n```\n\n- `data` is an optional attribute. Its value should be an object. Check the\n  [Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get)\n  for expected data structure.\n- `type` is a required attribute. It can be any of the recognized chat types.\n\n### Where does the data come from?\n\nThe 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.\n\n`/app/routes/application.js`\n\n```javascript\nimport Route from '@ember/routing/route';\n\nexport default class ApplicationRoute extends Route {\n  model() {\n    return {\n      chartData: {\n        labels: ['Day1', 'Day2', 'Day3'],\n        series: [\n          [5, 4, 8],\n          [10, 2, 7],\n          [8, 3, 6],\n        ],\n      },\n    };\n  }\n}\n```\n\n### Chart types\n\nThere are three types of charts; line, bar, and pie. The default is line. You can change the chart type using the `type` attribute.\n\n`/app/templates/application.hbs`\n\n```hbs\n\u003cChartistChart @type=\"bar\" @data={{model.chartData}} /\u003e\n```\n\n### Responsive scaling\n\nChartist charts scale up and down in size. They do so at specified ratios. You can change the ratio using the `ratio` attribute.\n\n`/app/templates/application.hbs`\n\n```hbs\n\u003cChartistChart @ratio=\"ct-golden-section\" @data={{model.chartData}} /\u003e\n```\n\nSee [Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#creating-a-chart-using-aspect-ratios)\nfor the full list of ratios and info on how to create your own.\n\n### Chart configuration\n\nChartist charts have a whole bunch of cool configuration options. You can pass\nthose to the `chartist-chart` components with the `options` attribute. You'll\nneed to create the options object in a similar way as you do for the `data`\nattribute object.\n\n`/app/templates/application.hbs`\n\n```hbs\n\u003cChartistChart @options={{chartOptions}} @data={{model.chartData}} /\u003e\n```\n\n`/app/controllers/application.js`\n\n```javascript\nimport Controller from '@ember/controller';\n\nexport default ApplicationController extends Controller {\n  chartOptions = {\n    showArea: true,\n    lineSmooth: false,\n\n    axisX: {\n      showGrid: false\n    }\n  };\n};\n```\n\nSee the [Chartist docs](http://gionkunz.github.io/chartist-js/api-documentation.html)\nfor all available config options. There's bunch of good-uns!\n\n#### Responsive config\n\nYou can also configure your charts based on media queries. The same\nconfiguration options are available, but you provide them via the `responsiveOptions`\nattribute. They can be used in tandem with standard `options`.\n\n```hbs\n\u003cChartistChart @responsiveOptions={{chartResOptions}} @data={{model.chartData}} /\u003e\n```\n\n`/app/controllers/application.js`\n\n```javascript\nimport Controller from '@ember/controller';\n\nexport default ApplicationController extends Controller {\n  chartResOptions = [\n    ['screen and (min-width: 640px)', {\n      showArea: true,\n      lineSmooth: false,\n\n      axisX: {\n        showLabel: false\n      }\n    }]\n  ];\n};\n```\n\n#### Other configuration\n\nThere are other ways to configure chartist-chart components that are specific to\nthe addon.\n\n`updateOnData`: By default, when the data associated with a chartist-chart is\nchanged, the chart will be updated to reflect the data. That can be turned off\nby setting updateOnData to false. Note: If you use this option, you will have\nto manually draw and redraw the chart using Chartist methods.\n\n```hbs\n\u003cChartistChart @updateOnData={{false}} /\u003e\n```\n\n### Custom CSS\n\nIf you want to use custom CSS you can tell the addon to not include the compiled version.\n\nIn your app's `ember-cli-build.js`:\n\n```javascript\nlet app = new EmberApp({\n  'ember-cli-chartist': {\n    useCustomCSS: true,\n  },\n});\n```\n\nIf you use custom CSS, you'll likely want to import the Chartist Scss into your\napp's scss, you will need to install [ember-cli-sass](https://www.npmjs.com/package/ember-cli-sass).\nYou can then import the Chartist scss with:\n\nIn `app.scss`\n\n```scss\n@import 'chartist/chartist.scss';\n```\n\nyou can also import the Chartist settings scss:\n\n```scss\n@import 'chartist/chartist-settings.scss';\n```\n\nFor more on custom styles see the [Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#the-sass-way)\n\n## Extending `chartist-chart`\n\nCare has been taken to provide as many knobs and parameters as you'd need to **NOT**\nextend the `\u003cChartistChart` component. Pass in data you need. The component _does_\nyield its template _above_ the chart.\n\nShould you find yourself needing to extend the base class please open an issue.\n\n## Using Plugins\n\n1. Add the plugin of your choice to your dependencies, e.g. `yarn add -D chartist-plugin-fill-donut`\n2. In `ember-cli-build.js` import your plugin, e.g. `app.import('node_modules/chartist-plugin-fill-donut/dist/chartist-plugin-fill-donut.js');`\n3. In your `chartOptions` object add the plugin, e.g.\n\n```javascript\nchartOptions = {\n  plugins: [\n    Chartist.plugins.fillDonut({\n      // config of plugin\n    }),\n  ],\n};\n```\n\n## Live examples\n\nThere is an example app included in this repo in `/tests/dummy/`. It contains examples of most of the functionality described above. To view those\nexamples you'll need to clone this repo and start the Ember cli server.\n\n```shell\ngit clone https://github.com/jherdman/ember-cli-chartist.git\ncd ember-cli-chartist\nember serve\n```\n\nThe example app will be running at [http://localhost:4200](http://localhost:4200)\n\n## How do I Test My Chart?\n\nAsserting on characteristics of your chart is kind of hard as it's an SVG\nrendering. Tools like Percy may be of help with ensuring your chart looks the way\nit should. We do have an [issue open](https://github.com/jherdman/ember-cli-chartist/issues/85)\nand are interested in pull requests to help with this matter.\n\nConsider, however, that your chart may be difficult to read for people that are\nvisually impaired. Consider implementing an\n[accessible data table](https://a11yproject.com/posts/accessible-data-tables/) \u0026mdash;\nthese are vastly easier to make assertions on. Note that we do not provide tooling\nfor this as it's out of scope for this library, and is probably too close to your\nbusiness domain to meaningfully abstract.\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjherdman%2Fember-cli-chartist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjherdman%2Fember-cli-chartist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjherdman%2Fember-cli-chartist/lists"}