Chart.js এর বিল্ট-ইন প্লাগইনসমূহ

Chart.js একটি শক্তিশালী ডেটা ভিজ্যুয়ালাইজেশন লাইব্রেরি, যা বিভিন্ন ধরনের বিল্ট-ইন প্লাগইন প্রদান করে। এই প্লাগইনগুলির মাধ্যমে চার্টের কার্যকারিতা আরও বাড়ানো যায় এবং বিভিন্ন কাস্টমাইজেশন অপশন সরবরাহ করা হয়। Chart.js এর বিল্ট-ইন প্লাগইনগুলির সাহায্যে আপনি টুলটিপস, লেজেন্ড, অ্যানিমেশন এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন।

নিচে Chart.js এর জনপ্রিয় এবং সাধারণভাবে ব্যবহৃত বিল্ট-ইন প্লাগইনসমূহের আলোচনা করা হলো:

১. Tooltip Plugin

Chart.js এর Tooltip প্লাগইনটি ডেটা পয়েন্টে হোভার করলে একটি পপআপ টুলটিপ প্রদর্শন করে, যেখানে আপনি সেই পয়েন্টের বিশদ তথ্য দেখতে পারেন। এটি ডেটা পয়েন্টের মান, লেবেল বা কাস্টম তথ্য দেখাতে ব্যবহার করা হয়।

কাস্টমাইজেশন উদাহরণ:

options: {
    plugins: {
        tooltip: {
            enabled: true, // টুলটিপ সক্রিয় করা
            backgroundColor: 'rgba(0, 0, 0, 0.7)', // টুলটিপের ব্যাকগ্রাউন্ড রঙ
            titleColor: 'white', // টুলটিপের টাইটেল রঙ
            bodyColor: 'white', // টুলটিপের বডি রঙ
            displayColors: false, // স্লাইসের রঙ প্রদর্শন বন্ধ করা
            callbacks: {
                label: function(tooltipItem) {
                    return tooltipItem.label + ': ' + tooltipItem.raw + ' units'; // কাস্টম টুলটিপ কন্টেন্ট
                }
            }
        }
    }
}

• enabled: টুলটিপ প্রদর্শন করা হবে কিনা তা নির্ধারণ।
• backgroundColor: টুলটিপের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা।
• callbacks: টুলটিপ কাস্টম কন্টেন্ট যোগ করা।

২. Legend Plugin

Legend প্লাগইন চার্টের ডেটাসেটের সাথে সম্পর্কিত তথ্য প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি ডেটাসেটের নাম এবং তাদের রঙ প্রদর্শন করে। আপনি লেজেন্ডের অবস্থান, রঙ, ফন্ট ইত্যাদি কাস্টমাইজ করতে পারেন।

কাস্টমাইজেশন উদাহরণ:

options: {
    plugins: {
        legend: {
            display: true, // লেজেন্ড প্রদর্শন করা
            position: 'top', // লেজেন্ডের অবস্থান (top, bottom, left, right)
            labels: {
                font: {
                    size: 16 // ফন্ট সাইজ কাস্টমাইজ করা
                }
            }
        }
    }
}

• position: লেজেন্ডের অবস্থান কাস্টমাইজ করা (উপর, নিচে, বাম বা ডানে)।
• labels.font.size: লেজেন্ডের ফন্ট সাইজ কাস্টমাইজ করা।

৩. Title Plugin

Title প্লাগইনটি চার্টে একটি শিরোনাম (title) যোগ করতে ব্যবহৃত হয়। আপনি শিরোনামের অবস্থান, ফন্ট সাইজ, রঙ ইত্যাদি কাস্টমাইজ করতে পারেন।

কাস্টমাইজেশন উদাহরণ:

options: {
    plugins: {
        title: {
            display: true, // শিরোনাম প্রদর্শন করা
            text: 'Monthly Sales Report', // শিরোনাম টেক্সট
            font: {
                size: 24, // শিরোনামের ফন্ট সাইজ
                family: 'Arial', // শিরোনামের ফন্ট পরিবার
                weight: 'bold' // শিরোনামের ফন্টের ওজন
            }
        }
    }
}

• text: শিরোনামের টেক্সট কাস্টমাইজ করা।
• font.size: শিরোনামের ফন্ট সাইজ কাস্টমাইজ করা।

৪. Data Labels Plugin

Data Labels প্লাগইন চার্টের স্লাইস বা ডেটা পয়েন্টের উপরে ডেটার মান বা শতাংশ দেখানোর জন্য ব্যবহৃত হয়। এটি বিশেষভাবে ডোনাট বা পাই চার্টে খুব জনপ্রিয়।

কাস্টমাইজেশন উদাহরণ:

options: {
    plugins: {
        datalabels: {
            color: '#fff', // ডেটা লেবেল রঙ
            font: {
                weight: 'bold', // ফন্টের ওজন
                size: 14 // ফন্ট সাইজ
            },
            formatter: function(value) {
                return value + '%'; // কাস্টম ডেটা লেবেল
            }
        }
    }
}

• color: ডেটা লেবেল রঙ কাস্টমাইজ করা।
• formatter: ডেটা লেবেল কাস্টমাইজ করা (যেমন, শতাংশ যোগ করা)।

৫. Autocolors Plugin

Autocolors প্লাগইনটি ডেটাসেটের জন্য অটোমেটিক্যালি রঙ প্রয়োগ করে। এটি ডেটাসেটের স্লাইস বা বারগুলোর জন্য রঙ নির্বাচন করতে সাহায্য করে, বিশেষ করে যখন একাধিক ডেটাসেট থাকে।

কাস্টমাইজেশন উদাহরণ:

options: {
    plugins: {
        autocolors: {
            enabled: true // অটোমেটিক রঙ প্রয়োগ করা
        }
    }
}

• enabled: অটোমেটিক রঙ প্রয়োগ করতে true সেট করা।

৬. Filler Plugin

Filler প্লাগইনটি একাধিক ডেটাসেটের মধ্যে ফিলিং ব্যবহার করতে সাহায্য করে, যেমন রাডার চার্ট বা স্ট্যাকড বার চার্টে ব্যবহার করা হয়। এটি ডেটাসেটের মধ্যে বর্ণের পরিবর্তন করে।

কাস্টমাইজেশন উদাহরণ:

options: {
    plugins: {
        filler: {
            propagate: true // ফিলিং প্রয়োগ করা
        }
    }
}

• propagate: একাধিক ডেটাসেটের মধ্যে ফিলিং প্রয়োগ করতে true সেট করা।

৭. Zoom Plugin

Chart.js-এ Zoom প্লাগইন আপনাকে চার্টের মধ্যে ইনপুটের মাধ্যমে জুম ইন বা জুম আউট করার সুবিধা দেয়। এটি বিশেষ করে বড় ডেটাসেট বা টাইম সিরিজ ডেটা বিশ্লেষণ করতে সাহায্য করে।

কাস্টমাইজেশন উদাহরণ:

options: {
    plugins: {
        zoom: {
            zoom: {
                wheel: {
                    enabled: true, // চাকা ব্যবহার করে জুম ইন/আউট
                },
                pinch: {
                    enabled: true // পিনচ জেস্টার ব্যবহার করে জুম
                }
            }
        }
    }
}

• enabled: জুম সক্রিয় করা।
• wheel.enabled: চাকা ব্যবহার করে জুম ইন/আউট করা।
• pinch.enabled: পিনচ জেস্টার দিয়ে জুম ইন/আউট করা।

সারাংশ

Chart.js-এ বিল্ট-ইন প্লাগইনগুলি চার্টের কার্যকারিতা এবং কাস্টমাইজেশনকে আরও শক্তিশালী করে তোলে। এগুলি আপনাকে টুলটিপ, লেজেন্ড, শিরোনাম, ডেটা লেবেল, অটোমেটিক রঙ এবং আরও অনেক কিছু কাস্টমাইজ করার সুযোগ দেয়। Chart.js এর প্লাগইনসমূহের মাধ্যমে আপনি অত্যন্ত ইন্টার‌্যাকটিভ এবং দৃষ্টিনন্দন ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন।