Multi-Axis চার্ট তৈরি করা

Multi-Axis চার্ট হলো এমন একটি চার্ট, যেখানে একাধিক অক্ষ ব্যবহার করা হয়। এটি যখন প্রয়োজন হয়, যেখানে এক্স-অক্ষ বা ওয়াই-অক্ষের ডেটার স্কেল বা মান আলাদা হয়, তখন multi-axis চার্ট বিশেষভাবে কার্যকর। উদাহরণস্বরূপ, আপনি যখন একে একে দুটি ভিন্ন ধরনের ডেটা (যেমন সেলস এবং তাপমাত্রা) প্রদর্শন করতে চান, তখন Multi-Axis চার্ট ব্যবহার করতে পারেন।

Chart.js তে Multi-Axis চার্ট তৈরি করতে আপনি একাধিক ওয়াই বা এক্স অক্ষ ব্যবহার করতে পারেন, এবং প্রতিটি অক্ষের জন্য আলাদা স্কেল বা রেঞ্জ কনফিগার করতে পারেন।

Multi-Axis Chart এর কনফিগারেশন

নিচে একটি উদাহরণ দেয়া হয়েছে যেখানে একটি বার চার্ট এবং লাইন চার্ট একসাথে একাধিক অক্ষের মাধ্যমে প্রদর্শিত হবে। এখানে সেলস ডেটার জন্য একটি বার চার্ট এবং তাপমাত্রার জন্য একটি লাইন চার্ট ব্যবহার করা হবে, এবং প্রতিটির জন্য আলাদা ওয়াই অক্ষ থাকবে।

উদাহরণ: Multi-Axis Chart (Bar + Line)

// Get the context of the canvas element
const ctx = document.getElementById('myChart').getContext('2d');

// Create the chart
const myChart = new Chart(ctx, {
    type: 'bar', // Chart type: Bar Chart
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'], // X-axis labels
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5, 2], // Sales data for bar chart
            backgroundColor: 'rgba(75, 192, 192, 0.2)', // Bar color
            borderColor: 'rgba(75, 192, 192, 1)', // Border color for bars
            borderWidth: 1,
            yAxisID: 'y1' // Associate this dataset with the first y-axis
        },
        {
            label: 'Temperature',
            data: [22, 25, 28, 30, 32], // Temperature data for line chart
            borderColor: 'rgba(255, 99, 132, 1)', // Line color
            backgroundColor: 'rgba(255, 99, 132, 0.2)', // Area under line
            fill: true, // Fill the area under the line
            borderWidth: 2,
            tension: 0.1, // Line smoothing
            yAxisID: 'y2' // Associate this dataset with the second y-axis
        }]
    },
    options: {
        responsive: true, // Make the chart responsive
        scales: {
            // Define the first y-axis for Sales
            y1: {
                type: 'linear',
                position: 'left', // Position this axis on the left
                ticks: {
                    beginAtZero: true
                }
            },
            // Define the second y-axis for Temperature
            y2: {
                type: 'linear',
                position: 'right', // Position this axis on the right
                ticks: {
                    beginAtZero: true
                }
            }
        }
    }
});

কনফিগারেশন ব্যাখ্যা

1. type: 'bar': চার্টের ধরন নির্ধারণ করা হয়েছে bar হিসেবে। এখানে বার চার্ট এবং লাইন চার্ট একসাথে ব্যবহার হচ্ছে।
2. datasets: দুটি আলাদা ডেটাসেট:
   • Sales: একটি বার চার্ট হিসেবে প্রদর্শিত হবে এবং প্রথম ওয়াই অক্ষ y1 এর সাথে সম্পর্কিত।
   • Temperature: একটি লাইন চার্ট হিসেবে প্রদর্শিত হবে এবং দ্বিতীয় ওয়াই অক্ষ y2 এর সাথে সম্পর্কিত।
3. yAxisID: এই প্রপার্টির মাধ্যমে, প্রতিটি ডেটাসেট কে আলাদা আলাদা ওয়াই অক্ষের সাথে যুক্ত করা হয়।
   • y1 এবং y2 প্রতিটি ডেটাসেটের জন্য আলাদা ওয়াই অক্ষ নির্ধারণ করে।
4. position: y1 অক্ষটি বামে এবং y2 অক্ষটি ডানে রাখা হয়েছে, যাতে দুটি অক্ষের স্কেল আলাদা ভাবে প্রদর্শিত হয়।
5. scales:
   • y1: প্রথম ওয়াই অক্ষের জন্য স্কেল কনফিগারেশন (বিক্রির জন্য)।
   • y2: দ্বিতীয় ওয়াই অক্ষের জন্য স্কেল কনফিগারেশন (তাপমাত্রার জন্য)।

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

1. Multiple Datasets: আপনি একাধিক ডেটাসেট যুক্ত করতে পারেন, যেখানে প্রতিটি ডেটাসেটের জন্য আলাদা এক্স বা ওয়াই অক্ষ ব্যবহার করা হবে।
2. স্কেল কাস্টমাইজেশন: প্রতি অক্ষের জন্য আলাদা স্কেল এবং টিক্স কাস্টমাইজ করা যায়, যেমন প্রতিটি অক্ষের জন্য আলাদা রেঞ্জ, স্টেপ সাইজ, এবং টিক্সের আকার।
3. fill প্রপার্টি: লাইন চার্টের নিচে ভরাট যোগ করতে fill: true ব্যবহার করা হয়েছে।

Multi-Axis Chart এর অন্যান্য উদাহরণ

আপনি একইভাবে একাধিক এক্স অক্ষও ব্যবহার করতে পারেন, যেখানে একাধিক ক্যাটাগরি বা সময়ভিত্তিক ডেটা একসাথে প্রদর্শিত হবে।

সারাংশ

Multi-Axis চার্ট Chart.js এ একটি শক্তিশালী বৈশিষ্ট্য, যা একাধিক অক্ষ ব্যবহার করে একে একে ভিন্ন ভিন্ন স্কেল ও রেঞ্জে ডেটা প্রদর্শন করতে সহায়তা করে। এটি খুবই উপকারী যখন আপনার ডেটার স্কেল বা পরিসর আলাদা হয় এবং আপনি একাধিক ধরনের ডেটা একই চার্টে তুলনা করতে চান। Chart.js এর yAxisID এবং xAxisID এর মাধ্যমে আপনি আলাদা অক্ষ কাস্টমাইজ এবং যুক্ত করতে পারবেন।