Web Development Chart.js এর Options এবং Configuration গাইড ও নোট

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

Chart.js-এর Options এবং Configuration মূলত ৩টি প্রধান বিভাগে ভাগ করা যায়:

1. Chart Configuration (চার্ট কনফিগারেশন)
2. Chart Data (চার্ট ডেটা)
3. Chart Options (চার্ট অপশনস)

১. Chart Configuration

Chart.js চার্ট কনফিগারেশনের জন্য একটি JavaScript অবজেক্ট ব্যবহার করে। এতে চার্টের ধরন, ডেটা এবং অন্যান্য স্টাইল কনফিগারেশন নির্ধারণ করা হয়।

Chart.js Configuration Structure:

const chart = new Chart(ctx, {
    type: 'bar', // Chart type (Bar, Line, Pie, etc.)
    data: {
        // Data configuration
    },
    options: {
        // Chart options and customizations
    }
});

• type: এখানে আপনি চার্টের ধরন (যেমন bar, line, pie, doughnut ইত্যাদি) নির্ধারণ করবেন।
• data: এখানে আপনার চার্টের জন্য প্রয়োজনীয় ডেটা এবং লেবেল সংজ্ঞায়িত করা হয়।
• options: এখানে চার্টের কাস্টমাইজেশন এবং অপশনাল সেটিংস নির্ধারণ করা হয়।

২. Chart Data

data অংশে, চার্টের জন্য সমস্ত ডেটা এবং লেবেল সংজ্ঞায়িত করা হয়। এটি সাধারণত ৩টি উপাদান থাকে:

1. labels: এক্স-অক্ষের লেবেল।
2. datasets: ডেটা পয়েন্ট, স্টাইল এবং অন্যান্য বৈশিষ্ট্য।

উদাহরণ:

data: {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
        label: 'Monthly Sales',
        data: [12, 19, 3, 5],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
    }]
}

• labels: এক্স-অক্ষের লেবেল প্রদান করা হয়।
• datasets: ডেটা এবং তার সাথে সম্পর্কিত কাস্টমাইজেশন (যেমন রং, বর্ডার রং, লাইন স্টাইল) এখানে দেওয়া হয়।

৩. Chart Options

options অংশে, Chart.js এর বিভিন্ন কাস্টমাইজেশন সেট করা হয়। এখানে চার্টের আকার, স্কেল, অ্যানিমেশন এবং অন্যান্য সেটিংস নির্ধারণ করা হয়। এর মধ্যে কয়েকটি গুরুত্বপূর্ণ অপশন হলো:

১. Responsive

responsive: true ব্যবহার করলে চার্ট স্ক্রীনের আকার অনুসারে রেসপন্সিভ হয়ে যাবে।

options: {
    responsive: true,
}

২. Scales

এটি এক্স এবং ওয়াই অক্ষের স্কেল কনফিগার করতে ব্যবহৃত হয়। beginAtZero ব্যবহার করলে ওয়াই অক্ষ শূন্য থেকে শুরু হবে।

options: {
    scales: {
        y: {
            beginAtZero: true
        }
    }
}

৩. Legend

লেজেন্ড চার্টের নাম বা ডেটাসেটের পরিচিতি প্রদর্শন করে। আপনি লেজেন্ডের অবস্থানও কাস্টমাইজ করতে পারেন।

options: {
    plugins: {
        legend: {
            display: true,  // লেজেন্ড দেখাবে
            position: 'top' // লেজেন্ডের অবস্থান
        }
    }
}

৪. Tooltips

টুলটিপ ব্যবহারকারীকে চার্টের উপরে হোভার করলে তথ্য দেখানোর জন্য ব্যবহৃত হয়।

options: {
    plugins: {
        tooltip: {
            enabled: true,  // টুলটিপ সক্রিয়
            mode: 'index'   // টুলটিপে ডেটা দেখানোর ধরন
        }
    }
}

৫. Animation

Chart.js একটি প্রাক-সংজ্ঞায়িত অ্যানিমেশন প্রক্রিয়া সরবরাহ করে যা ডেটা আপডেটের সময় চার্টে অ্যানিমেশন যোগ করে।

options: {
    animation: {
        duration: 1000, // অ্যানিমেশন সময়কাল (মিলিসেকেন্ড)
        easing: 'easeOutBounce'  // অ্যানিমেশন ইফেক্ট
    }
}

৬. MaintainAspectRatio

Chart.js এ ডিফল্টভাবে চার্টের রেসপন্সিভতা বজায় রাখতে aspectRatio সেট করা থাকে। আপনি এটি পরিবর্তন করে চার্টের আকার কাস্টমাইজ করতে পারেন।

options: {
    responsive: true,
    maintainAspectRatio: false  // রেসপন্সিভ ডিভাইসের জন্য
}

৭. Title

চার্টের উপরে টাইটেল প্রদর্শন করতে title কাস্টমাইজ করা যায়।

options: {
    plugins: {
        title: {
            display: true,
            text: 'Monthly Sales Data'
        }
    }
}

পূর্ণাঙ্গ উদাহরণ: বার চার্ট কনফিগারেশন

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // Chart type
    data: {
        labels: ['January', 'February', 'March', 'April'], // X-axis labels
        datasets: [{
            label: 'Monthly Sales',
            data: [12, 19, 3, 5], // 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)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true, // Make the chart responsive
        scales: {
            y: {
                beginAtZero: true // Start Y-axis from zero
            }
        },
        plugins: {
            legend: {
                display: true, // Display legend
                position: 'top' // Position of legend
            },
            tooltip: {
                enabled: true // Enable tooltips
            }
        }
    }
});

সারাংশ

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