ArticleZip > Using Chart Js On Angular 4

Using Chart Js On Angular 4

Are you looking to add some visualization magic to your Angular 4 project? Look no further than Chart.js! With its sleek design and easy implementation, Chart.js is a fantastic tool for incorporating interactive and visually appealing charts into your web applications. In this guide, we'll walk through the steps to get you up and running with Chart.js in Angular 4.

First things first, you'll need to install Chart.js and its corresponding types for TypeScript. You can do this by running the following commands in your Angular 4 project directory:

Bash

npm install chart.js --save
npm install @types/chart.js --save

Next, let's add Chart.js to your project. In your Angular component where you want to use the chart, import Chart.js at the top of the file:

Typescript

import * as Chart from 'chart.js';

Now that Chart.js is ready to go, let's create a chart! In your component class, you can define a canvas element in your template where the chart will be rendered. Make sure to give the canvas element an id so that we can reference it later:

Html

Now, in your component class, you can initialize the chart using the canvas element like this:

Typescript

ngOnInit() {
  const ctx = document.getElementById('myChart');
  const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
}

In this example, we created a simple bar chart using Chart.js. You can customize the type of chart, data, colors, and more based on your requirements.

And that's it! You've successfully integrated Chart.js into your Angular 4 project. Remember, Chart.js offers a wide range of chart types and customization options, so feel free to explore and adapt it to suit your needs. Happy charting!

Related posts:

×