Chart.js এর স্কেল কাস্টমাইজেশন আপনাকে চার্টের অক্ষগুলির বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করার সুযোগ দেয়, যেমন এক্স (X) এবং ওয়াই (Y) অক্ষের স্কেল, লেবেল, গ্রিডলাইন, এবং টিক মার্ক। স্কেল কাস্টমাইজেশন দিয়ে আপনি আপনার চার্টের দৃশ্যমানতা, স্কেল রেঞ্জ এবং এক্স/ওয়াই অক্ষের ধারাবাহিকতা উন্নত করতে পারেন।
স্কেল কাস্টমাইজেশনের মূল উপাদান:
- scales: স্কেল কাস্টমাইজেশন সংক্রান্ত সমস্ত কনফিগারেশন এখানে করা হয়।
- ticks: এক্স এবং ওয়াই অক্ষের টিক মার্ক কাস্টমাইজেশন।
- grid: গ্রিড লাইন কাস্টমাইজেশন।
- scaleLabel: অক্ষের ট্যাগ বা লেবেল কাস্টমাইজেশন।
উদাহরণ: স্কেল কাস্টমাইজেশন
নিচে একটি উদাহরণ দেওয়া হলো, যেখানে এক্স এবং ওয়াই অক্ষের স্কেল কাস্টমাইজ করা হয়েছে। এই কাস্টমাইজেশনে এক্স অক্ষের রেঞ্জ, ওয়াই অক্ষের শূন্য থেকে শুরু হওয়া, গ্রিড লাইন এবং টিক মার্কের স্টাইল পরিবর্তন করা হয়েছে।
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // চার্ট টাইপ
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5, 2],
backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple'],
borderColor: ['red', 'blue', 'yellow', 'green', 'purple'],
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
// X অক্ষ কাস্টমাইজেশন
x: {
// টিক মার্ক স্টাইল কাস্টমাইজেশন
ticks: {
color: 'rgba(54, 162, 235, 1)', // টিক মার্কের রং
font: {
size: 14, // টিক মার্কের ফন্ট সাইজ
weight: 'bold' // টিক মার্কের ফন্টের ওজন
}
},
grid: {
color: 'rgba(0, 0, 0, 0.1)', // গ্রিড লাইন রং
lineWidth: 1, // গ্রিড লাইনের প্রস্থ
drawOnChartArea: true // গ্রিডের উপস্থিতি নিশ্চিত করা
},
// এক্স অক্ষের লেবেল কাস্টমাইজেশন
title: {
display: true,
text: 'Colors',
font: {
size: 16
}
}
},
// Y অক্ষ কাস্টমাইজেশন
y: {
// ওয়াই অক্ষের টিক মার্ক স্টাইল কাস্টমাইজেশন
ticks: {
beginAtZero: true, // ওয়াই অক্ষ শূন্য থেকে শুরু হবে
color: 'rgba(75, 192, 192, 1)', // টিক মার্কের রং
font: {
size: 12, // টিক মার্কের ফন্ট সাইজ
}
},
grid: {
color: 'rgba(0, 0, 0, 0.1)', // গ্রিড লাইন রং
lineWidth: 1, // গ্রিড লাইনের প্রস্থ
},
// ওয়াই অক্ষের লেবেল কাস্টমাইজেশন
title: {
display: true,
text: 'Vote Count',
font: {
size: 16
}
}
}
}
}
});
স্কেল কাস্টমাইজেশন উপাদানগুলির ব্যাখ্যা:
scales:- এটি চার্টের এক্স এবং ওয়াই অক্ষের কাস্টমাইজেশন করে। এখানে আপনি প্রতিটি অক্ষের ticks, grid, এবং title কাস্টমাইজ করতে পারবেন।
ticks:- color: টিক মার্কের রঙ নির্ধারণ করে।
- font: টিক মার্কের ফন্ট সাইজ এবং স্টাইল কাস্টমাইজ করে।
- beginAtZero: ওয়াই অক্ষের ক্ষেত্রে, true দিলে এটি শূন্য থেকে শুরু হবে।
grid:- color: গ্রিড লাইনের রঙ।
- lineWidth: গ্রিড লাইনের প্রস্থ নির্ধারণ করে।
- drawOnChartArea: যদি true হয়, তবে গ্রিড চার্টের আঞ্চলিক অংশে আঁকা হবে।
title:- display: true দিলে অক্ষের ট্যাগ (title) প্রদর্শিত হবে।
- text: অক্ষের ট্যাগ বা লেবেল।
- font: ট্যাগের ফন্ট কাস্টমাইজেশন।
স্কেল কাস্টমাইজেশন আরও উদাহরণ
এক্স অক্ষের স্কেল রেঞ্জ কাস্টমাইজেশন:
যদি আপনি এক্স অক্ষের রেঞ্জ কাস্টমাইজ করতে চান, তাহলে min এবং max মান সেট করতে পারেন।
scales: {
x: {
min: 0, // এক্স অক্ষের নিম্ন মান
max: 50, // এক্স অক্ষের উচ্চ মান
}
}
ওয়াই অক্ষের স্কেল কাস্টমাইজেশন:
ওয়াই অক্ষের ক্ষেত্রে আপনি স্কেল শুরু করার স্থান কাস্টমাইজ করতে পারেন এবং stepSize দিয়ে টিক মার্কের ব্যবধান নির্ধারণ করতে পারেন।
scales: {
y: {
beginAtZero: true, // ওয়াই অক্ষ শূন্য থেকে শুরু হবে
stepSize: 5, // টিক মার্কের ব্যবধান
min: 0, // ওয়াই অক্ষের নিম্ন মান
max: 30 // ওয়াই অক্ষের উচ্চ মান
}
}
সারাংশ
Chart.js এর স্কেল কাস্টমাইজেশন খুবই শক্তিশালী এবং এটি আপনার চার্টের দেখতে ও অনুভূতিতে ব্যাপক পরিবর্তন আনতে সক্ষম। আপনি এক্স এবং ওয়াই অক্ষের ticks, grid, title ইত্যাদি কাস্টমাইজ করে চার্টের অভিজ্ঞতা উন্নত করতে পারেন। এই কাস্টমাইজেশন গুলি Chart.js কে আরও বেশি ইন্টার্যাক্টিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।
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 এর শিরোনাম, টিক্স, গ্রিডলাইন, স্কেল টাইপ এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করে আপনার চার্টের ডেটা উপস্থাপনাকে আরও স্পষ্ট ও আকর্ষণীয় করতে পারবেন।
Chart.js একটি শক্তিশালী লাইব্রেরি যা বিভিন্ন ধরণের স্কেল সাপোর্ট করে, যার মধ্যে Logarithmic এবং Time Scales অন্যতম। এই স্কেলগুলো আপনাকে ডেটা ভিজ্যুয়ালাইজেশনের ক্ষেত্রে আরও কার্যকরী এবং উপকারী ফলাফল দিতে সহায়তা করে। নিচে এই দুটি স্কেল এবং তাদের ব্যবহারের পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
1. Logarithmic Scale
Logarithmic Scale ব্যবহার করা হয় যখন ডেটা খুব বেশি ভ্যারিয়েশন থাকে এবং আপনি চান যে চার্টের স্কেলকে লিনিয়ার নয়, বরং লগারিদমিকভাবে দেখানো হোক। এটি সাধারণত বিজ্ঞান, অর্থনীতি, বা অন্যান্য ক্ষেত্রে ব্যবহৃত হয় যেখানে ডেটার বড় পার্থক্য থাকে এবং আপনি সেগুলির তুলনা করতে চান।
Logarithmic Scale সাধারণত Y-axis এ ব্যবহৃত হয়, তবে এটি X-axis-এও ব্যবহার করা যেতে পারে।
উদাহরণ: Logarithmic Scale ব্যবহার করে চার্ট তৈরি
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line', // লাইন চার্ট
data: {
labels: [1, 10, 100, 1000, 10000], // X-axis লেবেল
datasets: [{
label: 'Logarithmic Data',
data: [0.1, 1, 10, 100, 1000], // Y-axis ডেটা
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true,
scales: {
y: {
type: 'logarithmic', // Y-axis কে লগারিদমিক স্কেলে সেট করা
ticks: {
callback: function(value) {
return value; // Y-axis এর ticks কাস্টমাইজ করা
}
}
},
x: {
type: 'linear', // X-axis লিনিয়ার থাকবে
}
}
}
});
কাস্টমাইজেশন:
type: 'logarithmic': Y-axis কে লগারিদমিক স্কেলে সেট করা।ticks: এখানে টিকসের জন্য কাস্টম ফাংশন ব্যবহার করা হয়েছে যাতে আপনি যেভাবে চান টিকগুলো প্রদর্শন করতে পারেন।- X-axis: সাধারণত লিনিয়ার স্কেল ব্যবহার করা হয়, তবে আপনি X-axis-এও লগারিদমিক স্কেল ব্যবহার করতে পারেন যদি প্রয়োজন হয়।
2. Time Scale
Time Scale ব্যবহার করা হয় যখন আপনার ডেটা টাইমস্ট্যাম্পের উপর ভিত্তি করে থাকে। এর মাধ্যমে আপনি টাইম-বেজড ডেটাকে সহজেই ভিজ্যুয়ালাইজ করতে পারবেন, যেমন দিন, মাস, বছর বা ঘণ্টা ভিত্তিক ডেটা।
Chart.js Time Scale ব্যবহারের জন্য moment.js বা luxon.js লাইব্রেরি ব্যবহার করতে পারে। তবে, Chart.js 3 থেকে moment.js ব্যবহার বন্ধ করা হয়েছে এবং এখন Day.js ব্যবহৃত হচ্ছে টাইম ডেটা প্রসেস করার জন্য।
উদাহরণ: Time Scale ব্যবহার করে চার্ট তৈরি
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line', // লাইন চার্ট
data: {
datasets: [{
label: 'Monthly Sales',
data: [
{ x: '2023-01-01', y: 10 },
{ x: '2023-02-01', y: 20 },
{ x: '2023-03-01', y: 30 },
{ x: '2023-04-01', y: 40 },
{ x: '2023-05-01', y: 50 }
],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true,
scales: {
x: {
type: 'time', // X-axis টাইম স্কেলে সেট করা
time: {
unit: 'month', // মাস ভিত্তিক টাইম ইউনিট
tooltipFormat: 'll', // টুলটিপ ফরম্যাট
displayFormats: {
month: 'MMM YYYY', // মাসের ফরম্যাট
}
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
display: true,
text: 'Sales'
}
}
}
}
});
কাস্টমাইজেশন:
type: 'time': X-axis টাইম স্কেলে সেট করা হয়েছে।unit: 'month': টাইম ইউনিট মাস হিসেবে নির্ধারণ করা হয়েছে (দিন, মাস, বছর ইত্যাদি হতে পারে)।tooltipFormat: টুলটিপের জন্য ফরম্যাট সেট করা।displayFormats: ট্যাগে ডিসপ্লে ফরম্যাট কাস্টমাইজ করা হয়েছে (যেমন, মাসের নাম ও বছর)।
3. Logarithmic এবং Time Scale একত্রে ব্যবহার
আপনি যদি একটি চার্টে একই সাথে logarithmic এবং time scale ব্যবহার করতে চান, তবে তা একে অপরের সাথে কাস্টমাইজ করে দেখানো যেতে পারে। উদাহরণস্বরূপ, সময়ের সাথে বিক্রয়ের লগারিদমিক বৃদ্ধির গ্রাফ:
উদাহরণ: Logarithmic এবং Time Scale একত্রে ব্যবহার
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Sales Over Time (Logarithmic)',
data: [
{ x: '2023-01-01', y: 10 },
{ x: '2023-02-01', y: 100 },
{ x: '2023-03-01', y: 1000 },
{ x: '2023-04-01', y: 10000 }
],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true,
scales: {
x: {
type: 'time',
time: {
unit: 'month',
tooltipFormat: 'll',
displayFormats: {
month: 'MMM YYYY',
}
},
title: {
display: true,
text: 'Date'
}
},
y: {
type: 'logarithmic', // Y-axis কে লগারিদমিক স্কেলে সেট করা
title: {
display: true,
text: 'Sales'
}
}
}
}
});
এখানে, X-axis টাইম স্কেলে এবং Y-axis লগারিদমিক স্কেলে রয়েছে।
সারাংশ
- Logarithmic Scale ব্যবহার করে আপনি বিশাল পরিসরের ডেটা তুলনা করতে পারেন যেখানে ছোট মানগুলি খুব গুরুত্বপূর্ণ হয়ে ওঠে। এটি ডেটার পার্থক্যকে ছোট এবং বড় পরিসরে উপস্থাপন করতে সাহায্য করে।
- Time Scale ব্যবহারের মাধ্যমে আপনি সময়ভিত্তিক ডেটা, যেমন দিন, মাস, বা বছর ভিত্তিক ডেটা প্রদর্শন করতে পারেন।
- এই স্কেলগুলো Chart.js-এ অত্যন্ত শক্তিশালী টুল যা ডেটা ভিজ্যুয়ালাইজেশনের ক্ষেত্রে আরও কার্যকরী এবং সঠিক তথ্য প্রদান করতে সাহায্য করে।
Chart.js-এ scale breaks এবং custom ticks কনফিগারেশন ব্যবহার করে আপনি চার্টের স্কেলকে আরও কাস্টমাইজড এবং পাঠযোগ্য করতে পারেন। এটি বিশেষ করে যখন আপনার ডেটা অনেক বেশি বৈচিত্র্যপূর্ণ বা স্কেলের মধ্যে বড় গ্যাপ থাকে, তখন এটি সাহায্য করে।
Scale Breaks
Scale breaks আপনাকে একটি স্কেলে একটি বিরতি (gap) তৈরি করার সুযোগ দেয়, যাতে বৃহত ভ্যালু পার্থক্যগুলির মধ্যে ফাঁকা জায়গা রেখে স্কেলটি আরও বুঝতে সহজ হয়। এটি ডেটার মধ্যে বড় পার্থক্য বা আউটলায়ার ভ্যালু যখন থাকে তখন স্কেলকে আরও পড়তে সুবিধাজনক করে।
Chart.js-এ scale breaks সরাসরি সমর্থিত না হলেও, আপনি কাস্টম প্লাগইন ব্যবহার বা কাস্টম স্কেল কনফিগারেশন দিয়ে এটি বাস্তবায়ন করতে পারেন।
Custom Ticks কনফিগার করা
Custom ticks ব্যবহার করে আপনি স্কেলটির টিক মার্কগুলি কাস্টমাইজ করতে পারেন, যেমন তাদের ফন্ট সাইজ, ফন্ট রঙ, অবস্থান বা লেবেল প্রাপ্তির জন্য কাস্টম ফাংশন ব্যবহার করা।
১. Custom Ticks কনফিগার করা
Chart.js-এ স্কেল বা টিক্স কাস্টমাইজেশন অনেক গুরুত্বপূর্ণ কারণ এটি ডেটার বোধগম্যতা উন্নত করতে সহায়ক। আপনি স্কেল টিক্সের আকার, স্টাইল, রঙ ইত্যাদি কাস্টমাইজ করতে পারেন।
উদাহরণ: Custom Ticks কনফিগার করা (লাইন চার্ট)
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line', // চার্টের ধরন
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [{
label: 'Sales',
data: [10, 20, 30, 40],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
fill: false
}]
},
options: {
scales: {
y: {
beginAtZero: true, // Y-অক্ষ শূন্য থেকে শুরু হবে
ticks: {
stepSize: 10, // টিক মার্কের স্টেপ সাইজ
font: {
size: 14, // ফন্ট সাইজ
weight: 'bold', // ফন্টের ওজন
family: 'Arial', // ফন্ট পরিবার
},
color: 'rgba(75, 192, 192, 1)', // টিক মার্কের রঙ
callback: function(value) {
return value + ' units'; // কাস্টম টিক লেবেল
}
}
}
}
}
});
stepSize: টিক মার্কের মানের স্টেপ সাইজ কাস্টমাইজ করা।font: টিক মার্কের ফন্ট কাস্টমাইজ করা (ফন্ট সাইজ, ফন্ট পরিবার, ফন্টের ওজন)।color: টিক মার্কের রঙ কাস্টমাইজ করা।callback: কাস্টম টিক লেবেল তৈরি করা (এটি সংখ্যার সাথে একটি ইউনিট যোগ করতে ব্যবহৃত হয়েছে)।
২. Scale Breaks কনফিগার করা
Chart.js-এ scale breaks সোজাসুজি সমর্থিত না হলেও, আপনি custom plugin ব্যবহার বা manual scaling দিয়ে এই কাজটি করতে পারেন। সাধারণত, scale breaks ব্যবহার করার জন্য একটি গ্যাপ বা বিরতি (break) তৈরি করতে হয়, যাতে নির্দিষ্ট সীমার বাইরে থাকা ডেটা না দেখানো যায়।
উদাহরণ: Scale Breaks কনফিগারেশন (Custom Scale Breaks)
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Income',
data: [10, 200, 3000, 50, 100],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
fill: false
}]
},
options: {
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value, index, values) {
if (value > 1000) {
return ''; // ব্রেক পয়েন্টগুলো বাদ দিতে এই লজিক ব্যবহার করা হয়েছে
}
return value;
}
}
}
}
}
});
এই উদাহরণে, আমরা যেকোনো টিক মার্ক যেটি 1000 এর বেশি, তা শো না করার জন্য একটি কাস্টম কলব্যাক ফাংশন ব্যবহার করেছি। এটি scale breaks তৈরি করতে সহায়ক, যেখানে বড় ডেটার পার্থক্যগুলির মাঝে স্পেস তৈরি করা হয়।
৩. Custom Ticks for Date/Time Axes
যখন আপনি টাইম সিরিজ ডেটা প্লট করেন, তখন Custom ticks for Date/Time axes ব্যবহার করতে পারেন। এখানে আপনি ডেটা আর্কিটেকচার অনুযায়ী কাস্টম টিকস সেট করতে পারবেন।
উদাহরণ: টাইম সিরিজের জন্য কাস্টম টিক্স
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2021-01-01', '2021-02-01', '2021-03-01', '2021-04-01'],
datasets: [{
label: 'Stock Prices',
data: [120, 150, 170, 200],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2
}]
},
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'month',
tooltipFormat: 'll'
},
ticks: {
source: 'labels',
callback: function(value, index, values) {
return value.substring(0, 7); // মাসের নাম প্রদর্শন
}
}
}
}
}
});
type: 'time': এক্স-অক্ষ টাইম টাইপের জন্য সেট করা হয়েছে।time.unit: আপনি যে ইউনিটটি ব্যবহার করতে চান তা (যেমন, দিন, সপ্তাহ, মাস) নির্ধারণ করা।callback: কাস্টম টিক্স লেবেল তৈরি করা।
সারাংশ
Chart.js-এ scale breaks এবং custom ticks কনফিগারেশন দ্বারা আপনি আপনার চার্টের স্কেলকে আরও উন্নত, কার্যকর এবং বোধগম্য করতে পারেন। Custom ticks দিয়ে আপনি টিক মার্কের লেবেল, স্টাইল, আকার এবং কনটেন্ট কাস্টমাইজ করতে পারেন, এবং scale breaks ব্যবহার করে আপনি বড় আউটলিয়ার ডেটাকে বাদ দিতে পারেন বা স্কেলে গ্যাপ সৃষ্টি করতে পারেন। এই কনফিগারেশনগুলির মাধ্যমে আপনি আপনার চার্টের উপস্থাপন আরো সহজ, সুসংগত এবং দৃষ্টিনন্দন করতে পারবেন।
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
}
}
}
}
});
কনফিগারেশন ব্যাখ্যা
type: 'bar': চার্টের ধরন নির্ধারণ করা হয়েছেbarহিসেবে। এখানে বার চার্ট এবং লাইন চার্ট একসাথে ব্যবহার হচ্ছে।datasets: দুটি আলাদা ডেটাসেট:- Sales: একটি বার চার্ট হিসেবে প্রদর্শিত হবে এবং প্রথম ওয়াই অক্ষ
y1এর সাথে সম্পর্কিত। - Temperature: একটি লাইন চার্ট হিসেবে প্রদর্শিত হবে এবং দ্বিতীয় ওয়াই অক্ষ
y2এর সাথে সম্পর্কিত।
- Sales: একটি বার চার্ট হিসেবে প্রদর্শিত হবে এবং প্রথম ওয়াই অক্ষ
yAxisID: এই প্রপার্টির মাধ্যমে, প্রতিটি ডেটাসেট কে আলাদা আলাদা ওয়াই অক্ষের সাথে যুক্ত করা হয়।y1এবংy2প্রতিটি ডেটাসেটের জন্য আলাদা ওয়াই অক্ষ নির্ধারণ করে।
position:y1অক্ষটি বামে এবংy2অক্ষটি ডানে রাখা হয়েছে, যাতে দুটি অক্ষের স্কেল আলাদা ভাবে প্রদর্শিত হয়।scales:y1: প্রথম ওয়াই অক্ষের জন্য স্কেল কনফিগারেশন (বিক্রির জন্য)।y2: দ্বিতীয় ওয়াই অক্ষের জন্য স্কেল কনফিগারেশন (তাপমাত্রার জন্য)।
কাস্টমাইজেশন
- Multiple Datasets: আপনি একাধিক ডেটাসেট যুক্ত করতে পারেন, যেখানে প্রতিটি ডেটাসেটের জন্য আলাদা এক্স বা ওয়াই অক্ষ ব্যবহার করা হবে।
- স্কেল কাস্টমাইজেশন: প্রতি অক্ষের জন্য আলাদা স্কেল এবং টিক্স কাস্টমাইজ করা যায়, যেমন প্রতিটি অক্ষের জন্য আলাদা রেঞ্জ, স্টেপ সাইজ, এবং টিক্সের আকার।
fillপ্রপার্টি: লাইন চার্টের নিচে ভরাট যোগ করতেfill: trueব্যবহার করা হয়েছে।
Multi-Axis Chart এর অন্যান্য উদাহরণ
আপনি একইভাবে একাধিক এক্স অক্ষও ব্যবহার করতে পারেন, যেখানে একাধিক ক্যাটাগরি বা সময়ভিত্তিক ডেটা একসাথে প্রদর্শিত হবে।
সারাংশ
Multi-Axis চার্ট Chart.js এ একটি শক্তিশালী বৈশিষ্ট্য, যা একাধিক অক্ষ ব্যবহার করে একে একে ভিন্ন ভিন্ন স্কেল ও রেঞ্জে ডেটা প্রদর্শন করতে সহায়তা করে। এটি খুবই উপকারী যখন আপনার ডেটার স্কেল বা পরিসর আলাদা হয় এবং আপনি একাধিক ধরনের ডেটা একই চার্টে তুলনা করতে চান। Chart.js এর yAxisID এবং xAxisID এর মাধ্যমে আপনি আলাদা অক্ষ কাস্টমাইজ এবং যুক্ত করতে পারবেন।
Read more
