‏ng2-charts: نمودارهای Chart.js تو Angular

ng2-charts یه کتابخونه‌ی محبوب برای Angular هست که روی Chart.js ساخته شده. کارش اینه که به‌جای اینکه خودت Chart.js رو دستی به چرخه‌ی کامپوننت‌های Angular وصل کنی، یه directive آماده بهت می‌ده. تو آخرین نسخه‌ها با کامپوننت‌های standalone کار می‌کنه و طبق جدول سازگاری خود پروژه، تا Angular 22 رو پشتیبانی می‌کنه.

نصبش با ng add ng2-charts انجام می‌شه که پکیج‌ها رو نصب می‌کنه و app.config.ts رو هم خودش آپدیت می‌کنه. اگه دستی نصب کنی، باید chart.js رو هم جدا نصب کنی چون peer dependency حساب می‌شه. بعد BaseChartDirective رو تو کامپوننت import می‌کنی و با provideCharts تنظیمات رو می‌دی. نکته‌ی جالب اینه که به‌جای withDefaultRegisterables() می‌تونی فقط بخش‌هایی از Chart.js که لازم داری رو ثبت کنی تا حجم bundle کمتر بشه:

provideCharts({ registerables: [BarController, Legend, Colors] });

برای همه‌ی نمودارها فقط یه directive هست: baseChart. هشت نوع نمودار پشتیبانی می‌شه: line، bar، radar، pie، polarArea، doughnut، bubble و scatter. ورودی‌هایی مثل type، data، labels، datasets، options و legend می‌گیره و دو رویداد chartClick و chartHover هم داره که اطلاعات نقطه‌ها و برچسب‌های فعال رو برمی‌گردونن.

یه قابلیت کاربردی دیگه ThemeService هست. وقتی تم اپ عوض می‌شه (مثلاً از روشن به تاریک)، با setColorschemesOptions یه آبجکت override می‌فرستی که همون ساختار ChartOptions رو داره. فیلدهای ساده جایگزین می‌شن و اگه به آرایه برسه، اولین آبجکت داخلش مثل قالب روی همه‌ی آیتم‌های اون آرایه اعمال می‌شه. یعنی با یه تعریف، رنگ همه‌ی محورها یه‌جا عوض می‌شه.

نکات کلیدی:

• نصب سریع با ng add ng2-charts و آپدیت خودکار app.config.ts
• chart.js یه peer dependency هست و باید جدا نصب بشه
• یه directive به اسم baseChart برای هشت نوع نمودار
• با ثبت انتخابی registerableها تو provideCharts حجم bundle کم می‌شه
• ThemeService رنگ نمودارها رو موقع تغییر تم با override عوض می‌کنه
• سازگار با Angular 22 و لایسنس MIT