Highcharts এর মাধ্যমে আপনি Custom Themes তৈরি করে আপনার চার্টের ডিজাইন এবং স্টাইল কাস্টমাইজ করতে পারেন। থিম ব্যবহার করে আপনি চার্টের রঙ, ফন্ট, বর্ডার, লেবেল, টুলটিপ এবং অন্যান্য ডিজাইন উপাদান পরিবর্তন করতে পারবেন। এটি আপনাকে আপনার ব্র্যান্ডের সাথে মিল রেখে বা নির্দিষ্ট ডিজাইন স্টাইল অনুসরণ করে চার্ট তৈরি করতে সাহায্য করে।
Custom Theme তৈরি করা
Highcharts এ Custom Theme তৈরি করতে হলে, আপনাকে JavaScript কোডে থিমের জন্য প্রয়োজনীয় কনফিগারেশন সেট করতে হবে। এটি সাধারণত Highcharts.setOptions() মেথডের মাধ্যমে করা হয়। থিম তৈরির জন্য আপনাকে কিছু গুরুত্বপূর্ণ সেটিংস যেমন রঙ, ফন্ট, টুলটিপ এবং অন্যান্য স্টাইল নির্ধারণ করতে হয়।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Custom Theme</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
// Custom Theme সেট করা
Highcharts.setOptions({
chart: {
backgroundColor: '#f4f4f4', // ব্যাকগ্রাউন্ড রঙ
borderColor: '#ccc', // বর্ডার রঙ
borderWidth: 2 // বর্ডার প্রস্থ
},
title: {
style: {
fontSize: '20px', // টাইটেল ফন্ট সাইজ
fontWeight: 'bold', // টাইটেল ফন্ট ওয়েট
color: '#333' // টাইটেল রঙ
}
},
yAxis: {
gridLineColor: '#ccc', // Y-Axis গ্রিডলাইন রঙ
title: {
style: {
color: '#333' // Y-Axis টাইটেল রঙ
}
}
},
xAxis: {
gridLineColor: '#ccc', // X-Axis গ্রিডলাইন রঙ
labels: {
style: {
color: '#555' // X-Axis লেবেল রঙ
}
}
},
series: [{
color: '#2f7ed8', // সিরিজ রঙ
marker: {
symbol: 'circle' // মার্কার আকার
}
}]
});
// Chart তৈরি করা
Highcharts.chart('container', {
chart: {
type: 'line' // লাইন চার্ট টাইপ
},
title: {
text: 'Custom Theme Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Data',
data: [1, 2, 3, 4, 5]
}]
});
</script>
</body>
</html>
এই উদাহরণে, একটি Custom Theme তৈরি করা হয়েছে যেখানে চার্টের ব্যাকগ্রাউন্ড, টাইটেল, X এবং Y অক্ষের স্টাইল এবং সিরিজের রঙ কাস্টমাইজ করা হয়েছে।
Highcharts থিমের বিভিন্ন উপাদান
1. ব্যাকগ্রাউন্ড এবং বর্ডার
থিমে আপনি চার্টের ব্যাকগ্রাউন্ড রঙ, বর্ডার রঙ, এবং বর্ডার প্রস্থ নির্ধারণ করতে পারেন। যেমন:
chart: {
backgroundColor: '#f4f4f4',
borderColor: '#ccc',
borderWidth: 2
}
2. টাইটেল স্টাইল
চার্টের টাইটেল এবং টাইটেল স্টাইল কাস্টমাইজ করা সম্ভব। আপনি ফন্ট সাইজ, ফন্ট ওয়েট, এবং রঙ পরিবর্তন করতে পারেন। যেমন:
title: {
style: {
fontSize: '20px',
fontWeight: 'bold',
color: '#333'
}
}
3. অক্ষ (Axis) স্টাইল
X এবং Y অক্ষ এর গ্রিডলাইন রঙ এবং লেবেল স্টাইল পরিবর্তন করা যায়। যেমন:
yAxis: {
gridLineColor: '#ccc',
title: {
style: {
color: '#333'
}
}
},
xAxis: {
gridLineColor: '#ccc',
labels: {
style: {
color: '#555'
}
}
}
4. সিরিজ রঙ এবং মার্কার
প্রত্যেক সিরিজের জন্য রঙ নির্ধারণ করতে পারেন এবং সিরিজের মার্কার স্টাইল কাস্টমাইজ করতে পারেন। যেমন:
series: [{
color: '#2f7ed8',
marker: {
symbol: 'circle'
}
}]
Highcharts থিমের জন্য প্রিপ্রিমড থিম ব্যবহার করা
Highcharts এ প্রিপ্রিমড থিম ব্যবহার করে আপনি দ্রুত চার্ট ডিজাইন কাস্টমাইজ করতে পারেন। Highcharts এর অফিসিয়াল ওয়েবসাইটে বেশ কয়েকটি প্রিপ্রিমড থিম উপলব্ধ রয়েছে, যা আপনি আপনার প্রয়োজন অনুযায়ী ব্যবহার করতে পারেন। যেমন:
<script src="https://code.highcharts.com/themes/dark-unica.js"></script>
এই কোডটি Highcharts এর Dark Unica Theme প্রয়োগ করবে, যা আপনার চার্টের ডিজাইনকে গা dark ় এবং আধুনিক করে তুলবে।
উপসংহার
Highcharts এ Custom Themes তৈরি এবং ব্যবহার করা অত্যন্ত সহজ। আপনি আপনার চার্টের ডিজাইন কাস্টমাইজ করার জন্য বিভিন্ন সেটিংস ব্যবহার করতে পারেন। এটি আপনার ব্র্যান্ডিং বা বিশেষ ডিজাইন স্টাইল অনুসরণ করতে সাহায্য করে। থিম কাস্টমাইজেশন দিয়ে আপনি চার্টের ব্যাকগ্রাউন্ড, রঙ, ফন্ট, এবং অন্যান্য উপাদান পরিবর্তন করতে পারবেন, যা চার্টের ভিজুয়াল অভিজ্ঞতা উন্নত করে।
Read more
