X এবং Y Axes কাস্টমাইজেশন

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

1. X এবং Y Axes এর শিরোনাম কাস্টমাইজেশন

Chart.js এ আপনি এক্স এবং ওয়াই অক্ষের জন্য শিরোনাম যুক্ত করতে পারেন, যা গ্রাফে প্রদর্শিত হবে। এই কাস্টমাইজেশনটি আপনাকে প্রতিটি অক্ষের উদ্দেশ্য বা মাপ স্পষ্টভাবে বোঝাতে সাহায্য করে।

উদাহরণ: X এবং Y Axes এর শিরোনাম কাস্টমাইজেশন

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Color Categories'  // X অক্ষের শিরোনাম
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'Number of Votes'  // Y অক্ষের শিরোনাম
                },
                beginAtZero: true // Y অক্ষ শূন্য থেকে শুরু হবে
            }
        }
    }
});

এখানে, title অপশন ব্যবহার করে এক্স এবং ওয়াই অক্ষের শিরোনাম কাস্টমাইজ করা হয়েছে।

2. Ticks কাস্টমাইজেশন

Chart.js এ ticks এক্স এবং ওয়াই অক্ষের মানের পয়েন্টগুলিকে নির্দেশ করে। আপনি ticks এর সাইজ, রঙ, ফন্ট, এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।

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

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                ticks: {
                    font: {
                        size: 16,   // X অক্ষের টিকের ফন্ট সাইজ
                        weight: 'bold',
                        family: 'Arial'
                    },
                    color: 'rgba(54, 162, 235, 1)'  // X অক্ষের টিকের রঙ
                }
            },
            y: {
                ticks: {
                    font: {
                        size: 14,  // Y অক্ষের টিকের ফন্ট সাইজ
                        weight: 'normal',
                        family: 'Verdana'
                    },
                    color: 'rgba(255, 99, 132, 1)'  // Y অক্ষের টিকের রঙ
                },
                beginAtZero: true
            }
        }
    }
});

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

3. Grid Lines কাস্টমাইজেশন

Grid lines চার্টের পটভূমিতে রেখা প্রদর্শন করে, যা ডেটা পয়েন্টের মধ্যে বিভাজন সৃষ্টি করে। আপনি গ্রিডলাইনের রঙ, প্রস্থ, স্টাইল ইত্যাদি কাস্টমাইজ করতে পারেন।

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

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                grid: {
                    color: 'rgba(0, 0, 0, 0.1)',  // X অক্ষের গ্রিডলাইন রঙ
                    lineWidth: 1  // গ্রিডলাইনের প্রস্থ
                }
            },
            y: {
                grid: {
                    color: 'rgba(0, 0, 0, 0.2)',  // Y অক্ষের গ্রিডলাইন রঙ
                    lineWidth: 1.5,  // গ্রিডলাইনের প্রস্থ
                    borderDash: [5, 5]  // গ্রিডলাইনের ড্যাশ প্যাটার্ন
                },
                beginAtZero: true
            }
        }
    }
});

এখানে, grid অপশন ব্যবহার করে গ্রিডলাইনের রঙ, প্রস্থ, এবং ড্যাশ প্যাটার্ন কাস্টমাইজ করা হয়েছে।

4. Scale Type কাস্টমাইজেশন (Linear এবং Logarithmic)

Chart.js এ আপনি এক্স এবং ওয়াই অক্ষের স্কেল টাইপ কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, এক্স বা ওয়াই অক্ষের জন্য linear বা logarithmic স্কেল ব্যবহার করতে পারেন।

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

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: 'Votes',
            data: [12, 100, 1000, 5000],  // ডেটা সাইজের পার্থক্য
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                type: 'logarithmic',  // লগারিদমিক স্কেল
                ticks: {
                    min: 1, // Y অক্ষের ন্যূনতম মান
                    max: 10000, // Y অক্ষের সর্বাধিক মান
                    stepSize: 1 // স্কেল স্টেপ সাইজ
                }
            }
        }
    }
});

এখানে, type: 'logarithmic' ব্যবহার করা হয়েছে, যা লোগারিদমিক স্কেল তৈরি করবে এবং ডেটার বড় সাইজের পার্থক্যগুলিকে আরও স্পষ্টভাবে প্রদর্শন করবে।

5. Offset Axes

Chart.js-এ offset অপশন ব্যবহার করে আপনি অক্ষের শূন্যস্থান কাস্টমাইজ করতে পারেন, যা ডেটার উপস্থাপনাকে আরো স্পষ্ট এবং সহজবোধ্য করে তোলে।

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

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Temperature',
            data: [10, 20, 30, 40],
            borderColor: 'rgba(255, 99, 132, 1)',
            fill: false
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                ticks: {
                    beginAtZero: true,  // Y অক্ষ শূন্য থেকে শুরু হবে
                    padding: 10  // টিক্সের মধ্যে বেশি জায়গা থাকবে
                },
                offset: true  // Y অক্ষের মধ্যে শূন্যস্থান
            }
        }
    }
});

এখানে, offset: true সেটিংটি Y অক্ষের মধ্যে শূন্যস্থান বা ভিন্ন অবস্থান তৈরি করবে।

সারাংশ

Chart.js এ X এবং Y Axes কাস্টমাইজেশন ব্যবহারকারীদের জন্য চার্টকে আরও কার্যকরী এবং অ্যাডভান্সড করে তোলে। আপনি axes এর শিরোনাম, টিক্স, গ্রিডলাইন, স্কেল টাইপ এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করে আপনার চার্টের ডেটা উপস্থাপনাকে আরও স্পষ্ট ও আকর্ষণীয় করতে পারবেন।