What is Chart.js good for?

The Chart.js is easy to use, flexible and HTML Canvas based. Free to use, open-source and used to display datas on websites.

How to get started?

1. Load from CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. Create a <canvas> element:

<canvas id="myChart"></canvas>

3. Configure the chart:

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, { type: '...', data: {...}, options: {...} });

How to create a line chart?

The line chart is capable to show timelines and trends.

• type: 'line'
• data.labels
• datasets
• fill: true

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{
      label: 'Látogatók',
      data: [12, 19, 25, 8],
      borderColor: '#333',
      tension: 0.3
    }]
  }
});

How can you make colorful charts?

You can use RGB, HEX or even RGBA color codes for transparency.

• borderColor: '#333'
• backgroundColor: 'rgba(0,0,0,0.07)'
• backgroundColor: '#444'

How to create a doughnut chart?

A doughnut chart = type: 'doughnut'. The cutout value controls the inner hole size.

new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['Sold', 'In Stock', 'Returned'],
    datasets: [{
      data: [320, 180, 45],
      backgroundColor: ['#333', '#666', '#aaa'],
      borderWidth: 1,
      borderColor: '#fff'
    }]
  },
  options: {
    cutout: '65%',
    plugins: { legend: { position: 'bottom' } }
  }
});

How to create a vertical bar chart?

This is the default vertical chart. The indexAxis: 'y' setting can be used to make it horizontal at any time.

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['2023', '2024', '2025'],
    datasets: [{
      label: 'Profit (M Ft)',
      data: [42, 58, 71],
      backgroundColor: '#222',
      borderColor: '#000',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: { beginAtZero: true }
    }
  }
});