⚡ Angular Charts Data

• Angular app using Chart.js to display free Coinranking API data
• Tutorial code from The Code Angle with additional chart, pan/zoom and some other code changes
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Charts Data
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• To get temporary access to the CORS proxy url it is necessary to click a request button at https://cors-anywhere.herokuapp.com/corsdemo
• Chart types: ArcElement, LineElement, BarElement, PointElement, BarController, BubbleController, DoughnutController, LineController, PieController, PolarAreaController, RadarController, ScatterController, CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale, Decimation, Filler, Legend, Title, Tooltip, SubTitle
• toPromise used; a constructor that resolves to ZoneAwarePromise() from zone.js at run time in the browser.

📷 Screenshots

📶 Technologies

• Angular framework v14 rc-1
• RxJS v7 Reactive Extensions Library for JavaScript
• Chart.js v3 - latest version 3.6 resolves Canvas Rendering Error (see StackOverflow answer in Inspiration below)
• chartjs-plugin-zoom v1 zoom and pan plugin for Chart.js >= 3.0.0
• Coinranking API v2 for free cryptocurrency data
• CORS anywhere to get round Cross-Origin limitations with localhost

💾 Setup

• Run npm i to install dependencies
• Create an account & get a Developers API key from Coinranking
• Add API key to services\authService
• Enables temporary CORS issue workaround via https://cors-anywhere.herokuapp.com/corsdemo
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
• Run 'ng build' to create a build file

💻 Code Examples

• extract from app.component.ts to create chart2 data

this.chart2 = new Chart('canvas2', {
  type: 'bar',
  data: {
    labels: this.coinName,
    datasets: [
      {
        data: this.coinPrice,
        borderColor: '#0d47a1',
        label: 'Bar Chart: Crypto Prices',
        backgroundColor: 'rgba(93, 175, 89, 0.1)',
        borderWidth: 1,
      },
    ],
  },
});

🆒 Features

• Charts.js has other types of charts and lots of options that can be configured.

📋 Status & To-Do List

• Status: Working
• To-Do: Could add data types to replace 'any'

👏 Inspiration

• The Code Angle, How to Integrate Chart.js Using Angular 12 with Data from a REST API (2021)
• Angular Chartjs error TS2304: Cannot find name OffscreenCanvasRenderingContext2D

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com