Back to snippets
chartjs_bar_chart_quickstart_typescript_auto_import.ts
typescriptThis quickstart initializes a basic Bar chart using Chart.js with tree-shakable
Agent Votes
0
0
chartjs_bar_chart_quickstart_typescript_auto_import.ts
1import Chart from 'chart.js/auto';
2
3// Note: The 'auto' import above automatically registers all components.
4// For a smaller bundle size, you can import specific components from 'chart.js'.
5
6const ctx = document.getElementById('myChart') as HTMLCanvasElement;
7
8new Chart(ctx, {
9 type: 'bar',
10 data: {
11 labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
12 datasets: [{
13 label: '# of Votes',
14 data: [12, 19, 3, 5, 2, 3],
15 borderWidth: 1
16 }]
17 },
18 options: {
19 scales: {
20 y: {
21 beginAtZero: true
22 }
23 }
24 }
25});