@types/chart.js

What is @types/chart.js?

@types/chart.js provides TypeScript type definitions for the Chart.js library, which is a popular JavaScript library for creating various types of charts and graphs. These type definitions help developers use Chart.js in TypeScript projects by providing type safety and autocompletion features.

What are @types/chart.js's main functionalities?

Creating a Line Chart

This code sample demonstrates how to create a basic line chart using Chart.js with TypeScript. The type definitions provided by @types/chart.js ensure that the configuration object adheres to the expected structure.

const lineChartConfig: Chart.ChartConfiguration = {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      data: [65, 59, 80, 81, 56, 55, 40]
    }]
  },
  options: {
    responsive: true
  }
};
const ctx = document.getElementById('myChart') as HTMLCanvasElement;
new Chart(ctx, lineChartConfig);

Creating a Bar Chart

This code sample demonstrates how to create a bar chart using Chart.js with TypeScript. The type definitions ensure that the configuration object is correctly structured and provide autocompletion for the properties.

const barChartConfig: Chart.ChartConfiguration = {
  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
        }
      }]
    }
  }
};
const ctx = document.getElementById('myChart') as HTMLCanvasElement;
new Chart(ctx, barChartConfig);

Creating a Pie Chart

This code sample demonstrates how to create a pie chart using Chart.js with TypeScript. The type definitions help ensure that the configuration object is correctly structured and provide autocompletion for the properties.

const pieChartConfig: Chart.ChartConfiguration = {
  type: 'pie',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      data: [300, 50, 100],
      backgroundColor: [
        '#FF6384',
        '#36A2EB',
        '#FFCE56'
      ],
      hoverBackgroundColor: [
        '#FF6384',
        '#36A2EB',
        '#FFCE56'
      ]
    }]
  },
  options: {
    responsive: true
  }
};
const ctx = document.getElementById('myChart') as HTMLCanvasElement;
new Chart(ctx, pieChartConfig);

Other packages similar to @types/chart.js

@types/d3

@types/d3 provides TypeScript type definitions for D3.js, a powerful library for creating complex and interactive data visualizations. Compared to Chart.js, D3.js offers more flexibility and control over the visualizations but has a steeper learning curve.

@types/plotly.js

@types/plotly.js provides TypeScript type definitions for Plotly.js, a library for creating interactive and publication-quality charts. Plotly.js supports a wide range of chart types and is known for its interactivity and ease of use, similar to Chart.js.

@types/echarts

@types/echarts provides TypeScript type definitions for ECharts, a powerful charting and visualization library. ECharts offers a wide variety of chart types and is highly customizable, making it a strong alternative to Chart.js for more complex visualizations.

README

Installation

npm install --save @types/chart.js

Summary

This package contains type definitions for Chart.js (https://github.com/nnnick/Chart.js).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/chart.js.

Additional Details

• Last updated: Fri, 22 Apr 2022 09:31:34 GMT
• Dependencies: @types/moment
• Global values: Chart

Credits

These definitions were written by Alberto Nuti, Fabien Lavocat, KentarouTakeda, Larry Bahr, Daniel Luz, Joseph Page, Dan Manastireanu, Guillaume Rodriguez, Simon Archer, Ken Elkabany, Alexandros Dorodoulis, Manuel Heidrich, Conrad Holtzhausen, Adrián Caballero, wertzui, Martin Trobäck, Elian Cordoba, Takuya Uehara, Ricardo Mello, Ray Nicholus, Oscar Cabrera, Carlos Anoceto, Nobuhiko Futagami, Marco Ru, Tony Liu, Mathias Helminger, Mostafa Sameti, and Samar Mohan.