willsoto / ng-chartist Goto Github PK

As the SVG elements that chartist renders don't get the _ngcontent attributes added to them, it's not possible to style these graphs using component styles.

Many apologies, you'll have to excuse my ignorance with all things Angular2, TypeScript, typings, npm, etc. I'm only a few hours in to my first Angular project and know next to nothing about the aforementioned technologies.

I seem to be having trouble loading this module. I'm using SystemJS with the following config:

(function () {
    var map = {
        // others
        'angular2-chartist': 'node_modules/angular2-chartist/dist',
        'chartist': 'node_modules/chartist/dist'
    };

    var packages = {
        // others
        'angular2-chartist': { main: 'angular2-chartist', defaultExtension: 'js' },
        'chartist': { main: 'chartist', defaultExtension: 'js' }
    };

    var config = {
        map: map,
        packages: packages
    }

    System.config(config);

})(this);

Now when I try to load the module using the following code in my component, it fails with the build error Cannot find module 'angular2-chartist'.

import { ChartistComponent, ChartType, ChartEvent } from 'angular2-chartist';

The build error goes away if reference the package like so

import { ChartistComponent, ChartType, ChartEvent } from '../../../node_modules/angular2-chartist/src/chartist.component.ts'

however then I get the run time error
Error loading http://localhost:56580/node_modules/angular2-chartist/src/chartist.component.ts as "../../../node_modules/angular2-chartist/src/chartist.component.ts" from http://localhost:56580/app/components/dashboard/dashboard.component.js ; Zone: <root> ; Task: Promise.then ; Value: Error: (SystemJS) Error: XHR error (404 Not Found).

Funnily enough, if after I start debugging the program (I'm using Visual Studio) by fixing the build error like I mentioned above and then subsequently change to the first method of referencing the package without stopping debugging, everything runs successfully. Upon stopping debugging, I then get that build error again. Perhaps this is typical with these sorts of errors, but as a newbie, it seemed strange enough to mention here.

Again, I'm very new to all of this, but I don't seem to have any of the same problems loading other modules. Please let me know if I'm doing something stupid (highly likely I'm sure!) or if there's any further information I can offer that might assist you.

As a side note, previously even angular2-chartist.js was having issues referencing chartist, however I fixed that by running typings install dt~chartist --save --global. Perhaps this should be included in the Installation readme? Or perhaps this is so obvious to those familiar with Angular2 that things like this are not typically mentioned... what do I know?!

Hi,

I'm trying to get data from an API for my chart, until that everything is ok I got my Promise Object.

The question is, how I can refresh the date or update them ? I can't call the update method on my Promise Object ? If I try to recall my API the Promise Object become empty...

chartData: Promise<Chartist.IChartistData>;
  type = 'Line';
  options = {
   axisX: {
      labelInterpolationFnc: function(value: number, index: number): number {
        return index % 10 === 0 ? value : null;
      }
    }
  };

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.chartData = this.dataService.getChartData().toPromise();
  }

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 1.2.0 of puppeteer was just published.

This version is covered by your current version range and after updating it in your project the build failed.

puppeteer is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 3.0.1 of istanbul-instrumenter-loader was just published.

This version is covered by your current version range and after updating it in your project the build failed.

istanbul-instrumenter-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Chartist working great now. However I finally wanted to migrate my code to the latest Ionic 2 RC1 (angular 2 final) and immediately bumped into a problem.

MacBook-Pro:~/Development/Ionic/ble_reflow_rc1$ ionic run android

Running 'run:before' npm script before run

> ionic-hello-world@ build /Users/jens/Development/Ionic/ble_reflow_rc1
> ionic-app-scripts build --dev

[14:33:55]  ionic-app-scripts 0.0.36 
[14:33:55]  build dev started ... 
[14:33:55]  clean started ... 
[14:33:55]  clean finished in 3 ms 
[14:33:55]  copy started ... 
[14:33:55]  transpile started ... 
[14:33:55]  lint started ... 
[14:33:57]  lint finished in 1.45 s 
[14:33:59]  transpile finished in 3.51 s 
[14:33:59]  bundle started ... 
[14:33:59]  copy finished in 3.56 s 
[14:34:05]  bundle failed: 'ChartistModule' is not exported by node_modules/angular2-chartist/dist/angular2-chartist.js 
            (imported by src/app/app.module.ts). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module 
[14:34:05]  ionic-app-script task: "build" 
[14:34:05]  Error: 'ChartistModule' is not exported by node_modules/angular2-chartist/dist/angular2-chartist.js 
            (imported by src/app/app.module.ts). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module 

Not sure but it might be related to the module bundler ionic is using in context with AoT compiler Link. However if I use the --dev argument the JiT compiler should be used and the issue is supposed to go away for the price of a larger and slower app - but it doesn't. Some people suggest that external modules need to be made compliant for AoT....that's why I am raising it here again.

My app.modules.ts:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Main } from '../pages/main/main';
import { Scan } from '../pages/scan/scan';
import { BleComms } from '../providers/blecomms';
import { ChartistModule } from 'angular2-chartist';
import { Chart } from '../pages/main/chart';

@NgModule({
  declarations: [
    Main,
    Scan,
    Chart, 
  ],
  imports: [
    ChartistModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    Main,
    Scan,
  ],
  providers: [BleComms]
})
export class AppModule {}

Any idea?

I want to do a chart like this:

http://gionkunz.github.io/chartist-js/examples.html#example-donut-animation

My chart is working fine, now I want to know how I can add this animation...

Thanks!

Related to #37

The documentation of Chartist states that the interpolation of a chart can be configured.

I found the Interface IChartOptions which defines different types/constants of the Interpolation and is exported as ChartOptions in the chartist.component file.

This knowledge has not been enough for me to implement it, I tried to set it with:
lineSmooth: { Interpolation :"step", }
via the options.
This causes the error "can't assign to properties of (new Boolean(true)): not an object" and I guess I don't set it correctly. But I think I'm close to the solution, because lineSmooth seems to be a keyword.

Can someone provide me the correct way to do this?

I'm trying to use this chart component on a Ionic2 project, but after I install and try to run the project i get this error:

TypeScript error: C:/Users/victo/Documents/DEV/ionic/outclass2/node_modules/angular2-chartist/dist/chartist.component.d.ts(2,27): Error TS2307: Cannot find module 'chartist'.

I installed this way:

npm install [email protected] chartist --save

Someone know's how to fix that?

the following test

  it('should throw an error when an invalid chart type is passed', async(() => {
    let fixture = TestBed.createComponent(ChartistComponent);
    let instance: ChartistComponent = fixture.debugElement.componentInstance;

    instance.data = data['Bar'];
    instance.type = 'NotAChart';

    instance.renderChart().catch((err) => {
      expect(err.message).toBe('NotAChart is not a valid chart type');
    });
  }))

does not work with the latest version of typescript because the compiler will now check that the instance.type is correct statically so it never gets to the exception handler, it just fails to build.

ERROR in .../ng-chartist/test/chartist.component.spec.ts (176,5): Type '"NotAChart"' is not assignable to type '"Pie" | "Bar" | "Line" | Promise<ChartType>'.

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 4.19.0 of eslint was just published.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I'm using Ionic, which has a build script that builds the application for production use using AOT compilation.

This is the error I am getting:

[21:35:00] build prod failed: Unexpected value 'ChartistModule' imported by the module 'AppModule'

And this is the stack:

[21:35:00] Error: Unexpected value 'ChartistModule' imported by the module 'AppModule'
Error: Unexpected value 'ChartistModule' imported by the module 'AppModule'
at D:\xampp\htdocs\qzzy\node_modules@angular\compiler\bundles\compiler.umd.js:14675:33
at Array.forEach (native)
at CompileMetadataResolver._loadNgModuleMetadata (D:\xampp\htdocs\qzzy\node_modules@angular\compiler\bundles\compiler.umd.js:14660:51)
at CompileMetadataResolver.getUnloadedNgModuleMetadata (D:\xampp\htdocs\qzzy\node_modules@angular\compiler\bundles\compiler.umd.js:14636:23)
at addNgModule (D:\xampp\htdocs\qzzy\node_modules@angular\compiler\bundles\compiler.umd.js:12944:43)
at D:\xampp\htdocs\qzzy\node_modules@angular\compiler\bundles\compiler.umd.js:12957:16
at Array.forEach (native)
at _createNgModules (D:\xampp\htdocs\qzzy\node_modules@angular\compiler\bundles\compiler.umd.js:12956:28)
at analyzeNgModules (D:\xampp\htdocs\qzzy\node_modules@angular\compiler\bundles\compiler.umd.js:12700:16)
at analyzeAndValidateNgModules (D:\xampp\htdocs\qzzy\node_modules@angular\compiler\bundles\compiler.umd.js:12704:20)

I'm opening this issue here (as well as on their repo) because I noticed you had an AoT commit, then partial revert, and I would like to know where does it currently stand?

Make it more "copy-pastable" by adding data and a type

Related to #37

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 4.19.1 of eslint was just published.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Using a incorrect chart type value throws a generic
Unhandled Promise rejection: Cannot read property 'apply' of undefined ; Zone: angular ; Task: Promise.then ;
with no reference to angular2-chartist source code in the stack trace.

While this should be handled by the type check on ChartType, there might still be situations where an incorrect chart type might slip through.

A better error message describing the error would be really helpful then.

Version 4.2.3 of @angular/compiler just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/compiler is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hello, I'm getting this issue while serving my application can anyone figure this out?

Version: "ng-chartist": "^1.1.1",

ERROR in node_modules/ng-chartist/dist/chartist.component.d.ts(1,23): error TS2688: Cannot find type definition file for 'chartist'.

Unexpected value 'ChartistModule in 'node_modules/ng-chartist/bundles/ng-chartist.umd.js' imported by the module 'DashboardModule in 'dashboard.module.ts'. Please add a @NgModule annotation.

I get this error now when i try to use Chartist in a Angular 6 project. I have tried with the various suggestions in this #94 but i'm not sure how related they are.

I have also had a look at #124 but tbh i don't understand any of it :)

It works when i run locally but the build command fails. It works fine in a previous project that is not running Angular 6.

Version 1.0.4 of karma-phantomjs-launcher just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As karma-phantomjs-launcher is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 1.0.3 of karma-phantomjs-launcher just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As karma-phantomjs-launcher is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi there,
I am trying to add events on my Bar Chartist in a Ionic app: when I click on a bar, I would like to get information (value and label of the bar) and do stuff with this information. I think that an event is the best way to do so.
I looked into the chartist.js documentation, but I can't find anything else that the "draw" event which is not usefull in my situation...
Is it possible to define a click event on a specific bar of the chart ?
Sorry for my little knowledge of JS and AngularJS :/

My .html file:
<x-chartist [type]=type [data]=data [options]=options [events]=events></x-chartist>

My .ts file:

this.type = "Bar";
this.data = {
//I define labels and series arrays before
      labels: labels,
      series: [series]
    };
this.options = {
//Options about displaying
    };
this.events = {
// ??
      }
    };

i have installed all the dependencies of ng-chartist in angular-cli.
also imported it in the app.module file. But my problem is i cant find the usage with ng2 in chartist documentation. How to use it in html as well as ts file?

Hi!
First of all, It's a great work, thinks!

I have some strange thing, I use a service who execute an HTTP request each 10s, and my component push the result to the x-chartist data attributes. It doesn't refresh the graph until I resize the window.
Any solution ?

Now it throws an error i.e. method not found
ngOnDestroy(): void {
if (this.chart) {
this.chart.detatch();
}
}

shouldn't it be:

ngOnDestroy(): void {
if (this.chart) {
this.chart.detach();
}
}

I would like to use this plugin:
https://github.com/activey/chartist-plugin-line-chart-labels

In my component I have :

this.options = {
      showLine: true,
      showArea: true,
      showPoint: false,
      fullWidth: true,
      plugins: [
        Chartist.plugins.lineChartLabels({
          labels: this.classNames
        })
      ]
    };

It is set in the component constructor. How can I tell x-chartist to update his chart when I change "this.classNames"

the plugin is really great but unfortunately, there is a slight issue when I compile my Ionic application in production. I had to narrow it down to chartist as the entire tab page was blank due to some minification error. I'm on the latest version of Ionic and ng-chartist. My console shows this error

Uncaught TypeError: i is not a function
    at Object.<anonymous> (vendor.js:1)
    at e (vendor.js:1)
    at e.exports (vendor.js:1)
    at vendor.js:1
    at n (vendor.js:1)
    at Object.<anonymous> (vendor.js:1)
    at e (vendor.js:1)
    at Object.631 (main.js:1)
    at e (vendor.js:1)
    at window.webpackJsonp (vendor.js:1)

I import ng chartist in the component module (which is lazy loaded). i.e. portfolio.module.ts

import { ChartistModule } from 'ng-chartist'; and

@NgModule({
  declarations: [
    PortfolioPage,
  ],
  imports: [
    IonicPageModule.forChild(PortfolioPage),
    ChartistModule
  ],
})

imports in portfolio.ts

import * as Chartist from 'chartist';
import { ChartType, ChartEvent } from 'ng-chartist';

export interface Chart {
  type: ChartType;
  data: Chartist.IChartistData;
  options?: any;
  responsiveOptions?: any;
  events?: ChartEvent;
}

Inside my class, I create the chart object with options

  public chart = {
    data: {
      series: [
        [12, 9, 7, 8, 5]
      ]
    },
    type: 'Line',
    options: {
      height: '200px',
      width: '400px,,
      low: 0,
      lineSmooth: Chartist.Interpolation.simple(),
      showPoint: false,
      showLine: false,
      showArea: true,
      fullWidth: true,
      axisX: {
        showLabel: false,
        showGrid: false,
        offset: 0
      },
      axisY: {
        showLabel: false,
        showGrid: false,
        offset: -10
      }
    }
  }

And I finally reference the chart in my html

      <x-chartist class="portfolio-chart" [data]="chart.data" [type]="chart.type" [options]="chart.options"
        [responsiveOptions]="chart.responsiveOptions" [events]="chart.events">
      </x-chartist>

I have tried to import the chartist module in app.module.ts as well but I get template parse errors

Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'x-chartist'.

has anyone come across this issue before? Any help appreciated. I'm on the latest version of Ionic 3.7.1, including its packages and ng-chartist as well

I try to get run the donut animation but getting errors:

Chartist.Svg.Easing.easeOutQuint => Chartist is not defined

also begin does not exist on animationDefinition['stroke-dashoffset']

How can I solve the issue?

Hi there,
I'd like to use angular2-chartist in an Ionic 2 app but I get a Typescript error when running the example code:

TypeScript error: /Users/jens/Development/Ionic/chartist-demo/node_modules/angular2-chartist/dist/chartist.component.d.ts(2,27): Error TS2307: Cannot find module 'chartist'.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ChartistComponent } from 'angular2-chartist';

@Component({
  selector: 'demo-app',
  directives: [ChartistComponent],
  template: `
    <x-chartist
      [data]="data"
      [type]="type"
      [options]="options"
      [responsiveOptions]="responsiveOptions">
    </x-chartist>
  `
})

export class DemoApp {
  constructor(public navCtrl: NavController) {
  }
}

There was a similar issue reported twice and was fixed in version 0.6.0. Any idea why I still get this error?

Thanks,
Jens

I have an Angular 4 / Electron application and I am getting the following error when importing the ChartistMoudule.

Uncaught Error: Unexpected value 'ChartistModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

This seems to be an issue with how dependencies are annotated in the package.json of the library. See the Angular repo thread #15763. Has there been any testing with this module in Angular 4?

Can't get any plugin working with angular-cli. Is there any working sample out there that would shed some light on this. I added chartist.min.js and chartist-plugin-pointlabels.js inside the script tag section of angluar-cli and the following inside the component:
import * as Chartist from 'chartist';

and for the options:

 this.options = {
            fullWidth: true,
            showArea: false,
            showLine: true,
            low: 0,
            chartPadding: {
                right: 40
            },
            axisX: {
                showLabel: true
            },
            axisY: {
                showLabel: true
            },
            plugins: [
                Chartist.plugins.ctPointLabels({
                    textAnchor: 'middle'
                })
            ]
        };

But I am getting this error: Uncaught (in promise): TypeError: Cannot read property 'ctPointLabels' of undefined

I tried a simple example and only get black pie charts. Any idea why?

TS:

export class Dashboard {
public chart: any;

    constructor(...) {
       this.chart = {
            type: 'Pie',
            data:  {
                    series: [10, 20, 50, 20, 5, 50, 15],
                    labels: [1, 2, 3, 4, 5, 6, 7]
                }
            ,
            options: {
                donut: false,
                donutWidth: 10,
                showLabel: false
            }
        }

Template:

    <x-chartist [data]="chart.data"
                        [type]="chart.type"
                        [options]="chart.options">
     </x-chartist>

I want to use chartist-plugin-tooltip but am not sure about how can I use it with this module.

Hello, I tried to do a animation for pie chart. But, when i tried to make a event, nothing happen.

this is my code.

  loadPieChart() {
    const cumplimiento = 96;
    const faltante = 100 - cumplimiento;
    this.typePie = 'Pie';
    this.dataPie = { series: [cumplimiento, faltante] };
    this.optionsPie = {
      donut: true,
      donutWidth: 10,
      showLabel: false,
      width: '100%',
      height: '100%',
      plugins: [
        Chartist.plugins.fillDonut({
          items: [{
            content: 'Cumplimiento',
            position: 'bottom',
            offsetY: 50,
            offsetX: 0
          }, {
            content: '<h3>' + cumplimiento + '<span class="small">%</span></h3>',
            position: 'bottom',
            offsetY: 60,
            offsetX: 0
          }]
        })
      ],
    };
    this.eventsPie = {
      draw(data: any): void {
        if (data.type === 'slice') {
          const pathLength = data.element._node.getTotalLength();
          data.element.attr({
            'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
          });
          const animationDefinition = {
            'stroke-dashoffset': {
              id: 'anim' + data.index,
              dur: 5000,
              from: -pathLength + 'px',
              to: '0px',
              easing: 'easeInSine',
              fill: 'freeze',
              begin: 'anim' + (data.index - 1) + '.end'
            }
          };
          data.element.attr({
            'stroke-dashoffset': -pathLength + 'px'
          });
          console.log(data);
          data.element.animate(animationDefinition, false);
        }
      }
    };
  }

and html...

<x-chartist [data]="dataPie" [type]="typePie" [options]="optionsPie" [events]="eventsPie" class="ct-chart"> </x-chartist>

anyone can help me :/

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 3.3.17 of uglify-js was just published.

This version is covered by your current version range and after updating it in your project the build failed.

uglify-js is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I try to install an older version of this library. Like:

npm install [email protected] --save

But I'm getting an error.

npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "[email protected]" "--save"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: [email protected]
npm ERR! notarget Valid install targets:
npm ERR! notarget 1.1.0, 1.0.0
npm ERR! notarget 
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/alexanderkozhevin/Desktop/isometry/npm-debug.log

But the same syntax works fine if I try to install version starting from 1.0.0

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 3.3.15 of uglify-js was just published.

This version is covered by your current version range and after updating it in your project the build failed.

uglify-js is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Version 4.2.2 of @angular/core just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As @angular/core is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi there,
not sure if this is the right place for this question?! I've added a very basic chart to my Ionic 2 app but have difficulties to apply a style to the chart. At the moment the line and the area below is just black. I would have expected a line representation according to the "standard" chartist SCSS definition. What would I need to do to change that behaviour? The chart sits inside an ion-card container but placing it into different UI objects didn't really change anything. Sorry for the rather broad type of question.....

This is how it looks in the emulator & a real device:

Main.ts

import { Component, ChangeDetectorRef } from '@angular/core';
import { NavController, NavParams, } from 'ionic-angular';
import { BleComms } from '../+shared/blecomms';
import { scan } from '../+scan/scan';
import { BLE } from 'ionic-native';
import { ChartistComponent, ChartType} from 'angular2-chartist';

@Component({
templateUrl: 'build/+main/main.html',
directives: [ChartistComponent]
})

export class main {

  private nav:NavController = null;
  private navParams:NavParams = null;
  private state: any = 'idle';
  private reflowTemp: any = '-- °C';  //Reflow data variables
  private reflowState: any = '--';
  private reflowTime: any = '-- sec';
  private reflowPID: any = '-- %';
  private data:any;                   //Chartist chart variables
  private options:any;
  private responsiveOptions:any;
  private type:ChartType;

  static get parameters() {
    return [[NavParams],[NavController],[ChangeDetectorRef],[BleComms]];
  }

  constructor(navParams, nav, private cd:ChangeDetectorRef, public blecomms:BleComms) {
    this.nav = nav;
    this.navParams = navParams;

    this.blecomms.app_state$
          .subscribe(state => {
            this.state = state;
            this.cd.detectChanges();
            console.log('State: ' + state);
            if (state == 'disConnected'){
              this.setReflowVars();
            }
          })

    this.blecomms.ble_notify$
          .subscribe(data => {
            this.reflowTemp = data;
            this.cd.detectChanges();
            console.log("Temp: " + this.reflowTemp);
          });

    this.type = 'Line'; //chartist Dummy
    this.data = {
      "labels": [
        "0",
        "30",
        "60",
        "90",
        "120",
        "150",
        "180",
        "210",
        "240",
        "270",
        "300",

      ],
      "series": [
        [22, 70, 110, 150, 165, 170 ,185, 210, 200, 180 ,160]
      ]
    }
    this.options = {
      width: 300,
      height: 200,
      //fullwidth:true,
      high:220,
      low: 10,
      //scaleMinSpace: 2,
      //onlyInteger: false
    };
  }



  scan() {
    this.nav.push(scan);
  }

  disconnect() {
    this.blecomms.disconnect()
  }

  setReflowVars() {
    this.reflowTemp = '-- °C';
    this.reflowState = '--';
    this.reflowTime = '-- sec';
    this.reflowPID =  '-- %';
  }
}

main.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Hotplate
    </ion-title>
    <ion-buttons end>
      <button *ngIf="state=='disConnected' || state=='idle' || state=='stoppedScanning'" outline (click) = "scan()">
        <ion-icon name='bluetooth' is-active="false"> </ion-icon>
        Scan
      </button>
      <button *ngIf="state=='isConnected'" outline (click) = "disconnect()">
        <ion-icon name='bluetooth' is active="false"> </ion-icon>
        Disconnect
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-card>
      <ion-card-header>
        Control
      </ion-card-header>
    <ion-card-content>
      <p>  Status: {{state}} </p>
      <p>  Profile: {{profile}} </p>
      <ion-grid>
        <ion-row>
          <ion-col width-33 align="left">
            <button  ion-button color="secondary" outline (click)="start()">
              Start
            </button>
          </ion-col>
          <ion-col width-33 align="center">
            <button  ion-button color="danger" outline (click)="stop()">
              Stop
            </button>
          </ion-col>
          <ion-col width-33 align="right">
            <button  ion-button color="default" outline (click)="profile()">
              Profile
            </button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-content>
      <x-chartist
        [data]="data"
        [type]="type"
        [options]="options">
      </x-chartist>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-content>
      <p>Temp:  {{reflowTemp}} </p>
      <p>State: {{reflowState}} </p>
      <p>Time:  {{reflowTime}} </p>
      <p>PID:   {{reflowPID}} </p>
    </ion-card-content>
  </ion-card>
</ion-content>

I have a project with angular RC.4 and need to make a chart, how I can install via npm and be compatible with angular RC.4?

Thanks!

The current sample code does not cover the inclusion of the module/component via @NgModule app import.

This causes a problem for me as trying to import the ChartistModule (rather than importing the component at a page level as it used to be) results in the error Unexpected value 'ChartistComponent' exported by the module 'ChartistModule' , suggesting that I'm importing it incorrectly.

using ChartistComponent is working fine but if I try to import ChartistModule, there's error on console. I have to use chartist in multiple modules so can't import the component.

Hi

While using ng-xi18n on an Angular2 project that uses ng-chartist, I get the following error:

Error: Unexpected value 'ChartistModule in <snap>/node_modules/ng-chartist/dist/chartist.component.d.ts...

Using regular builds through webpack works fine though, so it's just the ng-xi18n command that fails. Presumably other ng command-line tools might exhibit the same problems.

According to angular/angular#13240 the reason would be that metadata.json is missing from the release.

I'm trying to use a tooltip plugin but this error keeps appearing
This image shows where i added the plugin, i followed every step that you have on your demo folder, but couldn't load plugin.

Hi there,
I'd like to use some more advanced formatting options (my data contains holes) and stumbled over an example on the chartist examples page "Filled holes in data". Now I'm wondering if and how I could use Chartist.Interpolation.cardinal through the angular2-chartist wrapper.

{
  fullWidth: true,
  chartPadding: {
    right: 10
  },
  lineSmooth: Chartist.Interpolation.cardinal({
    fillHoles: true,
  }),
  low: 0
}

Any advice would be great!

Cheers,
Jens

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 5.2.9 of @angular/router was just published.

This version is covered by your current version range and after updating it in your project the build failed.

@angular/router is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I'm using angular2-chartist on a Ionic2 project and my chart only work after resize the screen, someone have any ideia what I'm doing wrong?

My code:

`this.subtractClass = valorTotal - this.disciplinePeriod.averages.allClass;

        this.chart = {
            type: 'Pie',
            data:  {
                series: [this.disciplinePeriod.averages.allClass, this.subtractClass],
            },
            options: {
                donut: true,
                donutWidth: 10,
                showLabel: false
                //fullWidth: true,
                //width: '100%',
                //height: '100%'
            },
            events: {
                draw(data: any): void {
                    console.log("EVENTSS");
                    if (data.type === 'slice') {
                        console.log(data);
                        var pathLength = data.element._node.getTotalLength();

                        data.element.attr({
                            'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
                        });

                        var animationDefinition = {
                            'stroke-dashoffset': {
                                id: 'anim' + data.index,
                                dur: 5000,
                                from: -pathLength + 'px',
                                to: '0px',
                                //easing: "easeInSine",
                                fill: 'freeze',
                                //begin: 'anim' + (data.index - 1) + '.end';
                            }
                        };


                        data.element.attr({
                            'stroke-dashoffset': -pathLength + 'px'
                        });
                        console.log(data);
                        data.element.animate(animationDefinition, false);
                    }
                }
            }
        }


        this.subtractStudent = valorTotal - this.disciplinePeriod.averages.student;

        this.chartTurma = {
            type: 'Pie',
            data:  {
                series: [this.disciplinePeriod.averages.student, this.subtractStudent],
            },
            options: {
                donut: true,
                donutWidth: 30,
                showLabel: false,
                chartPadding: 15,
                className: 'oc-color',
                //fullWidth: true,
                //width: '100%',
                //height: '100%'
            },
            events: {
                draw(data: any): void {
                    console.log("EVENTSS");
                    if (data.type === 'slice') {
                        console.log(data);
                        var pathLength = data.element._node.getTotalLength();

                        data.element.attr({
                            'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
                        });

                        var animationDefinition = {
                            'stroke-dashoffset': {
                                id: 'anim' + data.index,
                                dur: 5000,
                                from: -pathLength + 'px',
                                to: '0px',
                                //easing: "easeInSine",
                                fill: 'freeze',
                                //begin: 'anim' + (data.index - 1) + '.end';
                            }
                        };


                        data.element.attr({
                            'stroke-dashoffset': -pathLength + 'px'
                        });
                        console.log(data);
                        data.element.animate(animationDefinition, false);
                    }
                }
            }
        }

`

I tried putting this code on constructor, and "onPageLoaded()" and got same results... Someone know what can I do?

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 2.5.4 of core-js was just published.

This version is covered by your current version range and after updating it in your project the build failed.

core-js is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

OS?

Mac OSX El Capitan - 10.11.6 (15G1004)

Versions.

@angular/cli: 1.0.0-beta.32.3
node: 6.9.5
os: darwin x64
@angular/common: 2.4.0
@angular/compiler: 2.4.0
@angular/core: 2.4.0
@angular/forms: 2.4.0
@angular/http: 2.4.0
@angular/platform-browser: 2.4.0
@angular/platform-browser-dynamic: 2.4.0
@angular/router: 3.4.0
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 2.4.0

Chartists Versions

angular2-chartist: 0.12.1
chartist": ^0.10.1
@types/chartist: ^0.9.34

I use angular/cli and when use the command ng serve returned this error ERROR in ChartistModule is not an NgModule but, when change and save any file, livereload omitted the error and all ok.

the main problem is in production mode. when i tried use the command ng build got this

ERROR in Unexpected value 'ChartistModule in /Users/userName/mainFolder/Project/tablero/node_modules/angular2-chartist/dist/chartist.component.d.ts' imported by
the module 'AppModule in /Users/userName/mainFolder/Project/tablero/src/app/app.module.ts'

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/userName/mainFolder/Project/src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

anyone can help me?. i don't know how solve this.

Does this work with Angular 2.3.1? I'm having issues trying to get it working. The example in the readme seems out of date as it references directives but when I google it, it says that was removed.