Data Labels কাস্টমাইজ করা এবং Styling Options

Highcharts এ Data Labels হল ডেটা পয়েন্টের মান যা চার্টের উপরে বা চারপাশে প্রদর্শিত হয়। Data Labels কাস্টমাইজ করার মাধ্যমে আপনি আপনার চার্টকে আরও স্পষ্ট এবং তথ্যপূর্ণ করে তুলতে পারেন। এই পোস্টে, আমরা Data Labels কাস্টমাইজ এবং Styling Options সম্পর্কে বিস্তারিত আলোচনা করব।

Data Labels কী?

Data Labels হল টেক্সট ট্যাগ যা চার্টের প্রতিটি ডেটা পয়েন্টের মান বা তথ্য প্রদর্শন করে। এটি ব্যবহারকারীদের জন্য ডেটা আরও স্পষ্ট করে তোলে এবং চার্টে প্রদর্শিত ডেটার সাথে সম্পর্কিত মান সরাসরি দেখায়।

Highcharts এ Data Labels সাধারণত series কনফিগারেশনের মধ্যে dataLabels প্রপার্টি ব্যবহার করে কাস্টমাইজ করা হয়।

Data Labels কাস্টমাইজ করা

Data Labels সক্রিয় করা

Data Labels সক্রিয় করতে enabled প্রপার্টি ব্যবহার করতে হয়।

series: [{
    name: 'Sales',
    data: [100, 200, 300, 400, 500],
    dataLabels: {
        enabled: true  // Data Labels সক্রিয় করা
    }
}]

এখানে, enabled: true দ্বারা Data Labels সক্রিয় করা হয়েছে। এর ফলে প্রতিটি ডেটা পয়েন্টের উপর তার মান প্রদর্শিত হবে।

Data Labels এর অবস্থান পরিবর্তন

আপনি dataLabels এর align, verticalAlign, এবং x, y প্রপার্টি ব্যবহার করে Data Labels এর অবস্থান কাস্টমাইজ করতে পারেন। এটি বিশেষত তখন ব্যবহারী হয় যখন আপনি Data Labelsকে উপরের, নিচের, বা মধ্যস্থানে স্থানান্তর করতে চান।

series: [{
    name: 'Sales',
    data: [100, 200, 300, 400, 500],
    dataLabels: {
        enabled: true,
        align: 'center',  // Data Labelsকে কেন্দ্রীয়ভাবে স্থাপন করা
        verticalAlign: 'bottom',  // Data Labels নিচে অবস্থান করবে
        x: 0,  // X-Axis এ কোনো হরাইজেন্টাল শিফট করা হয়নি
        y: -10  // Y-Axis এ কিছুটা উপরে শিফট করা হয়েছে
    }
}]

এখানে:

• align: Data Labelsকে অনুভূমিকভাবে কেন্দ্রীয় করা হয়েছে।
• verticalAlign: Data Labelsকে উল্লম্বভাবে নিচে স্থানান্তরিত করা হয়েছে।
• x এবং y: Data Labels এর সঠিক অবস্থান নির্ধারণ করার জন্য ব্যবহৃত হয়।

Data Labels Format কাস্টমাইজ করা

Highcharts এ Data Labels Format কাস্টমাইজ করতে format প্রপার্টি ব্যবহার করা হয়, যেখানে আপনি টেমপ্লেট ব্যবহার করে ডেটা প্রদর্শন করতে পারেন।

series: [{
    name: 'Sales',
    data: [100, 200, 300, 400, 500],
    dataLabels: {
        enabled: true,
        format: '{y} units'  // প্রতিটি ডেটা পয়েন্টের মানের সাথে 'units' যোগ করা হবে
    }
}]

এখানে, format প্রপার্টির মাধ্যমে আমরা {y} (Y-অক্ষের মান) এর সাথে 'units' শব্দটি যোগ করেছি, যাতে Data Labelsটি এই আকারে প্রদর্শিত হয়: "100 units", "200 units" ইত্যাদি।

Data Labels Styling Options

Highcharts এ Data Labels Styling এর জন্য বেশ কিছু অপশন রয়েছে, যার মাধ্যমে আপনি Data Labels এর ফন্ট, আকার, রঙ এবং অন্যান্য শৈলী কাস্টমাইজ করতে পারেন। নিচে কিছু সাধারণ স্টাইলিং অপশন দেওয়া হল:

Font Style (ফন্ট শৈলী)

series: [{
    name: 'Sales',
    data: [100, 200, 300, 400, 500],
    dataLabels: {
        enabled: true,
        style: {
            fontSize: '14px',  // ফন্ট আকার
            fontWeight: 'bold',  // ফন্টের প্রস্থ
            fontFamily: 'Arial, sans-serif',  // ফন্টের পরিবার
            color: '#FF5733'  // ফন্টের রঙ
        }
    }
}]

এখানে:

• fontSize: Data Labels এর ফন্ট আকার পরিবর্তন করা হয়েছে।
• fontWeight: ফন্টকে bold করা হয়েছে।
• fontFamily: Arial ফন্ট ব্যবহার করা হয়েছে।
• color: ফন্টের রঙ #FF5733 (একমাত্র উজ্জ্বল রঙ) সেট করা হয়েছে।

Background এবং Border Style (ব্যাকগ্রাউন্ড এবং বর্ডার শৈলী)

series: [{
    name: 'Sales',
    data: [100, 200, 300, 400, 500],
    dataLabels: {
        enabled: true,
        style: {
            fontSize: '14px',
            fontWeight: 'bold',
            color: '#FFFFFF'
        },
        backgroundColor: '#FF5733',  // ব্যাকগ্রাউন্ড রঙ
        borderColor: '#FF0000',  // বর্ডার রঙ
        borderRadius: 5,  // বর্ডারের কোণ গুলিকে গোলাকার করা হয়েছে
        padding: 5  // Data Labels এর চারপাশে কিছু জায়গা দেওয়া হয়েছে
    }
}]

এখানে:

• backgroundColor: Data Labels এর ব্যাকগ্রাউন্ডের জন্য একটি রঙ (orange) ব্যবহার করা হয়েছে।
• borderColor: Data Labels এর চারপাশে লাল বর্ডার ব্যবহার করা হয়েছে।
• borderRadius: Data Labels এর বর্ডারটি গোলাকার করা হয়েছে।
• padding: Data Labels এর চারপাশে কিছু প্যাডিং (জায়গা) যোগ করা হয়েছে।

Data Labels এর Visibility কাস্টমাইজ করা

Highcharts এ Data Labels Visibility কাস্টমাইজ করতে formatter প্রপার্টি ব্যবহার করা যেতে পারে। এর মাধ্যমে আপনি ডেটা পয়েন্টের মানের উপর ভিত্তি করে Data Labels দেখানো বা скрыত করতে পারেন।

series: [{
    name: 'Sales',
    data: [100, 200, 300, 400, 500],
    dataLabels: {
        enabled: true,
        formatter: function() {
            if (this.y > 200) {
                return this.y;  // ২০০ এর বেশি মানের জন্য Data Labels প্রদর্শিত হবে
            } else {
                return null;  // ২০০ এর কম মানের জন্য Data Labels প্রদর্শিত হবে না
            }
        }
    }
}]

এখানে, formatter ব্যবহার করে আমরা সেট করেছি যে, যদি ডেটা পয়েন্টের মান ২০০ এর বেশি হয়, তাহলে Data Labels প্রদর্শিত হবে, অন্যথায় তা গোপন থাকবে।

উপসংহার

Highcharts এ Data Labels কাস্টমাইজেশন এবং Styling Options ব্যবহার করে আপনি আপনার চার্টের তথ্যকে আরও স্পষ্ট এবং প্রভাবশালী করতে পারেন। Data Labels এর অবস্থান, শৈলী, এবং প্রদর্শনের ফরম্যাট কাস্টমাইজ করার মাধ্যমে, আপনি চার্টে ডেটার উপস্থাপনকে আরও সুন্দর এবং তথ্যপূর্ণ করে তুলতে পারেন।