Color এবং Font কাস্টমাইজেশন

Highcharts একটি অত্যন্ত কাস্টমাইজেবল লাইব্রেরি, যা আপনাকে চার্টের বিভিন্ন অংশ যেমন রঙ (Color), ফন্ট (Font), এবং অন্যান্য স্টাইলিং সেটিংস কাস্টমাইজ করতে সাহায্য করে। GWT (Google Web Toolkit) এর মাধ্যমে Highcharts এর এই কাস্টমাইজেশন সম্ভব। এখানে আমরা আলোচনা করব কিভাবে GWT অ্যাপ্লিকেশনে Highcharts এর রঙ এবং ফন্ট কাস্টমাইজ করা যায়।

১. Highcharts Color কাস্টমাইজেশন

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

১.১. লাইন চার্টের রঙ কাস্টমাইজ করা

Highcharts এর মধ্যে লাইন চার্টের রঙ পরিবর্তন করতে আপনি plotOptions ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

package com.mycompany.myproject.client;

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;

public class HighchartsIntegration {

    public static native void createChart(String containerId, JsArray<Data> data) /*-{
        $wnd.Highcharts.chart(containerId, {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Customized Line Chart'
            },
            plotOptions: {
                line: {
                    color: '#FF5733'  // Line color set to orange-red
                }
            },
            series: [{
                data: data
            }]
        });
    }-*/;

    public static class Data extends JavaScriptObject {
        protected Data() {}

        public final native int getX() /*-{
            return this.x;
        }-*/;

        public final native int getY() /*-{
            return this.y;
        }-*/;
    }
}

এখানে plotOptions.line.color সেটিংটি লাইন চার্টের রঙ orange-red (#FF5733) এ পরিবর্তন করেছে।

১.২. বার চার্টের রঙ কাস্টমাইজ করা

এভাবে বার চার্টের রঙও কাস্টমাইজ করা যায়:

$wnd.Highcharts.chart('chart-container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Customized Bar Chart'
    },
    plotOptions: {
        column: {
            color: '#4CAF50'  // Column color set to green
        }
    },
    series: [{
        data: [1, 2, 3, 4, 5]
    }]
});

এখানে color সেটিংটি বার চার্টের কলামের রঙ পরিবর্তন করেছে।

১.৩. ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা

চার্টের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করতে chart.backgroundColor ব্যবহার করা হয়। উদাহরণস্বরূপ:

$wnd.Highcharts.chart('chart-container', {
    chart: {
        type: 'pie',
        backgroundColor: '#f4f4f4'  // Background color set to light grey
    },
    title: {
        text: 'Customized Pie Chart'
    },
    series: [{
        data: [{
            name: 'A',
            y: 10
        }, {
            name: 'B',
            y: 20
        }]
    }]
});

এখানে backgroundColor প্রপার্টি ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করেছে।

২. Highcharts Font কাস্টমাইজেশন

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

২.১. টাইটেল ফন্ট কাস্টমাইজ করা

Highcharts এর টাইটেলের ফন্ট কাস্টমাইজ করার জন্য title.style ব্যবহার করা হয়। উদাহরণস্বরূপ:

$wnd.Highcharts.chart('chart-container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Customized Title Font',
        style: {
            fontFamily: 'Arial, sans-serif',
            fontSize: '18px',
            fontWeight: 'bold',
            color: '#2b2b2b'  // Title font color
        }
    },
    series: [{
        data: [1, 2, 3, 4, 5]
    }]
});

এখানে title.style প্রপার্টি দিয়ে টাইটেলের ফন্ট ফ্যামিলি, সাইজ, ওয়েট এবং রঙ কাস্টমাইজ করা হয়েছে।

২.২. অ্যাক্সিস লেবেল ফন্ট কাস্টমাইজ করা

অ্যাক্সিসের লেবেল ফন্ট কাস্টমাইজ করতে xAxis.labels.style এবং yAxis.labels.style ব্যবহার করা হয়। উদাহরণ:

$wnd.Highcharts.chart('chart-container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Customized Axis Font'
    },
    xAxis: {
        labels: {
            style: {
                fontFamily: 'Courier New, Courier, monospace',
                fontSize: '14px',
                color: '#333'
            }
        }
    },
    yAxis: {
        labels: {
            style: {
                fontFamily: 'Courier New, Courier, monospace',
                fontSize: '14px',
                color: '#333'
            }
        }
    },
    series: [{
        data: [10, 20, 30, 40]
    }]
});

এখানে xAxis.labels.style এবং yAxis.labels.style প্রপার্টির মাধ্যমে X এবং Y অ্যাক্সিসের লেবেল ফন্ট কাস্টমাইজ করা হয়েছে।

২.৩. ডেটা পয়েন্টের ফন্ট কাস্টমাইজ করা

ডেটা পয়েন্টের ফন্ট কাস্টমাইজ করতে dataLabels.style ব্যবহার করা হয়:

$wnd.Highcharts.chart('chart-container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Customized Data Label Font'
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                style: {
                    fontFamily: 'Verdana, sans-serif',
                    fontSize: '12px',
                    fontWeight: 'bold',
                    color: '#ff6600'  // Data label font color
                }
            }
        }
    },
    series: [{
        data: [{
            name: 'A',
            y: 10
        }, {
            name: 'B',
            y: 20
        }]
    }]
});

এখানে dataLabels.style ব্যবহার করে ডেটা লেবেলের ফন্ট কাস্টমাইজ করা হয়েছে।

সারাংশ

GWT এবং Highcharts এর মধ্যে Color এবং Font কাস্টমাইজেশন খুবই সহজ এবং শক্তিশালী। আপনি GWT এর মাধ্যমে Highcharts-এর বিভিন্ন অংশ যেমন লাইন, বার, পয়েন্ট, টাইটেল, অ্যাক্সিস, এবং ডেটা লেবেলগুলোর রঙ ও ফন্ট কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশন প্রপার্টি গুলি Highcharts এর style এবং color প্যারামিটার ব্যবহার করে করা যায়, যা আপনার চার্টকে আরও আকর্ষণীয় এবং ইউজার ফ্রেন্ডলি করে তোলে।