চার্টের স্টাইল এবং লেআউট কাস্টমাইজেশন

Google Charts API-এ Chart Style এবং Layout Customization ব্যবহার করে আপনি চার্টের বিভিন্ন দিক কাস্টমাইজ করতে পারেন, যেমন রঙ, টাইটেল, অক্ষ (axis), লেজেন্ড, টুলটিপ, সাইজ এবং আরও অনেক কিছু। এই কাস্টমাইজেশনগুলি আপনার ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী এবং আকর্ষণীয় করে তোলে।

Chart Style কাস্টমাইজেশন

Chart Style কাস্টমাইজেশন দ্বারা আপনি চার্টের বিভিন্ন উপাদান যেমন রঙ, ফন্ট, গ্রিডলাইন, অক্ষের স্টাইল ইত্যাদি কাস্টমাইজ করতে পারেন।

1. Title কাস্টমাইজেশন (Title Customization)

চার্টের টাইটেল পরিবর্তন করতে এবং সেটির স্টাইল কাস্টমাইজ করতে title অপশন ব্যবহার করা হয়।

chartOptions = {
  title: 'My Daily Activities', // Title
  titleTextStyle: {
    color: 'blue', // Title text color
    fontSize: 18, // Title text size
    bold: true, // Title text weight
    italic: true // Title text style
  }
};

2. Chart Width এবং Height কাস্টমাইজেশন

চার্টের আকার পরিবর্তন করতে আপনি width এবং height অপশন ব্যবহার করতে পারেন।

chartOptions = {
  width: 600,   // Chart width
  height: 400   // Chart height
};

3. Legend কাস্টমাইজেশন (Legend Customization)

চার্টের লেজেন্ডের পজিশন এবং স্টাইল কাস্টমাইজ করতে legend অপশন ব্যবহার করা হয়।

chartOptions = {
  legend: {
    position: 'top', // Legend position: top, bottom, left, right
    alignment: 'center', // Legend alignment: start, center, end
    textStyle: {
      color: 'black', // Legend text color
      fontSize: 14, // Legend text size
      fontName: 'Arial' // Legend text font
    }
  }
};

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

চার্টের বিভিন্ন উপাদানের রঙ কাস্টমাইজ করতে colors অপশন ব্যবহার করা হয়। এটি একাধিক রঙ গ্রহণ করতে পারে।

chartOptions = {
  colors: ['#FF5733', '#33FF57', '#3357FF'] // Chart colors
};

5. Tooltip কাস্টমাইজেশন

চার্টের উপর হোভার করার সময় tooltip প্রদর্শিত হয়। টুলটিপের কন্টেন্ট এবং স্টাইল কাস্টমাইজ করা যায়।

chartOptions = {
  tooltip: {
    trigger: 'focus', // Tooltip trigger: focus, selection
    isHtml: true, // Enable HTML in tooltip
    textStyle: {
      color: 'black',
      fontSize: 14
    }
  }
};

6. Axis কাস্টমাইজেশন (Axis Customization)

hAxis (horizontal axis) এবং vAxis (vertical axis) কাস্টমাইজ করার মাধ্যমে আপনি অক্ষের টাইটেল, লেবেল, গ্রিডলাইন এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।

chartOptions = {
  hAxis: {
    title: 'Time', // Horizontal axis title
    minValue: 0, // Minimum value for horizontal axis
    textStyle: {
      color: 'green', // Axis text color
      fontSize: 12 // Axis text font size
    },
    gridlines: {
      color: 'lightgrey', // Gridlines color
      count: 5 // Number of gridlines
    }
  },
  vAxis: {
    title: 'Sales', // Vertical axis title
    textStyle: {
      color: 'red', // Axis text color
      fontSize: 14 // Axis text font size
    }
  }
};

7. Background Color কাস্টমাইজেশন

চার্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে backgroundColor অপশন ব্যবহার করা হয়।

chartOptions = {
  backgroundColor: '#f2f2f2' // Background color of the chart
};

8. 3D Chart কাস্টমাইজেশন

অনেক ধরনের চার্টে 3D ভিউ তৈরি করা যায়। যেমন, PieChart, ColumnChart, BarChart-এ 3D কাস্টমাইজেশন করা যেতে পারে।

chartOptions = {
  is3D: true, // Enable 3D for the chart
  view: { min: 0, max: 10 }
};

Chart Layout কাস্টমাইজেশন

Chart Layout কাস্টমাইজেশন দ্বারা আপনি চার্টের আঙ্গিক, অক্ষের বিন্যাস, এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারেন।

9. Gridlines কাস্টমাইজেশন

গ্রিডলাইনগুলোকে কাস্টমাইজ করতে gridlines অপশন ব্যবহার করা হয়, যা চার্টের অক্ষের গ্রিডের জন্য উপযুক্ত।

chartOptions = {
  hAxis: {
    gridlines: {
      count: 4, // Set the number of gridlines
      color: '#e5e5e5', // Set gridline color
      width: 0.5 // Set gridline width
    }
  },
  vAxis: {
    gridlines: {
      color: '#e5e5e5',
      width: 0.5
    }
  }
};

10. Chart Title Positioning and Alignment

চার্টের টাইটেল এবং লেজেন্ডের পজিশন এবং এলাইনমেন্ট নিয়ন্ত্রণ করা যায়।

chartOptions = {
  title: 'Sales Overview',
  titlePosition: 'in', // 'in' or 'out' for title inside or outside the chart
  titleTextStyle: {
    fontSize: 16,
    color: '#000',
    bold: true
  },
  legend: {
    position: 'bottom',
    alignment: 'center' // Align legend text to center
  }
};

Chart Example with Full Customization

নিচে একটি Pie Chart উদাহরণ দেওয়া হলো, যেখানে বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহৃত হয়েছে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Customized Google Chart';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities',  // Title
    titleTextStyle: {
      color: 'blue', // Title text color
      fontSize: 18, // Title font size
      bold: true // Title bold
    },
    pieHole: 0.4,  // Doughnut Style
    width: 600,
    height: 400,
    colors: ['#FF5733', '#33FF57', '#3357FF'],  // Custom Colors
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: 'black', // Legend text color
        fontSize: 14 // Legend font size
      }
    },
    tooltip: {
      trigger: 'focus', // Tooltip trigger
      isHtml: true, // Enable HTML in tooltip
      textStyle: {
        color: 'black',
        fontSize: 14
      }
    }
  };
}

HTML:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

সারাংশ

Google Charts API-তে Chart Style এবং Layout Customization আপনাকে আপনার চার্টকে কাস্টমাইজ করার পুরো স্বাধীনতা দেয়। আপনি title, legend, colors, axis, gridlines, এবং অন্যান্য অপশন কাস্টমাইজ করে চার্টের স্টাইল এবং লেআউট পরিবর্তন করতে পারেন। এই কাস্টমাইজেশন আপনার ডেটা ভিজুয়ালাইজেশনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।