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

1. চার্টের প্রাথমিক অপশন

Highcharts চার্ট তৈরি করতে, আপনাকে কিছু প্রাথমিক অপশন কনফিগার করতে হয়, যেমন chart type, title, subtitle, xAxis, এবং yAxis। নিচে একটি সাধারণ line chart এর অপশন এবং কাস্টমাইজেশন দেওয়া হলো:

chartOptions = {
  chart: {
    type: 'line'  // চার্টের প্রকার (line, bar, column, pie ইত্যাদি)
  },
  title: {
    text: 'Sample Line Chart'  // চার্টের শিরোনাম
  },
  subtitle: {
    text: 'Subtitle goes here'  // চার্টের উপশিরোনাম
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],  // xAxis (Horizontal Axis) এর ক্যাটাগরি
    title: {
      text: 'Month'  // xAxis এর শিরোনাম
    }
  },
  yAxis: {
    title: {
      text: 'Value'  // yAxis (Vertical Axis) এর শিরোনাম
    }
  },
  series: [{
    name: 'Data Series',
    data: [29, 71, 106, 129, 144]  // ডেটা সিরিজ
  }]
};

2. চার্টের শিরোনাম এবং উপশিরোনাম কাস্টমাইজেশন

Highcharts এ শিরোনাম এবং উপশিরোনাম কাস্টমাইজ করা খুবই সহজ। আপনি title এবং subtitle অপশন ব্যবহার করে এগুলোর টেক্সট এবং স্টাইল পরিবর্তন করতে পারেন:

title: {
  text: 'Custom Title',  // শিরোনাম
  style: {
    color: '#FF0000',  // শিরোনামের রং
    fontSize: '20px'  // শিরোনামের আকার
  }
},
subtitle: {
  text: 'Custom Subtitle',
  style: {
    color: '#00FF00',
    fontSize: '16px'
  }
}

3. xAxis এবং yAxis কাস্টমাইজেশন

xAxis এবং yAxis হল চার্টের অনুভূমিক এবং উল্লম্ব অক্ষ। এগুলোর শিরোনাম, রেঞ্জ, এবং গ্রিডলাইন কাস্টমাইজ করা যেতে পারে।

• xAxis এর শিরোনাম এবং ক্যাটাগরি:

xAxis: {
  categories: ['Jan', 'Feb', 'Mar', 'Apr'],
  title: {
    text: 'Months'
  },
  gridLineWidth: 1,  // গ্রিডলাইন এর প্রস্থ
  gridLineColor: '#DDDDDD'  // গ্রিডলাইন এর রঙ
}

• yAxis এর শিরোনাম এবং রেঞ্জ:

yAxis: {
  title: {
    text: 'Sales Amount'
  },
  min: 0,  // yAxis এর সর্বনিম্ন মান
  max: 200,  // yAxis এর সর্বোচ্চ মান
  tickInterval: 20  // yAxis এর টিকের অন্তর
}

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

Highcharts এ series হচ্ছে মূল ডেটা যা চার্টে প্রদর্শিত হয়। আপনি series অপশন ব্যবহার করে সিরিজের রং, লাইন টাইপ, এবং মার্কার কাস্টমাইজ করতে পারেন।

series: [{
  name: 'Product A',
  data: [10, 15, 25, 30, 50],
  type: 'line',  // সিরিজের ধরন (line, column, bar, scatter ইত্যাদি)
  color: '#FF5733',  // সিরিজের রং
  marker: {
    enabled: true,  // মার্কার সক্রিয় করা
    radius: 5  // মার্কারের আকার
  }
}]

5. চার্টের থিম এবং স্টাইল

Highcharts এ আপনি বিভিন্ন থিম কাস্টমাইজ করতে পারেন। Highcharts লাইব্রেরি কিছু বিল্ট-ইন থিম প্রদান করে, কিন্তু আপনি নিজের থিমও তৈরি করতে পারেন। আপনি chart, title, legend, tooltip ইত্যাদি কাস্টমাইজ করতে পারেন।

Highcharts.setOptions({
  chart: {
    backgroundColor: '#f4f4f4',  // চার্টের ব্যাকগ্রাউন্ড রঙ
    borderColor: '#ccc',  // বর্ডারের রঙ
    borderWidth: 2  // বর্ডারের প্রস্থ
  },
  title: {
    style: {
      color: '#333',  // শিরোনামের রঙ
      fontSize: '24px'  // শিরোনামের আকার
    }
  },
  tooltip: {
    backgroundColor: '#333',  // টুলটিপের ব্যাকগ্রাউন্ড রঙ
    style: {
      color: '#fff'  // টুলটিপের টেক্সট রঙ
    }
  }
});

6. চার্টের ইন্টারঅ্যাকটিভ ফিচার

Highcharts অনেক ধরনের ইন্টারঅ্যাকটিভ ফিচারও সমর্থন করে, যেমন:

• Zooming and Panning: ব্যবহারকারীরা চার্টে জুম ইন বা আউট করতে এবং প্যান করতে পারেন।

chart: {
  zoomType: 'xy'  // দুইটি অক্ষের (x এবং y) জন্য জুম সক্রিয় করা
}

• Tooltips: আপনি টুলটিপ কাস্টমাইজ করতে পারেন যাতে যখন ইউজার কোন ডেটা পয়েন্টে মাউস Hover করবে তখন অতিরিক্ত তথ্য প্রদর্শিত হয়।

tooltip: {
  pointFormat: '<b>{series.name}</b>: {point.y} units'
}

7. ডেটা আপডেট এবং ডায়নামিক কাস্টমাইজেশন

Highcharts এ আপনি setData মেথড ব্যবহার করে ডেটা ডায়নামিকালি আপডেট করতে পারেন।

this.chartOptions.series[0].setData([5, 10, 15, 20, 25]);

এটি চার্টে প্রদর্শিত সিরিজের ডেটা আপডেট করবে।

সারাংশ

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

Highcharts লাইব্রেরি ব্যবহার করার সময় আপনি চার্টের থিম এবং স্টাইল কাস্টমাইজ করতে পারেন। Highcharts বিভিন্ন বিল্ট-ইন থিম এবং স্টাইলিং অপশন সরবরাহ করে, যা আপনাকে আপনার চার্টের ভিজ্যুয়াল প্রেজেন্টেশন উন্নত করতে সহায়ক। আপনি চার্টের রঙ, ফন্ট, লেআউট, এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারেন। নিচে Highcharts এর থিম এবং স্টাইল পরিবর্তনের কিছু পদ্ধতি তুলে ধরা হলো।

1. বিল্ট-ইন থিম ব্যবহার করা

Highcharts কিছু প্রি-ডিফাইন্ড থিম সরবরাহ করে, যেগুলো আপনি আপনার চার্টে সহজেই অ্যাপ্লাই করতে পারেন। এটি করতে, প্রথমে Highcharts এর setOptions ফাংশন ব্যবহার করে থিম লোড করতে হবে।

উদাহরণ: বিল্ট-ইন থিম অ্যাপ্লাই করা

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsTheme from 'highcharts/themes/dark-unica';  // বিল্ট-ইন থিম

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Highcharts Example with Dark Unica Theme'
    },
    series: [{
      name: 'Example Series',
      data: [1, 2, 3, 4, 5]
    }]
  };

  constructor() {
    // থিম সেট করা
    Highcharts.setOptions(HighchartsTheme); 
  }
}

এখানে dark-unica থিম ব্যবহার করা হয়েছে। আপনি অন্যান্য থিম যেমন grid, skies, sand-signika ইত্যাদি ব্যবহার করতে পারেন।

2. চার্টের স্টাইল কাস্টমাইজ করা

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

উদাহরণ: চার্টের কাস্টম স্টাইল

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'column',
      backgroundColor: '#f4f4f4'  // চার্টের ব্যাকগ্রাউন্ড রঙ
    },
    title: {
      text: 'Styled Highcharts Example',
      style: {
        color: '#2f4f4f',  // শিরোনামের রঙ
        fontSize: '18px',
        fontWeight: 'bold'
      }
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      labels: {
        style: {
          color: '#333',  // এক্স-অ্যাক্সিসের লেবেল রঙ
          fontSize: '14px'
        }
      }
    },
    yAxis: {
      title: {
        text: 'Value',
        style: {
          color: '#2f4f4f',  // y-axis টাইটেল রঙ
          fontSize: '16px'
        }
      },
      labels: {
        style: {
          color: '#666',  // y-axis লেবেল রঙ
          fontSize: '12px'
        }
      }
    },
    series: [{
      name: 'Sales',
      data: [3, 5, 7, 9, 6],
      color: '#ff5733'  // সিরিজের রঙ
    }]
  };
}

এখানে, চার্টের ব্যাকগ্রাউন্ড রঙ, শিরোনামের রঙ এবং সাইজ, এক্স এবং ওয়াই অ্যাক্সিসের লেবেল এবং সিরিজের রঙ কাস্টমাইজ করা হয়েছে।

3. চার্টের সিরিজ কাস্টমাইজেশন

Highcharts আপনাকে প্রতিটি সিরিজের জন্য আলাদাভাবে স্টাইল পরিবর্তন করতে দেয়। আপনি সিরিজের রঙ, স্টাইল, ডট শেপ, মার্কার সাইজ এবং অন্যান্য পারামিটার কাস্টমাইজ করতে পারেন।

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

series: [{
  name: 'Example Sales',
  data: [1, 3, 2, 4, 5],
  color: '#00ff00',  // সিরিজের রঙ
  marker: {
    enabled: true,
    radius: 6,  // মার্কারের রেডিয়াস
    symbol: 'circle'  // মার্কারের আকার
  }
}]

এখানে, সিরিজের মার্কার রঙ এবং আকার কাস্টমাইজ করা হয়েছে।

4. নেভিগেশন কাস্টমাইজেশন

Highcharts এ চার্টের বিভিন্ন নেভিগেশন উপাদান যেমন Legend, Tooltip, Data Labels, এবং Credits কাস্টমাইজ করা যায়।

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

legend: {
  align: 'center',
  verticalAlign: 'top',
  layout: 'horizontal',
  itemStyle: {
    color: '#333',  // Legend item এর রঙ
    fontSize: '14px'
  }
}

এখানে Legend এর অবস্থান, লেআউট, এবং আইটেমের স্টাইল কাস্টমাইজ করা হয়েছে।

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

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

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

tooltip: {
  backgroundColor: '#f4f4f4',  // টুলটিপের ব্যাকগ্রাউন্ড রঙ
  style: {
    color: '#000',  // টুলটিপের টেক্সট রঙ
    fontSize: '14px'
  },
  formatter: function () {
    return 'Custom Tooltip: ' + this.series.name + ' - ' + this.y;
  }
}

এখানে টুলটিপের রঙ এবং কাস্টম ফর্ম্যাটিং করা হয়েছে।

সারাংশ

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

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

Highcharts এর মাধ্যমে আপনি xAxis এবং yAxis এর বিভিন্ন সেটিংস কাস্টমাইজ করতে পারেন। অ্যাক্সিস কাস্টমাইজেশনের মাধ্যমে আপনি চার্টের ডেটা প্রদর্শনের পদ্ধতি নিয়ন্ত্রণ করতে পারবেন, যেমন অ্যাক্সিসের শিরোনাম, স্কেল, লেবেল, রেঞ্জ, এবং আরো অনেক কিছু। এই কাস্টমাইজেশন আপনার চার্টের পেশাদারিত্ব বাড়াতে সাহায্য করে।

এখানে xAxis এবং yAxis কাস্টমাইজ করার কিছু সাধারণ পদ্ধতি দেয়া হলো।

ধাপ ১: xAxis এবং yAxis কাস্টমাইজেশন

আপনার chart.component.ts ফাইলে xAxis এবং yAxis এর কনফিগারেশন কাস্টমাইজ করতে হবে। এখানে একটি উদাহরণ দেয়া হলো যেখানে আমরা xAxis এবং yAxis কাস্টমাইজ করব:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'line'  // 'line' চার্ট টাইপ
    },
    title: {
      text: 'Customized Axis Example'  // চার্টের শিরোনাম
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],  // xAxis কাস্টম লেবেল
      title: {
        text: 'Months'  // xAxis এর শিরোনাম
      },
      labels: {
        style: {
          fontSize: '14px',
          fontWeight: 'bold'
        }
      },
      tickInterval: 1,  // xAxis এর টিকের দুরত্ব নির্ধারণ
      gridLineWidth: 2,  // xAxis এর গ্রিড লাইন এর প্রস্থ
    },
    yAxis: {
      title: {
        text: 'Values'  // yAxis এর শিরোনাম
      },
      labels: {
        format: '{value} units'  // yAxis এর লেবেল ফরম্যাট
      },
      min: 0,  // yAxis এর মিনিমাম মান
      max: 10,  // yAxis এর ম্যাক্সিমাম মান
      tickInterval: 2,  // yAxis এর টিকের দুরত্ব নির্ধারণ
      gridLineWidth: 1,  // yAxis এর গ্রিড লাইন এর প্রস্থ
      tickColor: '#ff0000',  // yAxis এর টিক মার্কের রঙ
    },
    series: [{
      name: 'Data Series',
      data: [1, 3, 2, 4, 5, 6, 7]  // ডেটা সিরিজ
    }]
  };
}

ধাপ ২: xAxis কাস্টমাইজেশন

xAxis হল চার্টের নিচের এক্স-অ্যাক্সিস, যা সাধারণত ক্যাটেগরি বা টাইম লাইন এর তথ্য প্রদর্শন করে। এটি কাস্টমাইজ করার জন্য আপনি বিভিন্ন অপশন ব্যবহার করতে পারেন:

• categories: এক্স-অ্যাক্সিসে যে ক্যাটেগরি বা মানগুলো দেখাতে চান তা নির্ধারণ করে।
• title: এক্স-অ্যাক্সিসের শিরোনাম সেট করা হয়।
• labels: লেবেলের স্টাইল বা ফন্ট কাস্টমাইজেশন করার জন্য ব্যবহৃত হয়।
• tickInterval: এক্স-অ্যাক্সিসে টিক মার্কের দুরত্ব সেট করতে ব্যবহৃত হয়।
• gridLineWidth: গ্রিড লাইন এর প্রস্থ কাস্টমাইজ করতে ব্যবহৃত হয়।

উদাহরণ: এখানে আমরা xAxis এর শিরোনাম ‘Months’ এবং ফন্ট সাইজ পরিবর্তন করেছি।

ধাপ ৩: yAxis কাস্টমাইজেশন

yAxis হল চার্টের বাম দিকের Vertical Axis। এটি ডেটার মান প্রদর্শন করে এবং বিভিন্ন কাস্টমাইজেশন অপশন সরবরাহ করে:

• title: yAxis এর শিরোনাম।
• labels: লেবেলের ফরম্যাট বা স্টাইল পরিবর্তন করতে ব্যবহৃত হয়।
• min এবং max: yAxis এর ন্যূনতম এবং সর্বোচ্চ মান কাস্টমাইজ করা হয়।
• tickInterval: yAxis এর টিকের দুরত্ব নির্ধারণ করা হয়।
• gridLineWidth: গ্রিড লাইন এর প্রস্থ সেট করা হয়।
• tickColor: টিক মার্কের রঙ কাস্টমাইজ করা হয়।

উদাহরণ: এখানে আমরা yAxis এর লেবেল ফরম্যাট {value} units দিয়ে পরিবর্তন করেছি এবং min ও max মান নির্ধারণ করেছি।

ধাপ ৪: টেমপ্লেটের জন্য কোড

chart.component.html ফাইলে Highcharts কম্পোনেন্ট ব্যবহার করে চার্টটি রেন্ডার করা হয়:

<div style="width: 100%; height: 400px;">
  <highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions">
  </highcharts-chart>
</div>

ধাপ ৫: অ্যাপ্লিকেশন রান করা

এখন অ্যাপ্লিকেশনটি চালু করতে ng serve কমান্ডটি ব্যবহার করুন এবং আপনার ব্রাউজারে গিয়ে http://localhost:4200/ তে গিয়ে কাস্টমাইজড এক্স এবং ওয়াই অ্যাক্সিস সহ চার্টটি দেখতে পারবেন।

ng serve

সারাংশ

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

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 এর কাস্টমাইজেশন ক্ষমতা আপনাকে বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশন এবং ইন্টারঅ্যাকটিভ উপস্থাপনা তৈরি করতে সহায়ক।