Highcharts এর Color Palette এবং Fonts কাস্টমাইজ করা

Highcharts এর Color Palette এবং Fonts কাস্টমাইজ করার মাধ্যমে আপনি আপনার চার্টের দৃশ্যমানতা এবং ইউজার এক্সপেরিয়েন্স (UX) উন্নত করতে পারেন। Highcharts-এ বিভিন্ন রঙ এবং ফন্টের মাধ্যমে চার্টের ডিজাইন সম্পূর্ণ কাস্টমাইজ করা সম্ভব, যা আপনার ওয়েব অ্যাপ্লিকেশন বা ড্যাশবোর্ডের জন্য আরো আকর্ষণীয় এবং ইউজার-ফ্রেন্ডলি করে তোলে।

এখানে আমরা আলোচনা করব কিভাবে Highcharts-এ Color Palette এবং Fonts কাস্টমাইজ করা যায়।

১. Highcharts Color Palette কাস্টমাইজ করা

Highcharts-এ ডিফল্টভাবে কিছু প্রি-ডিফাইনড রঙ রয়েছে, কিন্তু আপনি চাইলে আপনার চার্টের জন্য নিজস্ব রঙের প্যালেট ব্যবহার করতে পারেন। colors কনফিগারেশন ব্যবহার করে আপনি সিরিজের রঙ কাস্টমাইজ করতে পারবেন।

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

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Sales by Product'
    },
    colors: ['#FF5733', '#33FF57', '#3357FF'],  // কাস্টম রঙের প্যালেট
    xAxis: {
        categories: ['Product A', 'Product B', 'Product C']
    },
    yAxis: {
        title: {
            text: 'Sales (in USD)'
        }
    },
    series: [{
        name: '2023 Sales',
        data: [500, 700, 400]
    }, {
        name: '2024 Sales',
        data: [600, 800, 550]
    }]
});

এখানে colors প্রোপার্টি ব্যবহার করে তিনটি কাস্টম রঙ প্রদান করা হয়েছে। আপনি আপনার চার্টের সিরিজের জন্য আলাদা আলাদা রঙ নির্ধারণ করতে পারেন।

Color Gradient ব্যবহার করা

আপনি রঙের গ্রেডিয়েন্টও ব্যবহার করতে পারেন, যা একাধিক রঙের সমন্বয়ে একটি প্রাকৃতিক পরিবর্তন তৈরি করে।

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Revenue Comparison'
    },
    plotOptions: {
        series: {
            color: {
                linearGradient: {
                    x1: 0, y1: 0,
                    x2: 1, y2: 0
                },
                stops: [
                    [0, '#FF5733'],  // বামপাশে রঙ
                    [1, '#33FF57']   // ডানপাশে রঙ
                ]
            }
        }
    },
    series: [{
        name: 'Revenue',
        data: [100, 150, 200]
    }]
});

এখানে, linearGradient ব্যবহার করে দুইটি রঙের গ্রেডিয়েন্ট তৈরি করা হয়েছে।

২. Highcharts এর Fonts কাস্টমাইজ করা

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

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

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Stock Price Over Time',
        style: {
            fontFamily: 'Arial, sans-serif',  // শিরোনামের ফন্ট
            fontSize: '20px',
            fontWeight: 'bold',
            color: '#333333'
        }
    },
    subtitle: {
        text: '2024 Data',
        style: {
            fontFamily: 'Verdana, sans-serif',  // সাবটাইটেলের ফন্ট
            fontSize: '16px',
            fontWeight: 'normal',
            color: '#777777'
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        labels: {
            style: {
                fontFamily: 'Tahoma, sans-serif',  // x-axis লেবেল ফন্ট
                fontSize: '12px',
                color: '#555555'
            }
        }
    },
    yAxis: {
        title: {
            text: 'Stock Price (in USD)',
            style: {
                fontFamily: 'Courier New, monospace',  // y-axis শিরোনাম ফন্ট
                fontSize: '14px',
                color: '#333333'
            }
        }
    },
    series: [{
        name: 'Stock A',
        data: [120, 130, 140, 150, 160]
    }]
});

এখানে, style প্রোপার্টি ব্যবহার করে শিরোনাম, সাবটাইটেল, x-axis এবং y-axis লেবেলসহ বিভিন্ন টেক্সটের ফন্ট কাস্টমাইজ করা হয়েছে। আপনি fontFamily, fontSize, fontWeight, এবং color এর মান পরিবর্তন করে ফন্টের স্টাইল নির্ধারণ করতে পারবেন।

৩. Global Font Settings

Highcharts-এ আপনি পুরো চার্টের জন্য একটি সাধারণ ফন্ট সেটিংসও কাস্টমাইজ করতে পারেন। Highcharts.setOptions ব্যবহার করে সমস্ত ফন্ট সেটিংস গ্লোবালি কাস্টমাইজ করা যায়।

Highcharts.setOptions({
    chart: {
        style: {
            fontFamily: 'Arial, sans-serif'  // পুরো চার্টের জন্য ফন্ট নির্ধারণ
        }
    },
    title: {
        style: {
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#2f7ed8'
        }
    }
});

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Sales Performance'
    },
    xAxis: {
        categories: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        title: {
            text: 'Units Sold'
        }
    },
    series: [{
        name: 'Product A',
        data: [10, 20, 30, 40]
    }]
});

এখানে, Highcharts.setOptions ব্যবহার করে পুরো চার্টের জন্য একটি ইউনিফর্ম ফন্ট ফ্যামিলি সেট করা হয়েছে।

সারাংশ

Highcharts এ Color Palette এবং Fonts কাস্টমাইজ করা খুবই সহজ এবং এটি আপনার চার্টের ডিজাইনকে আপনার ওয়েব অ্যাপ্লিকেশনের সাথে সঙ্গতিপূর্ণ করে তোলে। আপনি colors প্রোপার্টি দিয়ে রঙের প্যালেট কাস্টমাইজ করতে পারেন, এবং style প্রোপার্টি ব্যবহার করে ফন্ট এবং টেক্সটের স্টাইল কাস্টমাইজ করতে পারেন। গ্লোবাল ফন্ট সেটিংসও ব্যবহার করে পুরো চার্টে একক ফন্ট স্টাইল প্রয়োগ করা সম্ভব।