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 এ কাস্টম স্টাইলিং করার মাধ্যমে আপনি আপনার চার্টকে আরও আকর্ষণীয় এবং ব্যবহারকারীর জন্য উপযোগী করতে পারবেন।
Read more
