score:4
if you are using typescript you just need to install the @types package
npm install --save chart.js @types/chart.js
now typescript knows how to typecheck use of the package and the following will work.
import chart = require('chart.js'); // for commonjs users.
import chart from 'chart.js'; // for systemjs and/or babel users.
const mychart = new chart($('#chart1'), {});
note, i show two imports in the example above. remove whichever does not work at runtime but only keep one of them.
for systemjs + npm, add the following to the map
section of your systemjs.config.js
"chart.js": "npm:chart.js/dist/chart.js"
optionally, if and only if you are using the ng2-charts wrapper, then run
npm install --save ng2-charts
and then add it you your primary ngmodule
decorator factory's, imports
array
import { chartsmodule } from 'ng2-charts/ng2-charts';
@ngmodule({
imports: [
chartsmodule
]
}) export class appmodule {}
score:-1
simple workaround is to add this to index.html:
<script src="node_modules/chart.js/dist/chart.bundle.min.js"></script>
i actually use primeng which have a charts component based on chart.js, also had issues. this was the quickest way to get up and running. make sure you reference the 'bundle' package.
score:0
change your import syntaxt to this :
import chart from "chart.js/dist/chart.bundle.min.js";
make sure you already did
npm install chart.js --save
if youalready did, in you node modules supposed to have nodemodules/chart.js
score:1
for an angular cli project, you'd want to add the chart.js
dependency in the .angular-cli.json
in the scripts
array property like this:
"scripts": [
"../node_modules/chart.js/dist/chart.bundle.min.js"
]
otherwise you can import the library using syntax as follows:
import * as chart from 'chart.js'
that being said, i'd recommend using a library such as the one your suggested as you're going to have access to components, directives, and emitted events that will be easier to work with in your components.
hopefully that helps!
score:2
it's very simple to use in angular2...
installation :
npm install angular2-chartjs
add chartmodule to your module :
import { chartmodule } from 'angular2-chartjs'; @ngmodule({ imports: [ chartmodule ] }) export class appmodule { }
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>
link: https://github.com/emn178/angular2-chartjs "documentation"
enjoy happy codeing. hopefully that helps!
Source: stackoverflow.com
Related Query
- How to use PrimeNg Chart of Width and Height?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- How do I use my chart.js line chart with handlebars?
- How to use segment property to color line / border color based on value in chart js?
- How to use JSON data in creating a chart with chartjs?
- How to use set the color for each bar in a bar chart using chartjs?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How to use Real time chart in react?
- how to reduce list chart to one and use select dropdown to show selection without refresh page?
- How to use chart.js to plot line chart with x axis as time stamp in seconds
- How to use forEach loop on my array to plot x and y variables on my chart (Chart.js)
- How to print a chart rendered by code
- How to use plugins in chartjs and laravel chart consoletvs/chartsjs
- How do I destroy/update Chart Data in this chart.js code example?
- How to use php variables in a chart js chart
- Angular chart js how to use formatter with Doughnut chart
- How to use a Data Array within a Chart JS dataset?
- how can i use inline plugin inner title for chart js?
- How to use log scale with Chart Kick?
- How to run Chart.js samples using source code
- How to use canvasjs to draw column chart using text data
- how to not repeat code while creating multiple charts in chart js
- How to use the useEffect function in react js chart 2 to change the labels?
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- How to use two Y axes in Chart.js v2?
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
More Query from same tag
- How to import Chart.js chartjs-plugin-datalabels npm package into an Angular 7 project
- How can I ensure that my charts diagram load every time I choose it from my dropdown?
- ChartJS v2 custom tooltip for rLabel
- Chart.js - custom tooltip with multiple values
- Chart.js and Firebase Ionic App Angular 4
- how to show A2, B2, C2 labels using chartjs 3.2.0?
- Chart.Js Doughnut not calculating JSON data properly
- How to create a stacked donut chart in Angular 5
- How to get the data attribute of the canvas chart created using chartjs
- Always show last tooltip on all datasets, leave the rest to display on hover? ChartJS
- chart.js - line chart - can I visualize positive/negative change somehow?
- chartjs - json data for scatter graph, issue with date
- Canvas doens't display in SAPUI5
- Chartjs xaxes tick min
- Data Labels on top of points in line charts
- Sum array of objects value based on month - ReactJS
- Chart.js in Angular Radar Chart
- PrimeNg Pie Chart - By default show all tooltip?
- angular chartjs line chart default options
- Chart.JS full-width, responsive doughnut chart with Bootstrap
- Using chart.js to output chart as a saved image rather than using canvas
- using react-chartjs-2 , How can I save my chart as png using a download button
- Chart.js - consolidating days to month totals along the x (time) axis?
- Chart.js showing x-axis ticks even though set to false
- Graph streaming real-time data with react and chartjs
- ChartJS Y Axis scale odd
- Skip dates with no values in chart js
- Legend option destroys pie chart in Chart.js
- How to prevent empty bars from taking up width in Chart.js bar chart
- Animated Word Web in Javascript