Chart.js এর প্লাগইন এবং এক্সটেনশন

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

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

1. Chart.js প্লাগইন কী?

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

Chart.js প্লাগইন ব্যবহারের মাধ্যমে আপনি বিভিন্ন ধরনের কাস্টমাইজেশন করতে পারেন, যেমন:

• টুলটিপ কাস্টমাইজেশন
• অ্যানিমেশন এফেক্টস
• লেজেন্ড কাস্টমাইজেশন
• গ্রিডলাইন কাস্টমাইজেশন

2. Chart.js প্লাগইন এবং এক্সটেনশন ব্যবহারের সুবিধা

• ফাংশনালিটি বৃদ্ধি: প্লাগইন Chart.js-এ নতুন ফিচার বা ফাংশন যোগ করে।
• কাস্টমাইজেশন: ডিফল্ট সেটিংস পরিবর্তন করে চাহিদা অনুযায়ী কাস্টমাইজ করা যায়।
• ইন্টার‌্যাকটিভ ফিচার: চার্টে বেশি ইন্টার‌্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্স যুক্ত করা যায়।
• সহজ ইনস্টলেশন: বেশিরভাগ প্লাগইন সরাসরি CDN বা NPM এর মাধ্যমে ইনস্টল করা যায়।

3. Chart.js এর জনপ্রিয় প্লাগইন এবং এক্সটেনশন

১. Chart.js Data Labels Plugin

Chart.js Data Labels Plugin ব্যবহার করে আপনি চার্টের ডেটা পয়েন্টের মধ্যে লেবেল যোগ করতে পারেন। এটি চার্টে বিভিন্ন মান বা শতাংশ দেখানোর জন্য খুবই কার্যকর।

• ব্যবহার: এই প্লাগইনটি ব্যবহার করে আপনি প্রতিটি ডেটা পয়েন্টের উপর লেবেল দেখাতে পারেন, যেমন মান, শতাংশ ইত্যাদি।

ইনস্টলেশন (NPM):

npm install chartjs-plugin-datalabels

কোড উদাহরণ:

import ChartDataLabels from 'chartjs-plugin-datalabels';

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        plugins: {
            datalabels: {
                color: '#36A2EB',
                font: {
                    weight: 'bold',
                    size: 16
                },
                formatter: function(value, context) {
                    return value + ' Votes'; // Customize label format
                }
            }
        }
    },
    plugins: [ChartDataLabels]
});

কাস্টমাইজেশন:

• formatter: কাস্টম টেক্সট বা ফরম্যাট নির্ধারণ করে।
• font: ফন্ট সাইজ এবং স্টাইল কাস্টমাইজ করা যায়।

২. Chart.js Zoom Plugin

Chart.js Zoom Plugin ব্যবহার করে আপনি আপনার চার্টে জুমিং এবং প্যানিং ফিচার যোগ করতে পারেন। এটি ইন্টার‌্যাকটিভ চার্টের জন্য খুবই গুরুত্বপূর্ণ, বিশেষ করে যখন চার্টে বিশাল ডেটা থাকে।

• ব্যবহার: এই প্লাগইন দিয়ে ব্যবহারকারী তাদের মাউস স্ক্রল বা ড্র্যাগ করে চার্ট জুম ইন এবং জুম আউট করতে পারবেন।

ইনস্টলেশন (NPM):

npm install chartjs-plugin-zoom

কোড উদাহরণ:

import zoomPlugin from 'chartjs-plugin-zoom';

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Sales Data',
            data: [15, 30, 25, 40, 50],
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false
        }]
    },
    options: {
        plugins: {
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'xy',
                },
                zoom: {
                    enabled: true,
                    mode: 'xy',
                    speed: 0.1
                }
            }
        }
    },
    plugins: [zoomPlugin]
});

কাস্টমাইজেশন:

• pan: চার্ট প্যানিং অপশন কাস্টমাইজ করতে পারেন।
• zoom: জুমের গতির জন্য speed অপশন কাস্টমাইজ করা যায়।

৩. Chart.js Annotation Plugin

Chart.js Annotation Plugin ব্যবহার করে চার্টে লাইন, আর্ক, বা এরিয়ার মতো অ্যানোটেশন যোগ করতে পারেন। এটি ডেটার স্পেসিফিক পয়েন্ট বা রেঞ্জ হাইলাইট করার জন্য ব্যবহৃত হয়।

• ব্যবহার: এই প্লাগইনটি একটি আর্ক বা লাইন অ্যানোটেশন যোগ করতে সাহায্য করে, যা ডেটার মধ্যে গুরুত্বপূর্ণ পয়েন্ট বা রেঞ্জকে হাইলাইট করে।

ইনস্টলেশন (NPM):

npm install chartjs-plugin-annotation

কোড উদাহরণ:

import annotationPlugin from 'chartjs-plugin-annotation';

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Sales Data',
            data: [10, 20, 30, 40, 50],
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false
        }]
    },
    options: {
        plugins: {
            annotation: {
                annotations: [{
                    type: 'line',
                    scaleID: 'x',
                    value: 'March',
                    borderColor: 'red',
                    borderWidth: 2,
                    label: {
                        enabled: true,
                        content: 'Important Point'
                    }
                }]
            }
        }
    },
    plugins: [annotationPlugin]
});

কাস্টমাইজেশন:

• type: 'line': আপনি কোন ধরনের অ্যানোটেশন যোগ করতে চান তা নির্ধারণ করতে পারেন।
• label: অ্যানোটেশনের সাথে একটি লেবেল যোগ করা।

4. Chart.js Watermark Plugin

Watermark Plugin আপনার চার্টে একটি ওয়াটারমার্ক বা লোগো যোগ করতে সহায়ক। এটি বিশেষ করে ব্র্যান্ডিং উদ্দেশ্যে ব্যবহৃত হয়।

সারাংশ

Chart.js প্লাগইন এবং এক্সটেনশন ব্যবহার করে আপনি সহজেই আপনার চার্টে নতুন ফিচার যোগ করতে পারেন। কিছু জনপ্রিয় প্লাগইন যেমন:

• Chart.js Data Labels Plugin: ডেটা পয়েন্টে লেবেল প্রদর্শন।
• Chart.js Zoom Plugin: জুমিং এবং প্যানিং।
• Chart.js Annotation Plugin: চার্টে অ্যানোটেশন (লাইন, আর্ক) যোগ করা।

এই প্লাগইনগুলো আপনার চার্টের কার্যকারিতা এবং ইন্টার‌্যাকটিভিটি বৃদ্ধি করতে সাহায্য করে, এবং চাহিদা অনুযায়ী চার্টে নতুন বৈশিষ্ট্য যোগ করতে সহায়ক।

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 এর প্লাগইনসমূহের মাধ্যমে আপনি অত্যন্ত ইন্টার‌্যাকটিভ এবং দৃষ্টিনন্দন ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন।

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

Custom Plugin তৈরি করার প্রক্রিয়া

Chart.js এ Custom Plugin তৈরি করতে আপনাকে একটি JavaScript অবজেক্ট তৈরি করতে হবে যা Chart.js এর প্লাগইন সিস্টেমে সংযুক্ত হবে। এই অবজেক্টে কিছু মৌলিক মেথড থাকবে, যেমন:

• id: প্লাগইনের একটি একক আইডি যা Chart.js সিস্টেমে চিহ্নিত হবে।
• beforeInit, afterInit, beforeDraw, afterDraw ইত্যাদি মেথড: এগুলি প্লাগইন চলাকালীন বিভিন্ন পর্যায়ে চার্টের আচরণ নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

Custom Plugin উদাহরণ

এখানে একটি সাধারণ কাস্টম প্লাগইন উদাহরণ দেওয়া হলো, যা Chart.js এর চার্টের উপরে একটি কাস্টম টেক্সট প্রদর্শন করবে।

Step 1: Custom Plugin তৈরি

const customPlugin = {
    id: 'customTextPlugin', // Plugin ID
    beforeDraw: function(chart) {
        // Context এবং canvas এলিমেন্ট পান
        const ctx = chart.ctx;
        const width = chart.width;
        const height = chart.height;

        // কাস্টম টেক্সট সেট করা
        const text = 'Custom Text Here!';
        
        // টেক্সট কনফিগারেশন
        ctx.save();
        ctx.font = '30px Arial';
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, width / 2, height / 2); // টেক্সট প্রদর্শন
        ctx.restore();
    }
};

এই প্লাগইনে beforeDraw মেথড ব্যবহার করা হয়েছে, যা চার্টটি আঁকার আগে কাস্টম টেক্সট প্রদর্শন করবে। এখানে ক্যানভাসের কেন্দ্রে একটি কাস্টম টেক্সট "Custom Text Here!" আঁকা হয়েছে।

Step 2: প্লাগইন Chart.js এ যুক্ত করা

Chart.js এ কাস্টম প্লাগইন যুক্ত করার জন্য আপনাকে Chart.js কনফিগারেশনে প্লাগইনটিকে plugins অ্যারে তে অন্তর্ভুক্ত করতে হবে।

// Chart.js কনফিগারেশন
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // Chart type
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5, 2],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: [customPlugin]  // Custom Plugin যুক্ত করা
    }
});

এখানে, plugins: [customPlugin] লাইনটি দিয়ে আপনি আপনার কাস্টম প্লাগইনটি চার্টে যুক্ত করেছেন। এই প্লাগইনটি চার্টটি রেন্ডার করার সময় ক্যানভাসে কাস্টম টেক্সট প্রদর্শন করবে।

Custom Plugin কাস্টমাইজেশন

Chart.js প্লাগইনগুলি আরও কাস্টমাইজ করার জন্য কিছু মেথড এবং অপশন ব্যবহার করা যায়। উদাহরণস্বরূপ:

1. beforeInit: চার্ট শুরু হওয়ার আগে কাস্টম কার্যকলাপ যুক্ত করা।
2. afterDraw: চার্ট আঁকার পর কাস্টম কার্যকলাপ যুক্ত করা।
3. afterUpdate: চার্ট আপডেট হওয়ার পর কার্যকলাপ।

অন্য একটি উদাহরণ (কাস্টম টুলটিপ)

const customTooltipPlugin = {
    id: 'customTooltip',
    afterEvent: function(chart, event) {
        if (event.type === 'mousemove') {
            const tooltip = chart.tooltip;
            tooltip.setActiveElements([{
                datasetIndex: 0,
                index: 0
            }], {x: event.x, y: event.y});
            chart.update();
        }
    }
};

এখানে, afterEvent মেথড ব্যবহার করা হয়েছে, যা মাউস মুভ করার সময় চার্টের প্রথম ডেটাসেটের প্রথম পয়েন্টকে সিলেক্ট করবে এবং কাস্টম টুলটিপ তৈরি করবে।

প্লাগইন অপশনগুলির মেথডস

Chart.js প্লাগইন সিস্টেমে কয়েকটি স্ট্যান্ডার্ড মেথড রয়েছে, যা প্লাগইনের কাজ করতে সাহায্য করে:

• beforeInit: চার্ট ইনিশিয়ালাইজ হওয়ার আগে।
• afterInit: চার্ট ইনিশিয়ালাইজ হওয়ার পরে।
• beforeDraw: চার্ট আঁকার আগে।
• afterDraw: চার্ট আঁকার পরে।
• beforeUpdate: চার্ট আপডেট হওয়ার আগে।
• afterUpdate: চার্ট আপডেট হওয়ার পরে।
• beforeDataLimits: ডেটা লিমিটের আগে।
• afterDataLimits: ডেটা লিমিটের পরে।

সারাংশ

Chart.js এ কাস্টম প্লাগইন তৈরি করা একটি অত্যন্ত শক্তিশালী ফিচার, যা আপনার চার্টের কার্যকারিতা এবং প্রদর্শন কাস্টমাইজ করতে সাহায্য করে। আপনি beforeDraw, afterDraw, beforeInit, afterInit এবং অন্যান্য মেথড ব্যবহার করে প্লাগইন কাস্টমাইজ করতে পারেন। এটি আপনাকে সম্পূর্ণ নতুন বৈশিষ্ট্য বা অতিরিক্ত ফিচার যোগ করার সুযোগ দেয়, যা স্ট্যান্ডার্ড Chart.js বৈশিষ্ট্যগুলি পূর্ণ করে।

Chart.js এ Data Labels Plugin ব্যবহার করা একটি শক্তিশালী উপায়, যা আপনাকে চার্টে ডেটা পয়েন্টের উপর সঠিক মান বা লেবেল প্রদর্শন করতে সাহায্য করে। এই প্লাগইনটি চার্টের ভিজ্যুয়ালাইজেশন উন্নত করতে, আরও স্পষ্টভাবে ডেটা প্রদর্শন করতে এবং ব্যবহারকারীর অভিজ্ঞতা বাড়াতে ব্যবহৃত হয়।

Data Labels Plugin মূলত ডেটা পয়েন্টগুলোর উপর লেবেল দেখানোর জন্য ব্যবহৃত হয়, যা বিশেষভাবে গুরুত্বপূর্ণ যখন আপনি চাচ্ছেন যে, আপনার চার্টে প্রতিটি ডেটা পয়েন্টের মান ব্যবহারকারীরা সরাসরি দেখতে পারেন।

১. Data Labels Plugin ইনস্টল করা

প্রথমে আপনাকে Chart.js Data Labels Plugin ইনস্টল করতে হবে। এটি NPM বা CDN-এর মাধ্যমে করা যেতে পারে।

NPM এর মাধ্যমে ইনস্টল:

npm install chartjs-plugin-datalabels

CDN এর মাধ্যমে ইনস্টল:

Chart.js এবং Data Labels Plugin-এর CDN লিঙ্ক যোগ করুন:

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

২. Data Labels Plugin কনফিগারেশন

এবার, Chart.js এর কনফিগারেশনে Data Labels Plugin ব্যবহার করা হবে। নিচে একটি উদাহরণ দেওয়া হলো যেখানে bar chart এ ডেটা লেবেল প্রদর্শন করা হয়েছে।

উদাহরণ: Data Labels Plugin ব্যবহার করে একটি বার চার্ট তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Data Labels Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');

        const myChart = new Chart(ctx, {
            type: 'bar', // Chart type
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // X-axis labels
                datasets: [{
                    label: 'Votes',
                    data: [12, 19, 3, 5, 2], // Data points for Y-axis
                    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)'
                    ],
                    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)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    datalabels: {
                        display: true, // Display data labels
                        color: 'black', // Text color for data labels
                        font: {
                            size: 14, // Font size for the labels
                            weight: 'bold' // Font weight
                        },
                        align: 'center', // Label alignment (top, bottom, center)
                        formatter: function(value) {
                            return value + ' Votes'; // Custom formatting for labels
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

কোডের ব্যাখ্যা:

1. Plugin সক্রিয় করা: plugins: { datalabels: { ... } } অংশের মাধ্যমে Data Labels Plugin সক্রিয় করা হয়।
2. display: true: এটি Data Labels কে চার্টে প্রদর্শন করতে সক্ষম করে।
3. color: লেবেলের টেক্সটের রঙ সেট করে।
4. font: লেবেলের ফন্ট সাইজ এবং ফন্ট ওয়েট কাস্টমাইজ করা হয়।
5. align: লেবেলের অবস্থান (যেমন top, bottom, center) নির্ধারণ করা হয়।
6. formatter: লেবেলের কাস্টম ফরম্যাট নির্ধারণ করা হয়, যেখানে আপনি ডেটার সাথে স্ট্যাটিক টেক্সট যুক্ত করতে পারেন (যেমন ' Votes')।

৩. Data Labels Plugin এর কাস্টমাইজেশন

Chart.js Data Labels Plugin এর সাহায্যে আপনি ডেটা লেবেলগুলোর বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করতে পারেন:

1. Positioning (অবস্থান): আপনি Data Labels-এর অবস্থান (যেমন টপ, বটম, সেন্টার) কাস্টমাইজ করতে পারেন।
2. Font Size, Font Color, Font Weight: টেক্সটের ফন্ট সাইজ, ফন্ট কালার এবং ফন্ট ওয়েট পরিবর্তন করতে পারেন।
3. Visibility Control (দেখানো বা লুকানো): display প্যারামিটার দিয়ে Data Labels দেখানো বা লুকানো যায়।
4. Conditional Formatting: formatter ফাংশন দিয়ে আপনি ডেটা লেবেলগুলির কন্টেন্ট কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি যদি শুধুমাত্র নির্দিষ্ট মানের ডেটা পয়েন্টের জন্য লেবেল দেখাতে চান, তবে এটি নিয়ন্ত্রণ করা যেতে পারে।

উদাহরণ:

options: {
    plugins: {
        datalabels: {
            color: function(context) {
                // Display red for values greater than 10, otherwise blue
                return context.dataset.data[context.dataIndex] > 10 ? 'red' : 'blue';
            },
            font: {
                size: 12,
                weight: 'bold'
            },
            align: 'top', // Position the label at the top of the bar
            formatter: function(value) {
                return value + ' units'; // Append 'units' to each label
            }
        }
    }
}

Data Labels Plugin এর অন্যান্য বৈশিষ্ট্য

• clamp: এটি ডেটা লেবেলগুলোকে গ্রাফের সীমার মধ্যে আটকে রাখে, যাতে তারা অতিরিক্ত বড় না হয়ে যায়।
• padding: লেবেলের চারপাশে প্যাডিং নির্ধারণ করে যাতে লেবেলগুলি আরও স্পষ্টভাবে দেখতে পাওয়া যায়।

datalabels: {
    clamp: true, // Prevent labels from going outside the chart
    padding: 10, // Padding around the labels
}

সারাংশ

Chart.js এর Data Labels Plugin ব্যবহার করে আপনি আপনার চার্টে ডেটা পয়েন্টগুলোর উপর লেবেল প্রদর্শন করতে পারেন। এটি আপনার চার্টকে আরও তথ্যপূর্ণ এবং ব্যবহারকারীদের জন্য আরও সহজবোধ্য করে তোলে। আপনি লেবেলগুলির অবস্থান, আকার, রঙ, এবং কন্টেন্ট কাস্টমাইজ করতে পারেন এবং টুলটিপের সাথে আরও তথ্য প্রদান করতে পারেন।

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

এই এক্সটেনশনগুলি ব্যবহার করে আপনি আপনার চার্টে অ্যানিমেশন, ইন্টার‌্যাকটিভ ফিচার, কাস্টম টুলটিপ, লেজেন্ড, স্কেল কাস্টমাইজেশন, এবং আরো অনেক কিছু যোগ করতে পারবেন।

নিচে কিছু জনপ্রিয় Chart.js এক্সটেনশন এর পরিচিতি দেওয়া হলো:

১. Chart.js Data Labels

Chart.js Data Labels প্লাগইন Chart.js এর চার্টে ডেটা লেবেলগুলি দেখানোর জন্য ব্যবহৃত হয়। এই প্লাগইন দিয়ে আপনি আপনার চার্টের প্রতিটি ডেটা পয়েন্টের উপর সরাসরি ডেটা লেবেল বা সংখ্যা প্রদর্শন করতে পারেন, যা চার্টের তথ্য আরও পরিষ্কার করে তোলে।

ব্যবহার:

• বার চার্ট, পাই চার্ট, ডোনাট চার্ট ইত্যাদিতে ডেটার মান দেখাতে।

ইনস্টলেশন:

npm install chartjs-plugin-datalabels

কোড উদাহরণ:

Chart.plugins.register(ChartDataLabels);

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        plugins: {
            datalabels: {
                anchor: 'end', // Position of the labels
                align: 'top', // Align the labels
                font: {
                    weight: 'bold',
                    size: 14
                }
            }
        }
    }
});

২. Chart.js Annotation Plugin

Chart.js Annotation Plugin Chart.js এর মধ্যে অ্যানোটেশন (এমতঃ ফিচার) যোগ করার জন্য ব্যবহৃত হয়। এটি আপনাকে আপনার চার্টে লাইনের মাধ্যমে আন্ডারলাইন, লাইন বা এলাকা হাইলাইট করতে সক্ষম করে।

ব্যবহার:

• চার্টে লাইন, আন্ডারলাইন, রেকটেঙ্গল বা পয়েন্ট অ্যানোটেশন যোগ করা।
• কোনো গুরুত্বপূর্ণ ডেটা পয়েন্ট বা বিভাগকে হাইলাইট করা।

ইনস্টলেশন:

npm install chartjs-plugin-annotation

কোড উদাহরণ:

Chart.plugins.register(ChartAnnotation);

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5],
            borderColor: 'rgba(54, 162, 235, 1)',
            fill: false
        }]
    },
    options: {
        annotations: {
            annotations: [{
                type: 'line',
                mode: 'vertical',
                scaleID: 'x',
                value: 'March',
                borderColor: 'red',
                borderWidth: 2
            }]
        }
    }
});

৩. Chart.js Zoom and Pan

Chart.js Zoom and Pan প্লাগইন দিয়ে আপনি চার্টের মধ্যে জুম ইন/আউট এবং প্যান করার ফিচার যোগ করতে পারেন। এটি আপনার চার্টে ডেটা বিশ্লেষণের জন্য ইন্টার‌্যাকটিভ ফিচার যোগ করে, বিশেষ করে যখন বড় ডেটাসেট থাকে।

ব্যবহার:

• ডেটা বিশ্লেষণ সহজ করতে জুম ইন/আউট।
• ডেটার মধ্যে প্যানিং।

ইনস্টলেশন:

npm install chartjs-plugin-zoom

কোড উদাহরণ:

Chart.plugins.register(ChartZoom);

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5, 2, 3, 12],
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false
        }]
    },
    options: {
        responsive: true,
        plugins: {
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'xy'
                },
                zoom: {
                    enabled: true,
                    mode: 'xy'
                }
            }
        }
    }
});

৪. Chart.js Regessions

Chart.js Regessions প্লাগইন Chart.js এর সাহায্যে রিগ্রেশন (যেমন লিনিয়ার রিগ্রেশন) রেখা প্রদর্শন করতে সহায়তা করে। এটি ডেটার একটি প্রবণতা দেখাতে সহায়ক।

ব্যবহার:

• ডেটার প্রবণতা বা ট্রেন্ড দেখানোর জন্য রিগ্রেশন রেখা যোগ করা।

ইনস্টলেশন:

npm install chartjs-chart-regression

কোড উদাহরণ:

Chart.plugins.register(ChartRegressions);

const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{ x: 1, y: 1 }, { x: 2, y: 4 }, { x: 3, y: 9 }],
            backgroundColor: 'rgba(75, 192, 192, 1)'
        }]
    },
    options: {
        plugins: {
            regression: {
                type: 'linear',
                lineColor: 'red',
                lineWidth: 3
            }
        }
    }
});

৫. Chart.js Plugin for Filler

Chart.js Filler Plugin ব্যবহার করে আপনি বার বা আন্ডারলাইন চার্টে ফিল যুক্ত করতে পারেন। এটি চার্টের নিচের অংশে বা ভিতরে রং দিয়ে একটি ভরাট (fill) যোগ করে।

ব্যবহার:

• চার্টে ফিল বা পূর্ণতা যোগ করা, যেমন একটি এলাকা রঙিন বা পূর্ণ করা।

ইনস্টলেশন:

npm install chartjs-plugin-filler

কোড উদাহরণ:

Chart.plugins.register(ChartFiller);

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5],
            fill: true, // Enable fill
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2
        }]
    }
});

সারাংশ

Chart.js এর এক্সটেনশন বা প্লাগইনগুলি Chart.js এর ক্ষমতাকে বিস্তৃত করে এবং বিভিন্ন নতুন ফিচার যোগ করতে সহায়ক। উপরোক্ত এক্সটেনশনগুলি ব্যবহার করে আপনি:

• ডেটা লেবেল যোগ করতে পারেন (Chart.js Data Labels),
• চার্টে অ্যানোটেশন এবং লাইনের মাধ্যমে হাইলাইট যোগ করতে পারেন (Chart.js Annotation),
• চার্টে জুম এবং প্যান ফিচার যুক্ত করতে পারেন (Chart.js Zoom and Pan),
• রিগ্রেশন রেখা প্রদর্শন করতে পারেন (Chart.js Regression),
• এবং আরো অনেক কাস্টমাইজেশন করতে পারেন।

এই এক্সটেনশনগুলি আপনাকে Chart.js কে আরও শক্তিশালী এবং ইন্টার‌্যাকটিভ করতে সাহায্য করবে।