Chart.js একটি অত্যন্ত শক্তিশালী লাইব্রেরি যা সহজেই রেসপন্সিভ (Responsive) চার্ট তৈরি করতে সহায়ক। রেসপন্সিভ চার্ট এমন একটি চার্ট যা ব্যবহারকারীর ডিভাইসের স্ক্রীনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে আকার এবং বিন্যাস পরিবর্তন করে। এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপ সকল ধরনের স্ক্রীনে ভালোভাবে কাজ করে।
Chart.js এর মাধ্যমে responsive চার্ট তৈরি করতে বেশ কয়েকটি পদ্ধতি ব্যবহার করা যেতে পারে, তবে এটি সাধারণত responsive: true অপশন ব্যবহার করে কনফিগার করা হয়।
Responsive চার্ট তৈরি করার জন্য ধাপসমূহ
ধাপ ১: HTML ফাইল তৈরি
প্রথমে একটি সাধারণ HTML ফাইল তৈরি করতে হবে, যেখানে আপনার চার্ট রেন্ডার হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Chart.js Example</title>
</head>
<body>
<h1>Responsive Chart Example</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
এখানে, আমরা <canvas> এলিমেন্ট ব্যবহার করেছি যেখানে চার্টটি রেন্ডার হবে।
ধাপ ২: JavaScript দিয়ে Responsive চার্ট তৈরি
Chart.js ব্যবহার করে চার্ট কনফিগার করতে হলে, আপনাকে responsive: true সেট করতে হবে। এটি নিশ্চিত করে যে চার্টটি বিভিন্ন ডিভাইসে উপযুক্ত আকারে প্রদর্শিত হবে।
কোড উদাহরণ:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // Chart type: Bar
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Monthly Sales',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true, // Make the chart responsive
maintainAspectRatio: false, // Allow the chart to resize without maintaining aspect ratio
scales: {
y: {
beginAtZero: true
}
}
}
});
প্রধান কনফিগারেশন
responsive: true: এটি নিশ্চিত করে যে চার্টটি স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুযায়ী রিসাইজ হবে।maintainAspectRatio: false: যখন আপনিresponsive: trueব্যবহার করেন, চার্টটি স্ক্রীনের আকার অনুযায়ী অটো রিসাইজ হয়, তবে যদি আপনিmaintainAspectRatio: falseসেট করেন, তাহলে এটি স্ক্রীনের আকার অনুযায়ী চার্টের আকার পরিবর্তন করতে দেবে, এবং আপনার কাস্টম রেশিও অনুসরণ করবে না।
ধাপ ৩: CSS কাস্টমাইজেশন
Canvas এর আকার কাস্টমাইজ করার জন্য কিছু CSS কোডও ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি আপনার <canvas> এলিমেন্টকে পুরো স্ক্রীন বা নির্দিষ্ট আকারে সেট করতে পারেন।
কোড উদাহরণ:
canvas {
max-width: 100%; /* Make canvas width responsive */
height: auto; /* Maintain the aspect ratio */
display: block;
margin: 0 auto; /* Center align canvas */
}
আরও কাস্টমাইজেশন
- মোবাইল ফ্রেন্ডলি:
resize: Chart.js স্বয়ংক্রিয়ভাবে রিসাইজিং প্রক্রিয়া পরিচালনা করে, তবে আপনি যদি চান যে চার্টটির আকার পরিবর্তন হোক স্ক্রীনের আকার অনুযায়ী, তবে আপনাকে অতিরিক্ত কোনো কোডের প্রয়োজন হবে না।
- ডিভাইস ডিটারমিনেশন:
- আপনি বিভিন্ন ডিভাইসের জন্য পৃথক কনফিগারেশনও করতে পারেন, তবে সাধারনত
responsive: trueকোডটি একাধিক স্ক্রীন সাইজে রেন্ডার করতে সক্ষম।
- আপনি বিভিন্ন ডিভাইসের জন্য পৃথক কনফিগারেশনও করতে পারেন, তবে সাধারনত
সারাংশ
Chart.js এর মাধ্যমে একটি responsive চার্ট তৈরি করা খুবই সহজ। কেবলমাত্র responsive: true অপশন ব্যবহার করলে আপনি নিশ্চিত হতে পারেন যে আপনার চার্টটি যে কোনো ডিভাইসে স্বয়ংক্রিয়ভাবে মানিয়ে যাবে। এছাড়াও, maintainAspectRatio: false ব্যবহার করলে চার্টটি স্ক্রীনের আকার অনুযায়ী আরও নমনীয় হবে। এটি আপনার চার্টকে ডেস্কটপ, ট্যাবলেট এবং মোবাইল ডিভাইসে সঠিকভাবে প্রদর্শিত হতে সাহায্য করবে।
Read more
