Chart.js এর বেসিক কনফিগারেশন

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

Chart.js এর মৌলিক গঠন

Chart.js চার্ট তৈরির জন্য তিনটি প্রধান জিনিস প্রয়োজন:

1. type: চার্টের ধরন (যেমন লাইন, বার, পাই ইত্যাদি)।
2. data: চার্টের ডেটাসেট এবং লেবেল।
3. options: চার্টের কাস্টমাইজেশন অপশন।

বেসিক উদাহরণ

নিচে একটি বেসিক বার চার্ট কনফিগারেশন দেওয়া হলো:

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'bar', // চার্টের ধরন
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'], // এক্স-অক্ষের লেবেল
        datasets: [{
            label: 'Monthly Sales', // ডেটাসেটের নাম
            data: [12, 19, 3, 5, 2], // ডেটা পয়েন্ট
            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, // চার্ট রেসপন্সিভ হবে
        scales: {
            y: {
                beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
            }
        }
    }
});

কনফিগারেশন ডিটেইলস

১. type

চার্টের ধরন নির্ধারণ করে। Chart.js নিম্নলিখিত চার্ট টাইপ সাপোর্ট করে:

• bar (বার চার্ট)
• line (লাইন চার্ট)
• pie (পাই চার্ট)
• doughnut (ডোনাট চার্ট)
• radar (রাডার চার্ট)
• polarArea (পোলার এরিয়া চার্ট)
• bubble (বাবল চার্ট)
• scatter (স্ক্যাটার চার্ট)

type: 'line'

২. data

চার্টে প্রদর্শিত ডেটা এবং লেবেল নির্ধারণ করে। এর দুটি প্রধান অংশ:

• labels: এক্স-অক্ষের লেবেল।
• datasets: ডেটাসেট যা Y-অক্ষের মান নির্দেশ করে।

উদাহরণ:

data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green'],
    datasets: [{
        label: 'Votes',
        data: [10, 20, 15, 25],
        backgroundColor: ['red', 'blue', 'yellow', 'green']
    }]
}

৩. options

চার্টের অপশন কাস্টমাইজ করতে ব্যবহৃত হয়। এটি বিভিন্ন উপাদান নিয়ন্ত্রণ করে, যেমন:

• স্কেল
• লেজেন্ড
• টুলটিপস
• অ্যানিমেশন

উদাহরণ:

options: {
    responsive: true, // রেসপন্সিভ ডিজাইন
    plugins: {
        legend: {
            display: true, // লেজেন্ড প্রদর্শিত হবে
            position: 'top' // লেজেন্ডের অবস্থান
        },
        tooltip: {
            enabled: true // টুলটিপস সক্রিয়
        }
    },
    scales: {
        x: {
            title: {
                display: true, // এক্স-অক্ষের টাইটেল
                text: 'Months'
            }
        },
        y: {
            beginAtZero: true, // Y-অক্ষ শূন্য থেকে শুরু হবে
            title: {
                display: true,
                text: 'Sales'
            }
        }
    }
}

Chart.js এর বেসিক ফাংশনালিটি

1. Responsive Behavior:

   responsive: true
   

2. Legend Customization:

   plugins: {
       legend: {
           display: true,
           position: 'bottom'
       }
   }
   

3. Tooltip Customization:

   plugins: {
       tooltip: {
           enabled: true,
           mode: 'index'
       }
   }
   

4. Animation:

   animation: {
       duration: 1000, // অ্যানিমেশনের সময়কাল
       easing: 'easeOutBounce'
   }
   

উদাহরণ: লাইন চার্ট কনফিগারেশন

const ctx = document.getElementById('lineChart').getContext('2d');

const lineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Temperature',
            data: [30, 25, 20, 15],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

সারাংশ

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

Chart.js ব্যবহার করে একটি চার্ট তৈরি করার জন্য সাধারণত কিছু মূল উপাদান প্রয়োজন হয়, যেমন HTML, JavaScript এবং কিছু কনফিগারেশন। নিচে Chart.js এর বেসিক স্ট্রাকচার সম্পর্কে বিস্তারিতভাবে আলোচনা করা হলো, যাতে আপনি সহজেই একটি চার্ট তৈরি করতে পারেন।

HTML ফাইল (Canvas)

Chart.js একটি <canvas> ট্যাগ ব্যবহার করে চার্ট রেন্ডার করে। তাই প্রথমে HTML ফাইলে একটি <canvas> এলিমেন্ট তৈরি করতে হবে।

HTML স্ট্রাকচার:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Example</title>
</head>
<body>
    <h1>My First Chart.js Chart</h1>
    <!-- Chart.js Canvas -->
    <canvas id="myChart" width="400" height="200"></canvas>

    <!-- Chart.js Library -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Custom Script for Chart -->
    <script src="script.js"></script>
</body>
</html>

• <canvas>: এখানে আমরা একটি <canvas> এলিমেন্ট তৈরি করেছি, যেখানে আমাদের চার্ট রেন্ডার হবে। id="myChart" এই এলিমেন্টের মাধ্যমে আমরা JavaScript থেকে এটি অ্যাক্সেস করতে পারব।

JavaScript ফাইল (Chart.js কনফিগারেশন)

Chart.js এর সাথে কাজ করার জন্য JavaScript কোডে কনফিগারেশন এবং ডেটা সেট করতে হবে। এখানে আমরা Chart কনস্ট্রাকটর ব্যবহার করে একটি নতুন চার্ট তৈরি করব।

JavaScript স্ট্রাকচার:

// 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: ['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, // Make the chart responsive
        scales: {
            y: {
                beginAtZero: true // Start the Y-axis from zero
            }
        }
    }
});

• ctx: এটি আমাদের <canvas> এলিমেন্টের context, যা Chart.js কে নির্দেশ দেয় যেখানে চার্ট রেন্ডার হবে।
• Chart কনস্ট্রাকটর: এটি চার্ট তৈরি করার জন্য ব্যবহৃত হয়। প্রথম প্যারামিটার হল ctx এবং দ্বিতীয় প্যারামিটার হল কনফিগারেশন।
• type: এটি চার্টের ধরন (যেমন বার চার্ট, লাইন চার্ট, পাই চার্ট ইত্যাদি) নির্দেশ করে।
• data: এখানে চার্টের ডেটা এবং এক্স-অক্ষ ও ওয়াই-অক্ষের লেবেল উল্লেখ করা হয়।
  • labels: এক্স-অক্ষের লেবেল (এখানে 'Red', 'Blue' ইত্যাদি)।
  • datasets: একাধিক ডেটাসেট থাকতে পারে, যেখানে ডেটা পয়েন্টের মান এবং তাদের স্টাইল উল্লেখ করা হয়।
• options: এটি চার্টের কাস্টমাইজেশন অপশনসমূহ যেমন রেসপন্সিভ ডিজাইন, অ্যানিমেশন, স্কেল ইত্যাদি কনফিগার করার জন্য ব্যবহৃত হয়।

কাস্টমাইজেশন অপশন (Options)

Chart.js ব্যবহার করে চার্ট কাস্টমাইজ করা যায় বিভিন্ন অপশন দিয়ে, যেমন স্কেল, অ্যানিমেশন, লেজেন্ড, টুলটিপস ইত্যাদি।

উদাহরণ:

1. responsive: চার্ট রেসপন্সিভ হয়ে স্ক্রিন সাইজের সাথে মানিয়ে যাবে।
2. scales: এক্স ও ওয়াই অক্ষের স্কেল কনফিগারেশন।
3. tooltips: টুলটিপস প্রদর্শন করার জন্য কনফিগারেশন।
4. legend: লেজেন্ডের কনফিগারেশন।

options: {
    responsive: true,
    plugins: {
        legend: {
            display: true, // Show the legend
            position: 'top' // Position of the legend (top, left, etc.)
        },
        tooltip: {
            enabled: true // Enable tooltips
        }
    },
    scales: {
        y: {
            beginAtZero: true // Start Y-axis at zero
        }
    }
}

সারাংশ

Chart.js এর বেসিক স্ট্রাকচার অনেকটা নিম্নলিখিতভাবে কাজ করে:

1. HTML: <canvas> এলিমেন্ট তৈরি করে চার্ট দেখানোর জন্য।
2. JavaScript: Chart কনস্ট্রাকটর ব্যবহার করে চার্ট তৈরি এবং কনফিগারেশন।
3. Options: চার্ট কাস্টমাইজেশন (যেমন রেসপন্সিভ ডিজাইন, স্কেল, টুলটিপস)।

এটি একটি খুবই শক্তিশালী এবং ব্যবহারযোগ্য টুল যা ডেটা ভিজ্যুয়ালাইজেশনকে সহজ এবং দৃষ্টিনন্দন করে তোলে।

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

১. লাইন চার্ট (Line Chart)

লাইন চার্ট সময়ভিত্তিক বা ধারাবাহিক ডেটা দেখানোর জন্য উপযুক্ত। এটি সাধারনত ট্রেন্ড বা সময়ের সাথে পরিবর্তিত মান দেখানোর জন্য ব্যবহৃত হয়।

ব্যবহার:

• স্টক মার্কেট ডেটা।
• তাপমাত্রা পরিবর্তন।
• ওয়েবসাইট ট্র্যাফিক।

কোড উদাহরণ:

const lineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Temperature',
            data: [30, 25, 20, 15],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false
        }]
    }
});

২. বার চার্ট (Bar Chart)

বার চার্ট তুলনামূলক ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। এটি সাধারণত ক্যাটাগরি বা ভিন্ন ভিন্ন গ্রুপের মধ্যে ডেটা তুলনা করতে ব্যবহৃত হয়।

ব্যবহার:

• সেলস রিপোর্ট।
• গ্রাহকের আচরণ বা পরিসংখ্যান।
• খেলার ফলাফল।

কোড উদাহরণ:

const barChart = 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
        }]
    }
});

৩. পাই চার্ট (Pie Chart)

পাই চার্ট একটি দৃষ্টিনন্দন এবং সহজ পদ্ধতিতে ডেটার শতাংশ বা অংশবিশেষ প্রদর্শনের জন্য ব্যবহৃত হয়। এটি সেগমেন্টে ডেটা ভাগ করে।

ব্যবহার:

• বাজার শেয়ার।
• একটি খাতে খরচের পরিমাণ।
• ভোটের ফলাফল।

কোড উদাহরণ:

const pieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Green'],
        datasets: [{
            data: [10, 20, 30],
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)']
        }]
    }
});

৪. ডোনাট চার্ট (Doughnut Chart)

ডোনাট চার্ট পাই চার্টের মতো, তবে এর কেন্দ্রে একটি খালি জায়গা থাকে। এটি ঐচ্ছিকভাবে ডেটার অনুপাত প্রদর্শন করতে ব্যবহৃত হয়।

ব্যবহার:

• একই ধরনের ডেটার ভিন্ন ভিন্ন অংশ প্রদর্শন।
• কর্মক্ষমতা বিশ্লেষণ।

কোড উদাহরণ:

const doughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            data: [15, 25, 35],
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)']
        }]
    }
});

৫. রাডার চার্ট (Radar Chart)

রাডার চার্ট বিভিন্ন ভেরিয়েবলকে একটি কেন্দ্রীকৃত পয়েন্ট থেকে প্রদর্শন করে। এটি সাধারণত একাধিক ডেটা সিরিজের তুলনা করতে ব্যবহৃত হয়।

ব্যবহার:

• স্পোর্টস পারফরম্যান্স বিশ্লেষণ।
• বিভিন্ন বিভাগের তুলনা।

কোড উদাহরণ:

const radarChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'],
        datasets: [{
            label: 'Activity',
            data: [20, 30, 40, 50, 60],
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 2,
            fill: true
        }]
    }
});

৬. পোলার এরিয়া চার্ট (Polar Area Chart)

পোলার এরিয়া চার্ট একটি রাডার চার্টের মতো, তবে এটি রেডিয়াল আকারে তথ্য প্রদর্শন করে। এটি ভিন্ন ভিন্ন ভেরিয়েবলকে তুলনা করতে ব্যবহৃত হয়।

ব্যবহার:

• একটি বিভাগে ডেটা পরিমাণ তুলনা।
• বিভিন্ন আঞ্চলিক বাজারের বিক্রয় পরিসংখ্যান।

কোড উদাহরণ:

const polarAreaChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            data: [30, 50, 70],
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)']
        }]
    }
});

৭. বাবল চার্ট (Bubble Chart)

বাবল চার্ট একটি স্ক্যাটার প্লট, যেখানে প্রতিটি বুদবুদ X, Y, এবং Z অক্ষের মানের প্রতিনিধিত্ব করে। এটি ডেটার আকার এবং অবস্থান দেখাতে ব্যবহৃত হয়।

ব্যবহার:

• মার্কেট রিসার্চ।
• ডেটার আকার বা পরিমাণ বিশ্লেষণ।

কোড উদাহরণ:

const bubbleChart = new Chart(ctx, {
    type: 'bubble',
    data: {
        datasets: [{
            label: 'My Dataset',
            data: [{
                x: 10,
                y: 20,
                r: 5
            }, {
                x: 30,
                y: 40,
                r: 10
            }]
        }]
    }
});

৮. স্ক্যাটার চার্ট (Scatter Chart)

স্ক্যাটার চার্ট ডেটার পয়েন্টগুলিকে এক্স এবং ওয়াই অক্ষের উপর প্লট করে। এটি ডেটার মধ্যে সম্পর্ক বা বৈচিত্র্য প্রদর্শনের জন্য উপযুক্ত।

ব্যবহার:

• বৈজ্ঞানিক গবেষণা।
• ইঞ্জিনিয়ারিং বিশ্লেষণ।

কোড উদাহরণ:

const scatterChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'My Dataset',
            data: [{
                x: 1,
                y: 2
            }, {
                x: 2,
                y: 3
            }]
        }]
    }
});

সারাংশ

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

Chart.js এর Dataset এবং Data Points কনফিগারেশন একটি চার্টের মূল অংশ। Dataset হলো এক বা একাধিক ডেটাসেট যা চার্টে প্রদর্শিত হবে, এবং Data Points হলো সেই ডেটাসেটের ভ্যালু বা মান যা এক্স-অক্ষ এবং ওয়াই-অক্ষের ওপর প্লট হয়। এখানে আমরা Dataset এবং Data Points কনফিগার করার প্রাথমিক ধারণা এবং উদাহরণ দেখব।

Dataset কনফিগারেশন

Dataset হলো একটি নির্দিষ্ট গ্রুপের ডেটা, যা সাধারণত এক বা একাধিক ডেটা পয়েন্ট নিয়ে তৈরি হয়। Chart.js এ Dataset কনফিগার করা যায় যেমন:

• Label: প্রতিটি ডেটাসেটের নাম।
• Data: ডেটাসেটের ডেটা পয়েন্ট।
• Background Color: ডেটা পয়েন্টের ব্যাকগ্রাউন্ড রং।
• Border Color: ডেটা পয়েন্টের বর্ডার রং।
• Border Width: ডেটা পয়েন্টের বর্ডার প্রস্থ।

Data Points কনফিগারেশন

Data Points হলো Dataset এর অংশ, যেগুলি এক্স-অক্ষ এবং ওয়াই-অক্ষের মানে পরিণত হয়। ডেটা পয়েন্ট কনফিগার করা যায়:

• Value: ওয়াই-অক্ষের মান (ডেটা পয়েন্টের পরিমাণ)।
• Label: এক্স-অক্ষের লেবেল (যেমন মাস, দেশ, বয়স ইত্যাদি)।

উদাহরণ: Dataset এবং Data Points কনফিগার করা

নিচে একটি উদাহরণ দেওয়া হলো যেখানে দুটি ডেটাসেট তৈরি করা হয়েছে, এবং প্রতিটি ডেটাসেটের ডেটা পয়েন্ট কনফিগার করা হয়েছে।

// 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: 'Dataset 1', // Label for the first dataset
                data: [12, 19, 3, 5, 2], // Data points for the first dataset
                backgroundColor: 'rgba(255, 99, 132, 0.2)', // Background color
                borderColor: 'rgba(255, 99, 132, 1)', // Border color
                borderWidth: 1 // Border width
            },
            {
                label: 'Dataset 2', // Label for the second dataset
                data: [6, 13, 8, 9, 7], // Data points for the second dataset
                backgroundColor: 'rgba(54, 162, 235, 0.2)', // Background color
                borderColor: 'rgba(54, 162, 235, 1)', // Border color
                borderWidth: 1 // Border width
            }
        ]
    },
    options: {
        responsive: true, // Make the chart responsive
        scales: {
            y: {
                beginAtZero: true // Set the Y-axis to start at zero
            }
        }
    }
});

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

1. label: প্রতিটি ডেটাসেটের নাম নির্ধারণ করে। এটি লেজেন্ডে প্রদর্শিত হয়।
2. data: একটি অ্যারে, যেখানে ডেটাসেটের মান (Data Points) থাকে। প্রতিটি মান একটি ডেটা পয়েন্টের প্রতিনিধিত্ব করে।
3. backgroundColor: ডেটা পয়েন্টের ব্যাকগ্রাউন্ড রং। এটি চার্টের বারগুলোর রং নির্ধারণ করে।
4. borderColor: ডেটা পয়েন্টের বর্ডার রং।
5. borderWidth: ডেটা পয়েন্টের বর্ডারের প্রস্থ।

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

1. data: Dataset এর প্রতিটি ডেটা পয়েন্টের মান। এখানে একটি সংখ্যা বা মান দেওয়া থাকে যা Y-অক্ষের উপরে প্রদর্শিত হবে।
2. labels: X-অক্ষের লেবেল যা প্রতিটি ডেটা পয়েন্টের সাথে সম্পর্কিত থাকে। এটি সাধারণত ক্যাটাগরি বা সময় ভিত্তিক (যেমন মাস, বছর, দেশ) হয়।

একাধিক Dataset প্রদর্শন

Chart.js আপনাকে একাধিক Dataset যোগ করার সুযোগ দেয়। উদাহরণস্বরূপ, আমরা দুটি Dataset ব্যবহার করছি এবং তাদের ডেটা পয়েন্ট আলাদা করছি।

এটি ব্যবহারের ফলে, দুইটি ভিন্ন রঙের বার চার্ট দেখাবে, যেখানে প্রতিটি Dataset আলাদা রঙে চিহ্নিত হবে।

কাস্টম Dataset কনফিগারেশন

আপনি চাইলে Dataset কনফিগারেশনে আরো উন্নত কাস্টমাইজেশন যোগ করতে পারেন, যেমন ডেটা পয়েন্টের আকার পরিবর্তন, লাইন স্টাইল পরিবর্তন, ইত্যাদি।

উদাহরণ (Bubble Chart):

const bubbleChart = new Chart(ctx, {
    type: 'bubble',
    data: {
        datasets: [{
            label: 'My Dataset',
            data: [
                { x: 10, y: 20, r: 5 }, // Data points with X, Y and Radius
                { x: 20, y: 30, r: 10 },
                { x: 30, y: 40, r: 15 }
            ],
            backgroundColor: 'rgba(255, 99, 132, 0.2)', // Bubble color
            borderColor: 'rgba(255, 99, 132, 1)', // Border color for bubbles
            borderWidth: 1
        }]
    }
});

সারাংশ

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

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 চার্টের আচরণ এবং স্টাইল কাস্টমাইজ করার জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি আপনি কীভাবে চার্টের প্রদর্শন, স্কেল, অ্যানিমেশন, টুলটিপ এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করবেন তা নির্ধারণ করতে সহায়তা করে। এই কনফিগারেশনগুলো ব্যবহার করে আপনি আপনার চার্টকে আরও তথ্যপূর্ণ এবং আকর্ষণীয় করতে পারেন।