Bar Chart কাস্টমাইজেশন (Colors, Widths, Labels)

Chart.js এর মাধ্যমে বার চার্ট (Bar Chart) কাস্টমাইজ করা খুবই সহজ এবং নমনীয়। আপনি বিভিন্ন উপাদান যেমন রঙ, প্রস্থ, লেবেল, বর্ডার ইত্যাদি কাস্টমাইজ করতে পারেন। এখানে Bar Chart এর কাস্টমাইজেশন নিয়ে বিস্তারিত আলোচনা করা হলো, যাতে আপনি আপনার চার্টটিকে আরও দৃষ্টিনন্দন এবং ব্যবহারকারীর জন্য উপযোগী করে তুলতে পারেন।

1. Bar Chart রঙ কাস্টমাইজেশন (Colors)

Chart.js এ বার চার্টের রঙ কাস্টমাইজ করতে backgroundColor এবং borderColor প্রপার্টি ব্যবহার করা হয়।

• backgroundColor: বারগুলোর ভিতরের রঙ।
• borderColor: বারগুলোর বর্ডার রঙ।
• borderWidth: বর্ডারের প্রস্থ।

উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',  // Red bar color
                'rgba(54, 162, 235, 0.2)',  // Blue bar color
                'rgba(75, 192, 192, 0.2)',  // Green bar color
                'rgba(255, 159, 64, 0.2)'   // Yellow bar color
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
    }
});

এখানে, প্রতিটি বার (Red, Blue, Green, Yellow) এর রঙ এবং বর্ডার আলাদা করা হয়েছে।

2. Bar Width কাস্টমাইজেশন (Bar Width)

Chart.js এ বারগুলোর প্রস্থ কাস্টমাইজ করতে barThickness বা categoryPercentage ব্যবহার করা যায়।

• barThickness: একটি নির্দিষ্ট প্রস্থ নির্ধারণ করে।
• categoryPercentage: ক্যাটাগরি অনুযায়ী বারগুলোর প্রস্থ নিয়ন্ত্রণ করে, যাতে বেশ কয়েকটি বার একসাথে উপস্থাপিত হতে পারে।

উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
            barThickness: 40  // নির্দিষ্ট প্রস্থ
        }]
    },
    options: {
        responsive: true,
    }
});

এখানে, barThickness এর মাধ্যমে একটি নির্দিষ্ট প্রস্থ দেওয়া হয়েছে, যা বারগুলোর আকার নিয়ন্ত্রণ করবে।

3. Labels কাস্টমাইজেশন (Labels)

Chart.js এ বার চার্টের labels কাস্টমাইজ করার মাধ্যমে এক্স-অক্ষের লেবেল পরিবর্তন করা যায়। আপনি লেবেলগুলির ফন্ট, সাইজ, রঙ, এবং অবস্থান কাস্টমাইজ করতে পারেন।

উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow'],  // লেবেলগুলি
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                ticks: {
                    font: {
                        size: 16,  // লেবেলের ফন্ট সাইজ
                        weight: 'bold',  // ফন্টের ওজন
                        family: 'Arial'  // ফন্টের পরিবার
                    },
                    color: 'rgba(54, 162, 235, 1)'  // লেবেলের রঙ
                }
            },
            y: {
                beginAtZero: true
            }
        }
    }
});

এখানে, এক্স-অক্ষের লেবেলগুলির ফন্ট সাইজ, ফন্টের পরিবার এবং রঙ কাস্টমাইজ করা হয়েছে। আপনি এখানে ticks প্রপার্টি ব্যবহার করে আরও কাস্টমাইজেশন করতে পারেন।

4. Bar Chart এর অ্যানিমেশন কাস্টমাইজেশন

Chart.js এ অ্যানিমেশনও কাস্টমাইজ করা যায়। আপনি animation অপশন ব্যবহার করে বার চার্টের অ্যানিমেশন সন্নিবেশ করতে পারেন।

উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        animation: {
            duration: 1500,  // অ্যানিমেশন সময়কাল
            easing: 'easeOutBounce'  // অ্যানিমেশন ইফেক্ট
        }
    }
});

এখানে animation অপশন দিয়ে অ্যানিমেশন সময়কাল এবং ইফেক্ট কাস্টমাইজ করা হয়েছে।

5. Stacked Bar Chart কাস্টমাইজেশন

Stacked বার চার্ট ব্যবহার করে একাধিক ডেটাসেট একই গ্রাফে স্তরে স্তরে দেখানো যায়। এটি scales এবং stacked অপশন দিয়ে কাস্টমাইজ করা হয়।

উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow'],
        datasets: [{
            label: 'Votes A',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(255, 99, 132, 0.2)'
        }, {
            label: 'Votes B',
            data: [6, 8, 4, 2],
            backgroundColor: 'rgba(54, 162, 235, 0.2)'
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                stacked: true
            },
            y: {
                stacked: true
            }
        }
    }
});

এখানে, stacked: true দিয়ে দুইটি ডেটাসেটকে একে অপরের উপর স্তরে স্তরে দেখানো হচ্ছে।

সারাংশ

Chart.js দিয়ে Bar Chart কাস্টমাইজ করতে আপনি বিভিন্ন উপাদান পরিবর্তন করতে পারেন, যেমন:

• Colors: বারগুলোর রঙ এবং বর্ডার রঙ কাস্টমাইজ করা।
• Widths: বারগুলোর প্রস্থ এবং বর্ডারের প্রস্থ কাস্টমাইজ করা।
• Labels: এক্স-অক্ষের এবং ওয়াই-অক্ষের লেবেল কাস্টমাইজ করা, যেমন ফন্ট, সাইজ, রঙ ইত্যাদি।
• Animation: চার্টের অ্যানিমেশন কাস্টমাইজ করা।

এই কাস্টমাইজেশনগুলো আপনার চার্টকে আরও দৃষ্টিনন্দন এবং কার্যকরী করতে সাহায্য করবে।