Highcharts একটি অত্যন্ত কাস্টমাইজেবল টুল, যা ডেটা ভিজুয়ালাইজেশনের জন্য শক্তিশালী এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে ব্যবহৃত হয়। Highcharts এ Custom Themes এবং Styles ব্যবহার করে আপনি আপনার চার্টের আঙ্গিক এবং শৈলী কাস্টমাইজ করতে পারেন, যা আপনার ব্র্যান্ডিং এবং প্রেজেন্টেশন স্টাইলের সাথে মানানসই হয়।
Custom Themes (কাস্টম থিম)
Custom Themes ব্যবহার করে আপনি Highcharts এর ডিফল্ট থিম পরিবর্তন করে, চার্টের সমস্ত উপাদানের ডিজাইন কাস্টমাইজ করতে পারেন, যেমন রঙ, ফন্ট, স্টাইল, লাইন প্রস্থ, অক্ষের রঙ ইত্যাদি। এটি আপনার চার্টকে আপনার পছন্দ এবং ব্র্যান্ডিং অনুসারে তৈরি করার সুযোগ দেয়।
কাস্টম থিম কনফিগারেশন
Highcharts এ কাস্টম থিম ব্যবহার করতে হলে, আপনাকে প্রথমে Highcharts.setOptions() ফাংশন ব্যবহার করে থিম সেট করতে হবে। এর মাধ্যমে আপনি chart, title, xAxis, yAxis, series ইত্যাদির জন্য স্টাইল সেট করতে পারবেন।
কাস্টম থিম উদাহরণ:
Highcharts.setOptions({
chart: {
backgroundColor: '#f4f4f4', // ব্যাকগ্রাউন্ড রঙ
style: {
fontFamily: 'Arial, sans-serif' // ফন্ট কাস্টমাইজেশন
}
},
title: {
style: {
color: '#333', // শিরোনামের রঙ
fontSize: '20px' // শিরোনামের ফন্ট সাইজ
}
},
xAxis: {
gridLineColor: '#ccc', // X-অক্ষের গ্রিড লাইন রঙ
labels: {
style: {
color: '#555' // X-অক্ষের লেবেল রঙ
}
}
},
yAxis: {
gridLineColor: '#ccc', // Y-অক্ষের গ্রিড লাইন রঙ
labels: {
style: {
color: '#555' // Y-অক্ষের লেবেল রঙ
}
}
},
series: [{
color: '#4CAF50', // সিরিজের রঙ
lineWidth: 3 // লাইন প্রস্থ
}]
});
এই কোডে, আপনি Highcharts.setOptions() ফাংশন ব্যবহার করে একাধিক থিম কাস্টমাইজেশন করেছেন, যেমন chart এর ব্যাকগ্রাউন্ড রঙ, title এর ফন্ট স্টাইল, এবং series এর লাইন রঙ।
Styles (স্টাইল)
Highcharts এ Styles দিয়ে আপনি বিভিন্ন উপাদানের লুক এবং ফিল কাস্টমাইজ করতে পারেন। এর মধ্যে রয়েছে chart এর স্টাইল, series এর স্টাইল, xAxis এবং yAxis এর স্টাইল ইত্যাদি।
স্টাইল কাস্টমাইজেশন উদাহরণ:
Highcharts.chart('container', {
chart: {
type: 'line',
backgroundColor: '#f0f0f0' // ব্যাকগ্রাউন্ড রঙ
},
title: {
text: 'বিক্রয় প্রবণতা',
style: {
color: '#3e3e3e', // শিরোনামের রঙ
fontSize: '18px' // ফন্ট সাইজ
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
labels: {
style: {
color: '#3e3e3e', // X-অক্ষের লেবেল রঙ
fontSize: '12px' // X-অক্ষের লেবেল ফন্ট সাইজ
}
}
},
yAxis: {
title: {
text: 'বিক্রয়',
style: {
color: '#3e3e3e', // Y-অক্ষের শিরোনামের রঙ
fontSize: '14px' // Y-অক্ষের শিরোনামের ফন্ট সাইজ
}
},
labels: {
style: {
color: '#3e3e3e', // Y-অক্ষের লেবেল রঙ
fontSize: '12px' // Y-অক্ষের লেবেল ফন্ট সাইজ
}
}
},
series: [{
name: 'বিক্রয়',
data: [10, 15, 30, 40, 50],
color: '#ff6347', // সিরিজের রঙ
lineWidth: 3 // লাইন প্রস্থ
}]
});
এই কোডে, আপনি বিভিন্ন অংশের styles কাস্টমাইজ করেছেন যেমন শিরোনাম, অক্ষের লেবেল এবং সিরিজের রঙ ও প্রস্থ।
Highcharts থিম এবং স্টাইলিং এর আরও কিছু অপশন
1. Global Styles
Highcharts এর জন্য global styles সেট করে আপনি আপনার চার্টের জন্য একটি সাধারণ স্টাইল তৈরি করতে পারেন, যা সব চার্টে প্রযোজ্য হবে।
Highcharts.setOptions({
global: {
useUTC: false // UTC সময় ব্যবহার না করা
}
});
2. Series Styles
আপনি series এর মধ্যে point বা line এর স্টাইল কাস্টমাইজ করতে পারেন, যেমন মার্কারের আকার, ড্যাশড লাইন বা প্লেইন লাইন ইত্যাদি।
plotOptions: {
line: {
marker: {
enabled: true, // মার্কার সক্রিয় করা
radius: 5 // মার্কারের আকার
},
dashStyle: 'dot' // ড্যাশ স্টাইল
}
}
3. Theme Object ব্যবহার করা
Highcharts তে কাস্টম থিম তৈরি করতে Theme Object ব্যবহার করতে পারেন, যা সমস্ত কনফিগারেশন একত্রে সংগ্রহ করে, এবং একাধিক চার্টে পুনরায় ব্যবহার করা যায়।
var myTheme = {
chart: {
backgroundColor: '#eaeaea',
borderColor: '#dcdcdc'
},
title: {
style: {
color: '#5a5a5a',
fontSize: '20px'
}
}
};
Highcharts.setOptions(myTheme);
এখানে, myTheme একটি থিম অবজেক্ট, যা পরে Highcharts এর সমস্ত কনফিগারেশনে প্রয়োগ করা হয়েছে।
উপসংহার
Highcharts এর Custom Themes এবং Styles ব্যবহার করে আপনি আপনার চার্টের ভিজুয়াল আঙ্গিক সম্পূর্ণ কাস্টমাইজ করতে পারেন। আপনি ব্যাকগ্রাউন্ড, রঙ, ফন্ট, সিরিজের শৈলী এবং অক্ষের কাস্টমাইজেশন করতে পারবেন, যা আপনার চার্টকে আরও আকর্ষণীয় এবং ব্যবহার উপযোগী করে তোলে। Highcharts এর এই কাস্টমাইজেশন সুবিধা আপনার চার্টকে আপনার ব্র্যান্ডিং বা প্রেজেন্টেশন প্রয়োজন অনুসারে উপস্থাপন করতে সহায়ক।
Highcharts এ বিভিন্ন ধরনের Built-in Themes উপলব্ধ, যা আপনাকে দ্রুত এবং সহজে আকর্ষণীয় এবং পেশাদার গ্রাফিক্যাল ইন্টারফেস তৈরি করতে সহায়ক। থিমগুলি আপনার চার্টের রঙ, স্টাইল এবং উপস্থাপনা কাস্টমাইজ করতে সাহায্য করে। এটি আপনাকে চার্টের একটি সাধারণ ডিজাইন থেকে উন্নত, ব্র্যান্ডিং-অনুকূল ডিজাইনে পরিবর্তন করতে সক্ষম করে।
Highcharts এর Built-in Themes
Highcharts এর Built-in Themes আপনার চার্টের ডিজাইনকে তাত্ক্ষণিকভাবে পরিবর্তন করতে সক্ষম করে। এগুলি কিছু পূর্বনির্ধারিত রঙ এবং স্টাইল সেট প্রদান করে, যা সহজেই আপনার চার্টের চেহারা বদলে দেয়। এখানে কিছু সাধারণ থিমের উদাহরণ:
1. Dark Unica
Dark Unica থিমটি গা dark ় ব্যাকগ্রাউন্ড এবং উজ্জ্বল রঙের স্টাইল প্রদান করে। এটি সাধারণত ব্যবহার করা হয় যখন আপনি একটি ডার্ক স্কিমের চার্ট চান, যা আধুনিক এবং পেশাদার মনে হয়।
Highcharts.setOptions(Highcharts.theme = {
chart: {
backgroundColor: '#2a2a2a',
style: {
color: '#FFFFFF'
}
},
title: {
style: {
color: '#FFFFFF',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: '#FFFFFF'
}
},
// আরও কাস্টমাইজেশন
});
2. Grid Light
Grid Light থিমটি হালকা ব্যাকগ্রাউন্ডে কাজ করে এবং পিউর শেড ব্যবহার করে। এটি সাধারণত লাইট স্কিমের সঙ্গে ব্যবহার করা হয় এবং ব্যবসায়িক বা কনফারেন্স প্রেজেন্টেশনের জন্য উপযুক্ত।
Highcharts.setOptions(Highcharts.theme = {
chart: {
backgroundColor: '#FFFFFF',
style: {
color: '#000000'
}
},
title: {
style: {
color: '#333333',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: '#666666'
}
},
// আরও কাস্টমাইজেশন
});
3. High Contrast
High Contrast থিমটি ডিজাইনে উচ্চ কনট্রাস্ট ব্যবহার করে এবং এটিতে সাধারণত রঙের সাদা এবং কালো শেড থাকে। এটি অন্ধকার বা লাইট স্কিমের মধ্যে পরিষ্কার পার্থক্য তৈরি করতে সাহায্য করে।
Highcharts.setOptions(Highcharts.theme = {
chart: {
backgroundColor: '#000000',
style: {
color: '#FFFFFF'
}
},
title: {
style: {
color: '#FFFFFF',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: '#DDDDDD'
}
},
// আরও কাস্টমাইজেশন
});
4. Sand Signika
Sand Signika থিমটি প্রাকৃতিক রঙের শেড ব্যবহার করে এবং এটি একটি সফট এবং সহজ ডিজাইন তৈরি করতে সহায়ক। এটি বিশেষভাবে লাইট এবং ন্যাচারাল টোনের জন্য উপযুক্ত।
Highcharts.setOptions(Highcharts.theme = {
chart: {
backgroundColor: '#f4f4f4',
style: {
color: '#000000'
}
},
title: {
style: {
color: '#444444',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: '#666666'
}
},
// আরও কাস্টমাইজেশন
});
5. Metro
Metro থিমটি আধুনিক ডিজাইন স্টাইল অনুসরণ করে এবং এটি সাধারণত সাইট বা অ্যাপ্লিকেশন ডিজাইন করার সময় ব্যবহার করা হয়, যেখানে মেট্রো ডিজাইন স্টাইল প্রাধান্য পায়।
Highcharts.setOptions(Highcharts.theme = {
chart: {
backgroundColor: '#F0F0F0',
style: {
color: '#333333'
}
},
title: {
style: {
color: '#0066CC',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: '#3399FF'
}
},
// আরও কাস্টমাইজেশন
});
Highcharts এ Built-in Themes ব্যবহার কিভাবে করবেন?
Highcharts এ Built-in Themes ব্যবহার করতে হলে, আপনাকে Highcharts.setOptions() ফাংশন ব্যবহার করে থিমটি সিলেক্ট করতে হবে। এটি আপনার সমস্ত চার্টের জন্য ঐক্যবদ্ধভাবে থিমটি প্রয়োগ করবে। থিম সেট করতে, আপনাকে থিম কোডটি আপনার Highcharts স্ক্রিপ্টে যুক্ত করতে হবে।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Built-in Theme Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.setOptions({
chart: {
type: 'line'
},
title: {
text: 'উদাহরণ চার্ট'
},
series: [{
name: 'Sales',
data: [1, 3, 2, 4, 6, 8]
}]
});
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Built-in Theme Example'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50, 60]
}]
});
</script>
</body>
</html>
এখানে Highcharts.setOptions() এর মাধ্যমে আপনি Built-in Theme সেট করতে পারেন। এটি আপনার চার্টে স্বয়ংক্রিয়ভাবে প্রয়োগ হবে।
উপসংহার
Built-in Themes Highcharts এ একটি শক্তিশালী ফিচার, যা আপনাকে দ্রুত এবং সহজে আপনার চার্টের ডিজাইন কাস্টমাইজ করতে দেয়। Highcharts এ বিভিন্ন থিম যেমন Dark Unica, Grid Light, High Contrast, Sand Signika, এবং Metro উপলব্ধ রয়েছে। এই থিমগুলির মাধ্যমে আপনি আপনার চার্টের রঙ, শৈলী এবং উপস্থাপনাকে দ্রুত পরিবর্তন করতে পারবেন এবং একই সাথে একটি সুন্দর ও প্রফেশনাল লুক তৈরি করতে পারবেন।
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 তৈরি এবং ব্যবহার করা অত্যন্ত সহজ। আপনি আপনার চার্টের ডিজাইন কাস্টমাইজ করার জন্য বিভিন্ন সেটিংস ব্যবহার করতে পারেন। এটি আপনার ব্র্যান্ডিং বা বিশেষ ডিজাইন স্টাইল অনুসরণ করতে সাহায্য করে। থিম কাস্টমাইজেশন দিয়ে আপনি চার্টের ব্যাকগ্রাউন্ড, রঙ, ফন্ট, এবং অন্যান্য উপাদান পরিবর্তন করতে পারবেন, যা চার্টের ভিজুয়াল অভিজ্ঞতা উন্নত করে।
Highcharts ব্যবহার করে আপনি সহজেই আপনার চার্টের ডিজাইন কাস্টমাইজ করতে পারেন। আপনি CSS এবং JavaScript ব্যবহার করে চার্টের বিভিন্ন উপাদান যেমন লাইন, বার, টুলটিপ, অক্ষরের স্টাইলিং ইত্যাদি কাস্টমাইজ করতে পারেন। নিচে CSS এবং JavaScript এর মাধ্যমে কিভাবে Highcharts চার্টের কাস্টম স্টাইলিং করা যায় তা বিস্তারিতভাবে আলোচনা করা হয়েছে।
CSS দিয়ে Custom Styling
CSS দিয়ে Highcharts এর বিভিন্ন উপাদান যেমন চার্টের ব্যাকগ্রাউন্ড, লেবেল, অক্ষরের ফন্ট স্টাইল ইত্যাদি কাস্টমাইজ করা সম্ভব। আপনি চার্টের কিছু নির্দিষ্ট সিলেক্টর ব্যবহার করে এগুলো পরিবর্তন করতে পারেন।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts CSS Custom Styling</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
/* চার্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন */
#container {
background-color: #f3f3f3;
border: 2px solid #ccc;
}
/* টুলটিপ স্টাইল */
.highcharts-tooltip {
background-color: #333;
color: white;
border-radius: 5px;
padding: 10px;
}
/* অক্ষরের ফন্ট স্টাইল */
.highcharts-axis-labels text {
font-family: 'Arial', sans-serif;
font-size: 14px;
font-weight: bold;
}
/* সেরিজের স্টাইল */
.highcharts-series rect {
fill: #FF5733;
}
</style>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'বিক্রয়ের ডেটা'
},
xAxis: {
categories: ['জানু', 'ফেব্রু', 'মার্চ', 'এপ্রিল', 'মে']
},
yAxis: {
title: {
text: 'বিক্রয় (Sales)'
}
},
series: [{
name: 'বিক্রয়',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে, CSS এর মাধ্যমে chart container এর ব্যাকগ্রাউন্ড রঙ, tooltip এর ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ, অক্ষরের font style, এবং সেরিজের বারগুলোর fill color কাস্টমাইজ করা হয়েছে।
JavaScript দিয়ে Custom Styling
JavaScript এর মাধ্যমে আপনি Highcharts এর configurations পরিবর্তন করে কাস্টম স্টাইলিং করতে পারেন। এতে আপনি লেবেল, লাইন, বার ইত্যাদির রঙ, স্টাইল, এবং আকার ইত্যাদি নিয়ন্ত্রণ করতে পারেন। JavaScript দিয়ে কাস্টম স্টাইলিং করা অনেক বেশি নমনীয় এবং উন্নত কাস্টমাইজেশন সরবরাহ করে।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts JavaScript Custom Styling</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line',
backgroundColor: '#e0e0e0', // ব্যাকগ্রাউন্ড রঙ পরিবর্তন
borderRadius: 10
},
title: {
text: 'সপ্তাহের বিক্রয়'
},
xAxis: {
categories: ['সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতিবার', 'শুক্রবার', 'শনিবার', 'রবিবার'],
labels: {
style: {
fontSize: '14px',
fontWeight: 'bold',
fontFamily: 'Arial, sans-serif'
}
}
},
yAxis: {
title: {
text: 'বিক্রয় (Sales)'
},
labels: {
style: {
color: '#FF5733'
}
}
},
series: [{
name: 'বিক্রি',
data: [10, 20, 30, 40, 50, 60, 70],
color: '#009688', // সিরিজের রঙ পরিবর্তন
lineWidth: 4, // লাইনWidth পরিবর্তন
marker: {
radius: 6, // মার্কার রেডিয়াস পরিবর্তন
fillColor: '#FF5733',
lineWidth: 2,
lineColor: '#FF5733'
}
}]
});
</script>
</body>
</html>
এখানে, JavaScript ব্যবহার করে:
- চার্টের ব্যাকগ্রাউন্ড রঙ এবং border-radius সেট করা হয়েছে।
- অক্ষরের font size, font weight, এবং font family কাস্টমাইজ করা হয়েছে।
- সিরিজের line color, line width, এবং marker styling পরিবর্তন করা হয়েছে।
Custom Styling এর জন্য Highcharts এর স্টাইল অপশন
Highcharts এ কাস্টম স্টাইলিং করতে কিছু মূল অপশন থাকে, যেমন:
- chart.backgroundColor: চার্টের ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করতে ব্যবহৃত হয়।
- series.color: সিরিজের রঙ পরিবর্তন করতে ব্যবহৃত হয়।
- xAxis.labels.style: X-axis লেবেলগুলির স্টাইল পরিবর্তন করতে ব্যবহৃত হয়।
- yAxis.labels.style: Y-axis লেবেলগুলির স্টাইল পরিবর্তন করতে ব্যবহৃত হয়।
- tooltip.backgroundColor: টুলটিপের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা যায়।
- plotOptions.series.marker.fillColor: মার্কারের রঙ কাস্টমাইজ করা যায়।
- plotOptions.series.lineWidth: লাইনWidth পরিবর্তন করা যায়।
উপসংহার
CSS এবং JavaScript এর মাধ্যমে আপনি Highcharts চার্টের ডিজাইন এবং স্টাইলিং কাস্টমাইজ করতে পারেন। CSS সহজভাবে টুলটিপ, ব্যাকগ্রাউন্ড, এবং অক্ষরের ফন্ট পরিবর্তন করতে সহায়ক, আর JavaScript এর মাধ্যমে আপনি আরও গভীরভাবে চার্টের নানা উপাদান যেমন সিরিজের রঙ, লাইনস্টাইল, এবং মার্কার কাস্টমাইজ করতে পারেন। Highcharts এ কাস্টম স্টাইলিং করার মাধ্যমে আপনি আপনার চার্টকে আরও আকর্ষণীয় এবং ব্যবহারকারীর জন্য উপযোগী করতে পারবেন।
Highcharts এর সাহায্যে আপনি আপনার চার্টের জন্য কাস্টম থিম তৈরি করতে পারেন। এই থিমগুলো চার্টের স্টাইল, রঙ, ফন্ট এবং অন্যান্য উপাদান কাস্টমাইজ করতে সহায়ক। বিশেষ করে, Dark Theme এবং High Contrast Theme খুবই জনপ্রিয়, কারণ এগুলো ডেটা ভিজুয়ালাইজেশনকে আরও স্পষ্ট করে এবং ব্যবহারকারীদের জন্য সুবিধাজনক হয়।
Dark Theme তৈরি করা
Dark Theme একটি গা dark ় রঙের স্কিম যা চোখের জন্য কম চাপ ফেলে এবং কম আলোতে ব্যবহারকারীকে সুবিধা দেয়। Highcharts এ Dark Theme তৈরি করতে আপনি কিছু স্টাইল এবং রঙ কাস্টমাইজ করতে পারেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Dark Theme Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/themes/dark-unica.js"></script> <!-- Highcharts Dark Theme -->
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Dark Theme Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে, Highcharts.dark-unica.js ফাইলটি ব্যবহার করা হয়েছে, যা Highcharts এর জন্য একটি প্রাথমিক Dark Theme প্রদান করে। এটি চার্টের ব্যাকগ্রাউন্ড, রঙ এবং অন্যান্য উপাদান পরিবর্তন করে।
High Contrast Theme তৈরি করা
High Contrast Theme ব্যবহারকারীদের জন্য খুবই উপকারী যারা দৃষ্টি প্রতিবন্ধী বা যারা সহজে স্পষ্টভাবে ডেটা দেখতে চান। এই থিমে রঙের ব্যবধান খুব বেশি থাকে, যাতে তথ্য আরও স্পষ্টভাবে দেখা যায়।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts High Contrast Theme Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast.js"></script> <!-- Highcharts High Contrast Theme -->
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'High Contrast Theme Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Sales',
data: [15, 25, 35, 45, 55]
}]
});
</script>
</body>
</html>
এখানে, Highcharts.high-contrast.js ফাইলটি ব্যবহার করা হয়েছে, যা উচ্চ কনট্রাস্টের জন্য উপযুক্ত রঙের স্কিম প্রদান করে। এটি মূলত কালো এবং সাদা বা উজ্জ্বল রঙের পার্থক্য তৈরি করে।
কাস্টম Dark Theme এবং High Contrast Theme তৈরি করা
যদি আপনি নিজস্ব Dark বা High Contrast থিম তৈরি করতে চান, তাহলে আপনাকে Highcharts.setOptions() মেথড ব্যবহার করতে হবে। এর মাধ্যমে আপনি চার্টের প্যারামিটার কাস্টমাইজ করতে পারেন, যেমন ব্যাকগ্রাউন্ড রঙ, টেক্সট রঙ, এবং অন্যান্য থিম উপাদান।
Custom Dark Theme উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Dark Theme Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.setOptions({
chart: {
backgroundColor: '#2a2a2a', // গা dark ় ব্যাকগ্রাউন্ড
style: {
fontFamily: 'Arial, sans-serif'
}
},
title: {
style: {
color: '#ffffff', // সাদা টাইটেল রঙ
fontSize: '16px'
}
},
xAxis: {
labels: {
style: {
color: '#ffffff' // সাদা x-axis লেবেল রঙ
}
}
},
yAxis: {
labels: {
style: {
color: '#ffffff' // সাদা y-axis লেবেল রঙ
}
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Custom Dark Theme'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এই কোডে, setOptions() মেথড ব্যবহার করে আমরা ব্যাকগ্রাউন্ড রঙ, টেক্সট রঙ এবং চার্টের অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করেছি।
Custom High Contrast Theme উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom High Contrast Theme Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.setOptions({
chart: {
backgroundColor: '#000000', // কালো ব্যাকগ্রাউন্ড
},
title: {
style: {
color: '#ff0000', // লাল টাইটেল রঙ
fontSize: '18px'
}
},
xAxis: {
labels: {
style: {
color: '#ffffff' // সাদা x-axis লেবেল রঙ
}
}
},
yAxis: {
labels: {
style: {
color: '#ffffff' // সাদা y-axis লেবেল রঙ
}
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Custom High Contrast Theme'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে, setOptions() মেথডের মাধ্যমে High Contrast Theme কাস্টমাইজ করা হয়েছে, যেখানে ব্যাকগ্রাউন্ড কালো এবং টেক্সট সাদা বা উজ্জ্বল রঙে সেট করা হয়েছে।
উপসংহার
Highcharts-এ Dark Theme এবং High Contrast Theme তৈরি করার মাধ্যমে আপনি আপনার চার্টের ভিজুয়াল উপস্থিতি আরও উন্নত করতে পারেন। আপনি Highcharts.setOptions() মেথড ব্যবহার করে কাস্টম থিম তৈরি করতে পারেন অথবা Highcharts এর প্রি-ডিফাইন্ড থিমগুলো ব্যবহার করতে পারেন। এই থিমগুলো ব্যবহারকারী অভিজ্ঞতা উন্নত করে এবং বিশেষত রাতে বা কম আলোতে সুবিধাজনক হয়।
Read more
