e.preventDefault(); // Prevent form submission input.blur(); // remove focus input.value = ""; // optional: clear the input

How to use chart.js in Angular

What is chart.js:

Chart.js is an open-source library that permits us to draw various kinds of diagrams like Line, Bar, Radar utilizing the Canvas Element.

How to use chart.js in Application:

You can implement Chart.js in a simple way with the following instructions:

  1.  Create a new project with angular-cli,we can use the command as below:ng new sample-chartjs
  2.  Install Chart.js in your projectnpm install chart.js
  3. Import Chart into its componentimport Chart from ‘chart.js’;
  4. Use Chart in your view and component :Chart.js requires an <canvas> element containing the unique id of the chart for the data to render in the HTML template. We can set height and width for the linechart.

    <canvas id=”lineChart” width=”400” height=”400”></canvas>

    A Chart has 3 main sections:

    • Type Of Chart: type
    • Plotting the data
    • Features of Chart

Type of chart:

The type of chart is specified in type. It takes a string input that is the type of chart you want to make.

Inputs can be: line, bar, radar, doughnut, pie, polarArea, bubble & scatter.

Example: type:’line’

Plotting the data:

Here we can add the data that we need to plot on the chart. Creating a lineChart then needs to add color , label ,datasets,tooltip and position etc.

DataSets:  This is where we put the actual data.Dataset is an array of objects. Each object must contain data: array. We can add labels for the dataset

How to use chart.js in Angular

Fearures of charts:

Here we can decide to add gridlines or not, what should be the range on both the axis and much more. Also, you can add plugins.

scales: For each axis, you should have a separate value, i.e., one for the x-axis and one for the y axis.

plugins: Plugins let you customize the charts. Say you want to add an Annotations plugin, using this we can add horizontal or vertical lines in the chart. For this, we need to install the plugin and import it into a particular component and we need to add type, mode, and scale-Id.

How to use chart.js in Angular

As we saw through the above examples, using that created a line chart added options, animations, and plugins to chart.

How to use chart.js in Angular

Related Posts

Latest Posts

  • All Posts
  • Generative AI
  • manufacturing
  • News
  • Portfolio
    •   Back
    • Android
    • iOS
    • Java
    • PHP
    • MEAN
    • Ruby
    • DotNet
    • IoT
    • Cloud
    • Testing
    • Roku
    • CMS
    • Python

India

Plot No. 11/2, Phase 3, Hinjewadi Rajiv Gandhi Infotech Park, Pune, India – 411057.
info@tudip.com
+91-96-8990-0537

United States

1999 S. Bascom Ave Suite 700, Campbell CA. 95008, USA.
info@tudip.com
+1-408-216-8162

Canada

64 Caracas Road North York, Toronto Ontario M2K 1B1, Canada.
info@tudip.com

Mexico

Calle Amado Nervo #785 Interior B Colonia Ladron De Guevara 44600 Guadalajara, Jalisco, Mexico.
info@tudip.com

Colombia

Cra. 9 # 113-53 Of. 1405 Bogotá D.C., Colombia.
info@tudip.com

UAE

Tudip Information Technologies L.L.C Office No 109, ABU HAIL BUILDING 13, Abu Hail, Dubai, UAE.
info@tudip.com

Nigeria

22 Kumasi Crescent, Wuse 2, Abuja, Nigeria.
info@tudip.com