চার্টের বিভিন্ন উপাদান কাস্টমাইজ করা (লেজেন্ড, টুলটিপ, সিরিজ)

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

নিচে Highcharts এ লেজেন্ড, টুলটিপ এবং সিরিজ কাস্টমাইজ করার পদ্ধতি আলোচনা করা হলো।

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

লেজেন্ড চার্টের একটি গুরুত্বপূর্ণ উপাদান, যা বিভিন্ন সিরিজ বা ডেটা পয়েন্টের ব্যাখ্যা দেয়। 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
    }
  }
  

2. টুলটিপ কাস্টমাইজ করা

টুলটিপ চার্টে মাউস হোভার করার সময় ডেটার বিস্তারিত প্রদর্শন করে। 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 ওয়াই-অ্যাক্সিসের মান প্রদর্শন করবে।

3. সিরিজ কাস্টমাইজ করা

সিরিজ হলো ডেটার মূল উপাদান যা চার্টে প্রদর্শিত হয়। 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 ব্যবহার করে আপনি আপনার চার্টের লেজেন্ড, টুলটিপ, এবং সিরিজ কাস্টমাইজ করতে পারবেন। এর মাধ্যমে আপনি চার্টের ভিজ্যুয়াল উপাদানগুলো যেমন রঙ, ফন্ট, আকার, এবং ডেটার প্রদর্শন পদ্ধতি পরিবর্তন করতে পারেন। এই কাস্টমাইজেশনের মাধ্যমে আপনার চার্টটি আরও প্রভাবশালী, ব্যবহারকারী-বান্ধব এবং গ্রাহকের জন্য উপযোগী হয়ে উঠবে।