Chart.js component for Angular2
npm install angular2-chartjs
npm install angular2-chartjs
Usage
Add to your module, eg.
`JavaScript
import { ChartModule } from 'angular2-chartjs';@NgModule({
imports: [ ChartModule ]
// ...
})
export class AppModule {
}
`
And you can use selector in your template.JavaScript
`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
HTML
`Options
$3
string, required
Chart type.$3
object, required
To display data, the chart must be passed a data object that contains all of the information needed by the chart. See.$3
object, optional
To create a chart with configuration options, simply pass an object containing your configuration to the constructor. See.Events
$3
Event
Return click event.$3
Array
Return the clicked dataset array.$3
Array
Return the clicked element in array.$3
Array
Return the clicked elements in array.Members
$3
Chart
Chart instance. You can call Chart.js methods via this member.Example:
JavaScript
chartComponent.chart.destroy();
`SystemJs
Add following settings
JavaScript
{
map: {
'angular2-chartjs': 'npm:angular2-chartjs',
'chart.js': 'npm:chart.js/dist/Chart.bundle.js'
},
packages: {
'angular2-chartjs': {
main: './dist/index.js',
defaultExtension: 'js'
}
}
}
``