angular2-chartjs

WebJar for angular2-chartjs

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	angular2-chartjs
Last Version	0.2.0
Release Date	May 17, 2017
Type	jar
Description	angular2-chartjs WebJar for angular2-chartjs
Project URL	http://webjars.org
Source Code Management	https://github.com/emn178/angular2-chartjs

Download angular2-chartjs

Filename	Size
angular2-chartjs-0.2.0.pom
angular2-chartjs-0.2.0.jar	18 KB
angular2-chartjs-0.2.0-sources.jar	22 bytes
angular2-chartjs-0.2.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/angular2-chartjs/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>angular2-chartjs</artifactId>
    <version>0.2.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/angular2-chartjs/
implementation 'org.webjars.npm:angular2-chartjs:0.2.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/angular2-chartjs/
implementation ("org.webjars.npm:angular2-chartjs:0.2.0")

Apache Buildr

'org.webjars.npm:angular2-chartjs:jar:0.2.0'

Apache Ivy

<dependency org="org.webjars.npm" name="angular2-chartjs" rev="0.2.0">
  <artifact name="angular2-chartjs" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='angular2-chartjs', version='0.2.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "angular2-chartjs" % "0.2.0"

Leiningen

[org.webjars.npm/angular2-chartjs "0.2.0"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : chart.js	jar	[2.3.0,3)

Project Modules

There are no modules declared in this project.

angular2-chartjs

Chart.js component for Angular2+

Installation

You can install angular2-chartjs by using npm.

npm install angular2-chartjs

Usage

Add ChartModule to your module, eg.

import { ChartModule } from 'angular2-chartjs';

@NgModule({
  imports: [ ChartModule ]
  // ...
})
export class AppModule {
}

And you can use selector chart in your template.

JavaScript

type = 'line';
data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My First dataset",
      data: [65, 59, 80, 81, 56, 55, 40]
    }
  ]
};
options = {
  responsive: true,
  maintainAspectRatio: false
};

HTML

<chart [type]="type" [data]="data" [options]="options"></chart>

Options

[type]

string, required
Chart type.

[data]

object, required
To display data, the chart must be passed a data object that contains all of the information needed by the chart. See.

[options]

object, optional
To create a chart with configuration options, simply pass an object containing your configuration to the constructor. See.

Events

(clickCanvas)

Event
Return click event.

(clickDataset)

Array
Return the clicked dataset array.

(clickElement)

Array
Return the clicked element in array.

(clickElements)

Array
Return the clicked elements in array.

Members

chart

Chart
Chart instance. You can call Chart.js methods via this member.

Example:

chartComponent.chart.destroy();

SystemJs

Add following settings

{
  map: {
    'angular2-chartjs': 'npm:angular2-chartjs',
    'chart.js': 'npm:chart.js/dist/Chart.bundle.js'
  },
  packages: {
    'angular2-chartjs': {
      main: './dist/index.js',
      defaultExtension: 'js'
    }
  }
}

FAQ

How to call Chart.js methods - #7, #2

License

The project is released under the MIT license.

Contact

The project's website is located at https://github.com/emn178/angular2-chartjs
Author: Chen, Yi-Cyuan ([email protected])

Versions

Version
0.2.0 May 17, 2017