সিরিজের ডেটা এবং টুলটিপ কাস্টমাইজেশন

Highcharts এর মাধ্যমে আপনি সিরিজের ডেটা এবং টুলটিপ কাস্টমাইজ করতে পারেন, যা চার্টের ভিজ্যুয়াল উপস্থাপন এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। এখানে আমরা আলোচনা করবো কিভাবে সিরিজের ডেটা কাস্টমাইজ করা যায় এবং কিভাবে টুলটিপের কাস্টমাইজেশন করা যায়।

1. সিরিজের ডেটা কাস্টমাইজেশন

Highcharts এ সিরিজের ডেটা কাস্টমাইজেশন করতে, আপনি series এর মধ্যে data অ্যারে নির্ধারণ করবেন, যেখানে প্রতিটি পয়েন্টের মান, নাম এবং অন্যান্য প্যারামিটার আপনি নির্ধারণ করতে পারেন। আপনি সিরিজের মধ্যে ডেটার প্রকারও নির্ধারণ করতে পারেন, যেমন বার, কলাম, বা লাইন চার্ট।

উদাহরণ: সিরিজের ডেটা কাস্টমাইজেশন

Highcharts.chart('container', {
  chart: {
    type: 'column' // চার্টের প্রকার (কলাম চার্ট)
  },
  title: {
    text: 'সেলস ডেটা' // চার্টের শিরোনাম
  },
  xAxis: {
    categories: ['জানুয়ারী', 'ফেব্রুয়ারী', 'মার্চ', 'এপ্রিল', 'মে'] // এক্স-অ্যাক্সিসের ক্যাটেগরি
  },
  yAxis: {
    title: {
      text: 'Amount' // y-axis এর শিরোনাম
    }
  },
  series: [{
    name: '2024 সেলস',
    data: [100, 200, 300, 400, 500], // ডেটা পয়েন্টসমূহ
    color: '#FF5733' // সিরিজের রং কাস্টমাইজ করা
  }, {
    name: '2025 সেলস',
    data: [150, 250, 350, 450, 550],
    color: '#33FF57' // দ্বিতীয় সিরিজের রং কাস্টমাইজ করা
  }]
});

এখানে series এর মধ্যে দুটি সিরিজ ডেটা রয়েছে, একটি ২০২৪ সালের সেলস এবং আরেকটি ২০২৫ সালের সেলস। প্রতি সিরিজের জন্য name (নাম), data (ডেটা পয়েন্ট) এবং color (রং) কাস্টমাইজ করা হয়েছে।

2. টুলটিপ কাস্টমাইজেশন

Highcharts এ টুলটিপ কাস্টমাইজেশন অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি ব্যবহারকারীকে প্রতিটি ডেটা পয়েন্ট সম্পর্কে আরও বিস্তারিত তথ্য প্রদান করে। আপনি টুলটিপের কন্টেন্ট, ফরম্যাট, স্টাইল এবং আচরণ কাস্টমাইজ করতে পারেন।

উদাহরণ: টুলটিপ কাস্টমাইজেশন

Highcharts.chart('container', {
  chart: {
    type: 'line' // লাইন চার্ট
  },
  title: {
    text: 'টুলটিপ কাস্টমাইজেশন উদাহরণ'
  },
  xAxis: {
    categories: ['জানুয়ারী', 'ফেব্রুয়ারী', 'মার্চ', 'এপ্রিল', 'মে']
  },
  yAxis: {
    title: {
      text: 'Amount'
    }
  },
  tooltip: {
    headerFormat: '<b>{point.key}</b><br>', // টুলটিপের হেডার কাস্টমাইজেশন
    pointFormat: '{series.name}: <b>{point.y}</b>', // পয়েন্টের কাস্টম ফরম্যাট
    footerFormat: 'মোট: <b>{point.y}</b>', // টুলটিপের ফুটার কাস্টমাইজেশন
    valueDecimals: 2 // দশমিক স্থান নির্ধারণ
  },
  series: [{
    name: '2024 সেলস',
    data: [100, 200, 300, 400, 500]
  }]
});

এখানে আমরা টুলটিপের headerFormat, pointFormat, এবং footerFormat কাস্টমাইজ করেছি। এই কনফিগারেশনগুলো টুলটিপের ভিউ এবং তার কনটেন্ট নিয়ন্ত্রণ করতে সাহায্য করবে।

• headerFormat: টুলটিপের হেডার অংশ কাস্টমাইজ করতে ব্যবহৃত হয়। এখানে {point.key} দিয়ে x-অ্যাক্সিসের মান দেখানো হবে।
• pointFormat: পয়েন্টের ডেটার কাস্টম ফরম্যাট নির্ধারণ করা হয়। {series.name} দিয়ে সিরিজের নাম এবং {point.y} দিয়ে পয়েন্টের মান দেখানো হবে।
• footerFormat: টুলটিপের ফুটার অংশ কাস্টমাইজ করা হয়।
• valueDecimals: ডেটার দশমিক স্থান নির্ধারণ করা হয়।

3. ইন্টারঅ্যাকটিভ টুলটিপ

Highcharts এর টুলটিপ আরো ইন্টারঅ্যাকটিভ করা যায়, যেমন pointFormatter ব্যবহার করে টুলটিপের কাস্টম কনটেন্ট প্রদর্শন করা:

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'ইন্টারঅ্যাকটিভ টুলটিপ উদাহরণ'
  },
  xAxis: {
    categories: ['জানুয়ারী', 'ফেব্রুয়ারী', 'মার্চ', 'এপ্রিল', 'মে']
  },
  yAxis: {
    title: {
      text: 'Amount'
    }
  },
  tooltip: {
    pointFormatter: function() {
      return 'এই মাসে মোট সেলস: <b>' + this.y + '</b>'; // কাস্টম টুলটিপ কনটেন্ট
    }
  },
  series: [{
    name: 'সেলস',
    data: [100, 200, 300, 400, 500]
  }]
});

এখানে, pointFormatter ব্যবহার করে টুলটিপের কাস্টম কনটেন্ট তৈরি করা হয়েছে, যা প্রতি পয়েন্টের মান প্রদর্শন করবে।

সারাংশ

Highcharts এ সিরিজের ডেটা এবং টুলটিপ কাস্টমাইজেশন খুবই সহজ এবং শক্তিশালী। আপনি সিরিজের ডেটা কাস্টমাইজ করতে পারেন, যেমন সিরিজের নাম, রং, ডেটা পয়েন্ট ইত্যাদি, এবং একইভাবে টুলটিপ কাস্টমাইজ করতে পারেন যা ব্যবহারকারীদের জন্য আরও বিস্তারিত তথ্য প্রদর্শন করবে। Highcharts এর কাস্টমাইজেশন ক্ষমতা আপনাকে বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশন এবং ইন্টারঅ্যাকটিভ উপস্থাপনা তৈরি করতে সহায়ক।