Highcharts এর মাধ্যমে আপনি চার্টের বিভিন্ন উপাদান যেমন লেজেন্ড, টুলটিপ, এবং সিরিজ কাস্টমাইজ করতে পারেন। এই উপাদানগুলোকে কাস্টমাইজ করে আপনি আপনার চার্টের ভিজ্যুয়াল এবং ব্যবহারকারী ইন্টারফেসকে আরও প্রভাবশালী এবং সহজবোধ্য করতে পারবেন।
নিচে Highcharts এ লেজেন্ড, টুলটিপ এবং সিরিজ কাস্টমাইজ করার পদ্ধতি আলোচনা করা হলো।
লেজেন্ড চার্টের একটি গুরুত্বপূর্ণ উপাদান, যা বিভিন্ন সিরিজ বা ডেটা পয়েন্টের ব্যাখ্যা দেয়। Highcharts এ লেজেন্ডের অবস্থান, আকার, স্টাইল ইত্যাদি কাস্টমাইজ করা সম্ভব।
লেজেন্ডের অবস্থান পরিবর্তন:
আপনি লেজেন্ডের অবস্থান পরিবর্তন করতে পারেন (উদাহরণস্বরূপ, উপরে, নিচে, বামে, ডানে):
legend: {
layout: 'horizontal', // horizontal or vertical
align: 'center', // 'left', 'center', 'right'
verticalAlign: 'bottom', // 'top', 'middle', 'bottom'
floating: true // set to true to float over the chart
}
লেজেন্ডের স্টাইল কাস্টমাইজ করা:
আপনি লেজেন্ডের ফন্ট, সাইজ, কালার ইত্যাদি কাস্টমাইজ করতে পারেন।
legend: {
itemStyle: {
color: '#FF0000', // Set font color
fontSize: '14px', // Set font size
fontWeight: 'bold' // Set font weight
}
}
টুলটিপ চার্টে মাউস হোভার করার সময় ডেটার বিস্তারিত প্রদর্শন করে। Highcharts এ টুলটিপ কাস্টমাইজ করার জন্য নিচের কিছু পদ্ধতি অনুসরণ করতে পারেন:
টুলটিপের অবস্থান পরিবর্তন:
টুলটিপের পজিশন এবং কনটেন্ট কাস্টমাইজ করা যেতে পারে।
tooltip: {
backgroundColor: '#FFEB3B', // Tooltip background color
borderColor: '#FF9800', // Tooltip border color
borderRadius: 10, // Tooltip border radius
borderWidth: 2, // Tooltip border width
shadow: true, // Enable shadow
style: {
color: '#000000', // Tooltip text color
fontSize: '12px' // Tooltip text size
}
}
টুলটিপের কনটেন্ট কাস্টমাইজ করা:
আপনি টুলটিপের কনটেন্ট কাস্টমাইজ করতে formatter ফাংশন ব্যবহার করতে পারেন:
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br>' + this.x + ': ' + this.y;
}
}
এখানে, this.series.name সিরিজের নাম, this.x এক্স-অ্যাক্সিসের মান এবং this.y ওয়াই-অ্যাক্সিসের মান প্রদর্শন করবে।
সিরিজ হলো ডেটার মূল উপাদান যা চার্টে প্রদর্শিত হয়। Highcharts এ আপনি সিরিজের বিভিন্ন বৈশিষ্ট্য যেমন রঙ, টাইপ, স্টাইল ইত্যাদি কাস্টমাইজ করতে পারেন।
সিরিজের টাইপ কাস্টমাইজ করা:
আপনি সিরিজের টাইপ পরিবর্তন করতে পারেন যেমন লাইন চার্ট, কলাম চার্ট, বার চার্ট ইত্যাদি।
series: [{
type: 'line', // line, column, bar, area, scatter, etc.
name: 'Sales',
data: [5, 10, 15, 20]
}]
সিরিজের রঙ কাস্টমাইজ করা:
আপনি সিরিজের রঙ পরিবর্তন করতে পারেন:
series: [{
name: 'Sales',
color: '#FF5733', // Set series color
data: [5, 10, 15, 20]
}]
সিরিজের ডেটা মার্কার কাস্টমাইজ করা:
সিরিজের ডেটা পয়েন্টগুলির মার্কার (যেমন বুলেট বা সিংহ) কাস্টমাইজ করা যেতে পারে।
series: [{
name: 'Sales',
marker: {
symbol: 'square', // 'circle', 'square', 'diamond'
radius: 5, // Marker radius
fillColor: '#0000FF' // Marker fill color
},
data: [5, 10, 15, 20]
}]
সিরিজের স্টাইল কাস্টমাইজ করা:
সিরিজের রেখা, প্যাটার্ন, স্টাইল ইত্যাদি কাস্টমাইজ করা যেতে পারে।
series: [{
name: 'Sales',
lineWidth: 3, // Line width
dashStyle: 'ShortDash', // Line style ('Solid', 'Dash', 'Dot', etc.)
data: [5, 10, 15, 20]
}]
এখানে একটি উদাহরণ দেওয়া হলো যেখানে লেজেন্ড, টুলটিপ, এবং সিরিজ কাস্টমাইজ করা হয়েছে:
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Data'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
color: '#FF5733',
fontSize: '14px',
fontWeight: 'bold'
}
},
tooltip: {
backgroundColor: '#FFEB3B',
borderColor: '#FF9800',
borderRadius: 10,
formatter: function() {
return '<b>' + this.series.name + '</b><br>' + this.x + ': ' + this.y;
}
},
series: [{
name: 'Sales',
color: '#FF5733',
lineWidth: 3,
data: [5, 10, 15, 20]
}]
});
Highcharts ব্যবহার করে আপনি আপনার চার্টের লেজেন্ড, টুলটিপ, এবং সিরিজ কাস্টমাইজ করতে পারবেন। এর মাধ্যমে আপনি চার্টের ভিজ্যুয়াল উপাদানগুলো যেমন রঙ, ফন্ট, আকার, এবং ডেটার প্রদর্শন পদ্ধতি পরিবর্তন করতে পারেন। এই কাস্টমাইজেশনের মাধ্যমে আপনার চার্টটি আরও প্রভাবশালী, ব্যবহারকারী-বান্ধব এবং গ্রাহকের জন্য উপযোগী হয়ে উঠবে।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
