Color Scheme এবং Fonts এর পরিবর্তন

Google Charts API ব্যবহার করে আপনি চার্টের রঙ এবং ফন্ট কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনি আপনার চার্টকে আপনার অ্যাপ্লিকেশনের ডিজাইন এবং থিমের সাথে সামঞ্জস্যপূর্ণ করতে পারেন। Color Scheme এবং Fonts কাস্টমাইজেশন করতে আপনাকে ChartOptions এ কিছু স্টাইলিং অপশন সেট করতে হবে।

1. Color Scheme কাস্টমাইজেশন (Changing Color Scheme)

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

Color Scheme কাস্টমাইজ করার উদাহরণ:

chartOptions = {
  colors: ['#FF5733', '#33FF57', '#3357FF', '#FF33A8']  // Custom Colors for each segment or bar
};

এখানে, colors অ্যারে ব্যবহার করা হয়েছে যেখানে প্রতিটি রঙ একটি নির্দিষ্ট চার্ট সেগমেন্ট বা বারের জন্য নির্ধারিত।

Pie Chart এর রঙ পরিবর্তন:

chartOptions = {
  title: 'My Daily Activities',
  pieHole: 0.4, // Doughnut style
  colors: ['#FF5733', '#33FF57', '#3357FF', '#FF33A8'] // Color Scheme
};

এখানে আমরা একটি Pie Chart তৈরি করেছি এবং তার সেগমেন্টের জন্য কাস্টম রঙ নির্ধারণ করেছি।

2. Fonts কাস্টমাইজেশন (Changing Fonts)

Fonts কাস্টমাইজেশনের মাধ্যমে আপনি টাইটেল, অক্ষের লেবেল এবং লেজেন্ডের ফন্ট পরিবর্তন করতে পারেন। এটি titleTextStyle, hAxis, vAxis, এবং legend অপশনগুলির মাধ্যমে করা হয়।

Font Size, Family, Color, Weight পরিবর্তন:

chartOptions = {
  title: 'Sales Data',
  titleTextStyle: {
    color: 'blue',      // Title text color
    fontSize: 18,       // Title font size
    fontName: 'Arial',  // Title font family
    bold: true,         // Title text weight
    italic: false       // Title text style
  },
  hAxis: {
    title: 'Months',
    titleTextStyle: {
      color: 'green',   // Axis title color
      fontSize: 14,     // Axis title font size
      fontName: 'Times New Roman', // Axis title font family
      italic: true      // Axis title style
    },
    textStyle: {
      color: 'black',   // Axis label color
      fontSize: 12,     // Axis label font size
      fontName: 'Verdana'  // Axis label font family
    }
  },
  vAxis: {
    title: 'Sales',
    titleTextStyle: {
      color: 'red',     // Axis title color
      fontSize: 14,     // Axis title font size
      fontName: 'Courier New', // Axis title font family
      italic: true      // Axis title style
    },
    textStyle: {
      color: 'black',   // Axis label color
      fontSize: 12,     // Axis label font size
      fontName: 'Georgia'  // Axis label font family
    }
  }
};

এখানে, titleTextStyle, hAxis, এবং vAxis এর মাধ্যমে চার্টের টাইটেল, অক্ষের টাইটেল এবং অক্ষের লেবেলগুলোর ফন্ট, আকার, রঙ ইত্যাদি কাস্টমাইজ করা হয়েছে।

3. Combination of Colors and Fonts

আপনি চাইলে colors এবং fonts কাস্টমাইজেশন একসাথে ব্যবহার করতে পারেন যাতে আপনার চার্টের প্রতিটি উপাদানকে সম্পূর্ণভাবে কাস্টমাইজ করা যায়। নিচে একটি উদাহরণ দেওয়া হলো:

chartOptions = {
  title: 'Company Performance',
  titleTextStyle: {
    color: 'darkblue',
    fontSize: 22,
    fontName: 'Comic Sans MS',
    bold: true
  },
  colors: ['#FF5733', '#33FF57', '#3357FF'],
  legend: {
    position: 'top',
    alignment: 'center',
    textStyle: {
      color: 'purple',
      fontSize: 14,
      fontName: 'Arial'
    }
  },
  hAxis: {
    title: 'Months',
    titleTextStyle: {
      color: 'green',
      fontSize: 16,
      fontName: 'Verdana'
    },
    textStyle: {
      color: 'black',
      fontSize: 12,
      fontName: 'Arial'
    }
  },
  vAxis: {
    title: 'Revenue',
    titleTextStyle: {
      color: 'red',
      fontSize: 16,
      fontName: 'Courier New'
    },
    textStyle: {
      color: 'black',
      fontSize: 12,
      fontName: 'Georgia'
    }
  }
};

এখানে, আমরা title, legend, hAxis, vAxis সবই কাস্টমাইজ করেছি যাতে চার্টের স্টাইল এবং লেআউট পুরোপুরি কাস্টমাইজড হয়।

4. Font Size and Font Style Adjustment Example

এছাড়াও, fontSize, fontName, এবং fontWeight কাস্টমাইজ করে আপনি যেকোনো ধরনের ফন্ট স্টাইলিং করতে পারেন।

chartOptions = {
  title: 'Product Sales',
  titleTextStyle: {
    color: 'darkblue',
    fontSize: 24, // Title font size
    fontName: 'Roboto', // Title font family
    bold: true // Title text weight
  },
  hAxis: {
    title: 'Year',
    titleTextStyle: {
      color: 'green',
      fontSize: 16,
      fontName: 'Arial'
    },
    textStyle: {
      color: 'black',
      fontSize: 12,
      fontName: 'Verdana'
    }
  }
};

এখানে, fontSize, fontName, fontWeight ইত্যাদি পরিবর্তন করে ফন্ট স্টাইলিং কাস্টমাইজ করা হয়েছে।

5. Custom Font Family for Legend, Axis Labels

আপনি legend, hAxis, এবং vAxis এর জন্য fontFamily সেট করতে পারেন, যা পুরো চার্টের ফন্ট স্টাইল পরিবর্তন করবে:

chartOptions = {
  legend: {
    position: 'top',
    textStyle: {
      fontSize: 16,
      fontName: 'Arial', // Set custom font family
      color: 'black' // Legend text color
    }
  },
  hAxis: {
    title: 'Months',
    titleTextStyle: {
      fontSize: 14,
      fontName: 'Times New Roman', // Custom font for hAxis
      color: 'blue'
    },
    textStyle: {
      fontSize: 12,
      fontName: 'Verdana', // Custom font for axis labels
      color: 'green'
    }
  }
};

সারাংশ

Google Charts API-তে Color Scheme এবং Fonts কাস্টমাইজেশন আপনাকে চার্টের ভিজুয়াল প্রেজেন্টেশন সম্পূর্ণভাবে নিয়ন্ত্রণ করতে সহায়তা করে। আপনি চার্টের title, legend, axis labels, tooltip, এবং অন্যান্য উপাদানের রঙ, ফন্ট, আকার ইত্যাদি কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশনগুলি আপনার চার্টকে আরও ব্যবহারকারী-বান্ধব এবং অ্যাপ্লিকেশনের থিমের সাথে সামঞ্জস্যপূর্ণ করে তোলে।