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

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

Tooltips কাস্টমাইজ করা

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

Tooltips কাস্টমাইজ করার উপায়

Tooltip এর ফরম্যাট কাস্টমাইজ করা

tooltip: {
    pointFormat: '<b>{point.y}</b> ইউনিট',  // টুলটিপের ভিতরে প্রদর্শিত তথ্য
    shared: true,  // একাধিক সিরিজের ডেটার জন্য শেয়ার্ড টুলটিপ
    valueSuffix: ' টাকার মধ্যে',  // মানের সাথে একটি সাফিক্স যুক্ত করা
    headerFormat: '<span style="font-size: 10px">{point.key}</span><br>',  // হেডারে ডেটার সূচনা
    backgroundColor: '#f7f7f7',  // টুলটিপের ব্যাকগ্রাউন্ড রঙ
    borderColor: '#ccc',  // টুলটিপের সীমানার রঙ
    borderRadius: 5,  // টুলটিপের সীমানার কোণার রেডিয়াস
    borderWidth: 1  // সীমানার প্রস্থ
}

এখানে:

• pointFormat ব্যবহার করে আপনি টুলটিপে কিভাবে ডেটা প্রদর্শিত হবে তা নির্ধারণ করতে পারেন।
• shared অপশনটি ব্যবহার করলে একাধিক সিরিজের জন্য একটি যৌথ টুলটিপ প্রদর্শিত হবে।
• valueSuffix এবং headerFormat এর মাধ্যমে মানের শেষে বা হেডারে অতিরিক্ত তথ্য যোগ করা যায়।
• backgroundColor, borderColor ইত্যাদি দিয়ে টুলটিপের স্টাইল কাস্টমাইজ করা হয়েছে।

Tooltip এর অবস্থান কাস্টমাইজ করা

tooltip: {
    positioner: function (width, height, point) {
        return { x: point.plotX + 20, y: point.plotY - 20 };  // টুলটিপের অবস্থান পরিবর্তন
    }
}

এখানে, positioner ফাংশন ব্যবহার করে টুলটিপের অবস্থান কাস্টমাইজ করা হয়েছে। আপনি টুলটিপটি ডেটা পয়েন্টের কাছাকাছি অথবা অন্য কোথাও অবস্থান করতে পারেন।

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

Data Labels হল সরাসরি চার্টের ডেটা পয়েন্টের উপর প্রদর্শিত টেক্সট। Data Labels এর মাধ্যমে আপনি ডেটা পয়েন্টের মান সরাসরি চার্টে দেখাতে পারেন। Highcharts এ, আপনি Data Labels কাস্টমাইজ করতে পারেন, যেমন ফন্ট সাইজ, রঙ, অবস্থান ইত্যাদি।

Data Labels কাস্টমাইজ করার উপায়

Data Labels এর সাধারণ কাস্টমাইজেশন

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,  // Data Labels সক্রিয় করা
            format: '{y} ইউনিট',  // ডেটা লেবেলে মানের সাথে কাস্টমাইজড ফরম্যাট
            style: {
                fontSize: '14px',  // ফন্ট সাইজ কাস্টমাইজ করা
                color: '#FF5733',  // ফন্ট রঙ
                fontWeight: 'bold'  // ফন্টের ওজন
            }
        }
    }
}

এখানে, dataLabels সক্রিয় করা হয়েছে এবং format এর মাধ্যমে ডেটা লেবেল কাস্টমাইজ করা হয়েছে।

Data Labels এর অবস্থান কাস্টমাইজ করা

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,  // Data Labels সক্রিয় করা
            align: 'center',  // লেবেলকে কেন্দ্রে স্থাপন করা
            verticalAlign: 'middle',  // লেবেলকে ভার্টিকালি মাঝখানে স্থাপন করা
            y: -10  // Data Label এর অবস্থান সামান্য উপরে নিয়ে যাওয়া
        }
    }
}

এখানে, align এবং verticalAlign ব্যবহার করে আপনি Data Labels এর অবস্থান কাস্টমাইজ করতে পারবেন। y ব্যবহার করে লেবেলটির স্থান সামান্য পরিবর্তন করা হয়েছে।

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

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,  // Data Labels সক্রিয় করা
            style: {
                color: '#000',  // রঙ পরিবর্তন করা
                fontWeight: 'bold',  // ফন্টের স্টাইল পরিবর্তন করা
                fontSize: '16px'  // ফন্ট সাইজ বড় করা
            }
        }
    }
}

এখানে, style অপশন ব্যবহার করে Data Labels এর ফন্ট সাইজ, রঙ এবং ওয়েট কাস্টমাইজ করা হয়েছে।

উপসংহার

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

Tooltip হলো Highcharts এর একটি গুরুত্বপূর্ণ ফিচার যা চার্টের বিভিন্ন ডেটা পয়েন্টে মাউস পয়েন্টার রাখলে ঐ পয়েন্ট সম্পর্কে তথ্য প্রদর্শন করে। Tooltip ব্যবহারকারীর জন্য ডেটাকে আরও পাঠযোগ্য এবং স্পষ্ট করে তোলে। Highcharts এ tooltip কাস্টমাইজেশন বিভিন্ন উপায়ে করা যায়, যেমন টুলটিপের ফরম্যাট, পজিশন, এবং স্টাইল কাস্টমাইজ করা।

Tooltip এর জন্য Basic Configurations

Highcharts এ tooltip কনফিগারেশন সাধারণত tooltip অপশন দ্বারা করা হয়। নিচে tooltip এর কিছু সাধারণ কনফিগারেশন অপশন এবং তাদের ব্যাখ্যা দেওয়া হলো।

1. Default Tooltip

Highcharts এ ডিফল্টভাবে tooltip একটি বেসিক ডেটা পয়েন্টের মান প্রদর্শন করে, যেমন সিরিজের নাম এবং মান।

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Over Time'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Sales'
        }
    },
    series: [{
        name: 'Product A',
        data: [5, 10, 15, 20, 25]
    }],
    tooltip: {
        shared: true  // ডিফল্ট টুলটিপ সবার জন্য
    }
});

এখানে, shared: true অপশনটি ব্যবহার করা হয়েছে, যার মাধ্যমে যদি একাধিক সিরিজ থাকে, তবে একযোগভাবে টুলটিপ প্রদর্শিত হবে।

2. Tooltip Format

Highcharts এ tooltip কাস্টমাইজ করা যায় formatter ফাংশন ব্যবহার করে। এতে আপনি টুলটিপে যে তথ্য প্রদর্শন করবেন তা নির্ধারণ করতে পারবেন।

tooltip: {
    formatter: function () {
        return 'মাস: ' + this.x + '<br>' + 
               'বিক্রয়: ' + this.y;
    }
}

এখানে, this.x হল X-অক্ষের মান এবং this.y হল Y-অক্ষের মান, যা টুলটিপে প্রদর্শিত হবে। আপনি এই ফরম্যাটে আপনার কাস্টম তথ্যও যোগ করতে পারেন।

3. Tooltip Style Customization

আপনি tooltip এর স্টাইল কাস্টমাইজ করতে পারেন, যেমন ফন্ট, ব্যাকগ্রাউন্ড কালার, এবং বর্ডার ইত্যাদি।

tooltip: {
    backgroundColor: '#FCFFC5',  // টুলটিপের ব্যাকগ্রাউন্ড কালার
    borderColor: '#FF0000',  // টুলটিপের বর্ডার কালার
    borderRadius: 10,  // টুলটিপের কোণার রেডিয়াস
    borderWidth: 2,  // টুলটিপের বর্ডার প্রস্থ
    style: {
        color: '#000',  // টুলটিপের লেখার রঙ
        fontSize: '16px',  // টুলটিপের ফন্ট সাইজ
        fontFamily: 'Arial, sans-serif'  // টুলটিপের ফন্ট ফ্যামিলি
    }
}

এখানে, backgroundColor, borderColor, এবং style এর মাধ্যমে টুলটিপের ভিজুয়াল স্টাইল কাস্টমাইজ করা হয়েছে।

4. Value Prefix and Suffix

আপনি টুলটিপে মানের আগে এবং পরে কোন প্রিফিক্স (prefix) এবং সাফিক্স (suffix) যোগ করতে পারেন।

tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b> ইউনিট'
}

এখানে, {series.name} সিরিজের নাম এবং {point.y} হল ডেটা পয়েন্টের মান। এর মাধ্যমে টুলটিপে আরো বিস্তারিত তথ্য প্রদর্শিত হবে।

5. Positioning the Tooltip

Highcharts এ tooltip এর পজিশন কাস্টমাইজ করা যায়। আপনি tooltip কে নির্দিষ্ট কোঅর্ডিনেট বা এক্স এবং ওয়াই অক্ষের উপর ভিত্তি করে পজিশন দিতে পারেন।

tooltip: {
    positioner: function (width, height, point) {
        return {
            x: point.plotX + 10,  // X পজিশন
            y: point.plotY - 30   // Y পজিশন
        };
    }
}

এখানে, positioner ফাংশন ব্যবহার করে tooltip এর পজিশন কাস্টমাইজ করা হয়েছে, যেখানে point.plotX এবং point.plotY পয়েন্টের অবস্থান অনুযায়ী টুলটিপের অবস্থান নির্ধারণ করা হয়।

6. Crosshairs in Tooltip

আপনি tooltip এর সাথে crosshair যোগ করতে পারেন, যা ব্যবহারকারীকে ডেটা পয়েন্টের উপর টুলটিপের মাধ্যমে নির্দেশনা দেয়।

tooltip: {
    crosshairs: true  // ক্রসহেয়ার ব্যবহার করা হচ্ছে
}

এটি X এবং Y অক্ষের উপর ক্রস লাইন প্রদর্শন করবে, যা টুলটিপের সাহায্যে ডেটার অবস্থান স্পষ্ট করে তুলবে।

উপসংহার

Highcharts এ Tooltip কাস্টমাইজেশন চার্টের ব্যবহারকারী অভিজ্ঞতাকে আরও উন্নত করতে সাহায্য করে। আপনি tooltip এর ফরম্যাট, স্টাইল, পজিশনিং, ক্রসহেয়ার, এবং value prefix/suffix কাস্টমাইজ করে আপনার চার্টকে আরও তথ্যপূর্ণ এবং আকর্ষণীয় করে তুলতে পারেন। Highcharts এর শক্তিশালী tooltip কাস্টমাইজেশন অপশনগুলি আপনাকে আপনার ডেটা ভিজুয়ালাইজেশনকে আরও প্রফেশনাল এবং পাঠযোগ্য করতে সাহায্য করবে।

Tooltip হলো এমন একটি ইন্টারঅ্যাকটিভ বৈশিষ্ট্য, যা গ্রাফের উপর মাউস নিয়ে গেলে সংশ্লিষ্ট তথ্য দেখায়। Highcharts এ Custom Tooltip Template এবং Formatters ব্যবহার করে আপনি টুলটিপের কনটেন্ট এবং প্রদর্শন প্রক্রিয়া কাস্টমাইজ করতে পারেন। এতে ব্যবহারকারীরা ডেটার বিস্তারিত আরও সহজে বুঝতে পারে।

Custom Tooltip Template

Highcharts এ টুলটিপ কাস্টমাইজ করার জন্য আপনি tooltip.formatter ফাংশন ব্যবহার করতে পারেন, যা আপনাকে টুলটিপের কনটেন্টের জন্য কাস্টম টেমপ্লেট তৈরি করতে দেয়। আপনি টুলটিপে কোন তথ্য দেখাবেন, তা আপনার প্রয়োজন অনুযায়ী নির্ধারণ করতে পারেন।

Custom Tooltip Example

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'মাল্টিপল সিরিজের চার্ট'
    },
    tooltip: {
        useHTML: true, // HTML ব্যবহার করার জন্য
        formatter: function() {
            return '<b>' + this.series.name + '</b><br>' +
                   'মাস: ' + this.x + '<br>' + 
                   'মূল্য: ' + this.y;
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    series: [{
        name: 'বিক্রয়',
        data: [29, 71, 106, 129, 144]
    }, {
        name: 'বজার মূল্য',
        data: [10, 20, 30, 40, 50]
    }]
});

এখানে, tooltip.formatter ফাংশনটি ব্যবহার করে কাস্টম টুলটিপ তৈরি করা হয়েছে, যা series.name, x (মাস), এবং y (মূল্য) প্রদর্শন করে। useHTML: true এর মাধ্যমে HTML ট্যাগ ব্যবহার করা হয়েছে, যাতে আপনি কাস্টম স্টাইলও অ্যাপ্লাই করতে পারেন।

Tooltip Formatters

Formatter একটি ফাংশন যা ডেটার একটি নির্দিষ্ট পয়েন্টের জন্য টুলটিপের কনটেন্ট কাস্টমাইজ করার জন্য ব্যবহার করা হয়। Highcharts এ, tooltip.formatter একটি খুব শক্তিশালী টুল, যা আপনাকে ডেটা এবং অন্যান্য কনটেক্সটের উপর ভিত্তি করে টুলটিপ কনটেন্ট সম্পূর্ণভাবে কাস্টমাইজ করতে দেয়।

Tooltip Formatter Syntax

tooltip: {
    formatter: function() {
        // এখানে `this` ব্যবহার করতে পারেন টুলটিপের ডেটার অ্যাক্সেসের জন্য
        return '<b>' + this.series.name + '</b><br>' +
               'মাস: ' + this.x + '<br>' + 
               'মূল্য: ' + this.y;
    }
}

this শব্দটি একটি টুলটিপ ইভেন্টের কনটেক্সট প্রদান করে, যাতে আপনি টুলটিপের সব তথ্য (যেমন series.name, x, y, ইত্যাদি) অ্যাক্সেস করতে পারেন।

অন্যান্য Formatters

1. x এবং y ফরম্যাটিং: আপনি টুলটিপে সংখ্যা বা ডেটা ফরম্যাট করার জন্য JavaScript এর Intl.NumberFormat বা অন্যান্য ফরম্যাটিং ফাংশন ব্যবহার করতে পারেন।

   tooltip: {
       formatter: function() {
           return '<b>' + this.series.name + '</b><br>' +
                  'মাস: ' + this.x + '<br>' + 
                  'মূল্য: ' + new Intl.NumberFormat().format(this.y);
       }
   }
   

2. Date Formatting: যদি আপনার x-axis এ তারিখ থাকে, আপনি তা কাস্টম ফরম্যাটে প্রদর্শন করতে পারেন।

   tooltip: {
       formatter: function() {
           var date = Highcharts.dateFormat('%A, %b %d, %Y', this.x);  // তারিখ ফরম্যাট
           return '<b>' + this.series.name + '</b><br>' +
                  'তারিখ: ' + date + '<br>' + 
                  'মূল্য: ' + this.y;
       }
   }
   

এখানে Highcharts.dateFormat ব্যবহার করে x-অক্ষের মান (তারিখ) একটি কাস্টম ফরম্যাটে প্রদর্শিত হচ্ছে।

Tooltip Styles

Highcharts এ টুলটিপের স্টাইল কাস্টমাইজ করার জন্য আপনি CSS বা tooltip.style ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

Tooltip Style Example

tooltip: {
    style: {
        color: '#fff',        // টুলটিপের টেক্সটের রঙ
        backgroundColor: '#333', // টুলটিপের পটভূমির রঙ
        fontSize: '14px',      // ফন্ট সাইজ
        padding: '10px'        // প্যাডিং
    },
    formatter: function() {
        return '<b>' + this.series.name + '</b><br>' +
               'মাস: ' + this.x + '<br>' + 
               'মূল্য: ' + this.y;
    }
}

এখানে, tooltip.style প্রপার্টি ব্যবহার করে টুলটিপের টেক্সটের রঙ, পটভূমির রঙ, ফন্ট সাইজ এবং প্যাডিং কাস্টমাইজ করা হয়েছে।

উপসংহার

Highcharts এ Custom Tooltip Template এবং Formatters ব্যবহার করে আপনি টুলটিপের কনটেন্ট এবং উপস্থাপনাকে সম্পূর্ণ কাস্টমাইজ করতে পারেন। এটি ডেটার বিশদ বিশ্লেষণ এবং প্রদর্শন করতে সহায়ক, যেমন বিভিন্ন সিরিজ, তারিখ, অথবা বিশেষ সংখ্যার ফরম্যাটের কাস্টম উপস্থাপন। টুলটিপের মাধ্যমে ডেটা আরও ব্যবহারযোগ্য এবং পারস্পরিক সম্পর্ক বুঝতে সহায়ক হয়, যা চার্টের শক্তি আরও বাড়ায়।

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 এর অবস্থান, শৈলী, এবং প্রদর্শনের ফরম্যাট কাস্টমাইজ করার মাধ্যমে, আপনি চার্টে ডেটার উপস্থাপনকে আরও সুন্দর এবং তথ্যপূর্ণ করে তুলতে পারেন।

Highcharts এ Tooltip এবং Data Label হল দুটি অত্যন্ত গুরুত্বপূর্ণ উপাদান যা ডেটা ভিজুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং তথ্যপূর্ণ করে তোলে। আপনি Tooltip এবং Data Label এর মাধ্যমে আপনার চার্টে ব্যবহারকারীদের জন্য বিস্তারিত তথ্য এবং ব্যাখ্যা প্রদর্শন করতে পারেন। এখানে, আমরা এই দুটি উপাদানের জন্য কিছু Advanced Techniques নিয়ে আলোচনা করব, যা আপনার চার্টকে আরও কাস্টমাইজড এবং ইন্টারঅ্যাকটিভ করে তুলবে।

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

Tooltip হলো চার্টের একটি গুরুত্বপূর্ণ অংশ, যা ডেটার পয়েন্টের বিস্তারিত তথ্য প্রদর্শন করে যখন ব্যবহারকারী কোনো ডেটা পয়েন্টের উপর মাউস হোভার করেন। আপনি Tooltip এর মধ্যে অনেক কিছু কাস্টমাইজ করতে পারেন, যেমন ফরম্যাট, পজিশন, এবং কন্টেন্ট।

1. Tooltip Format কাস্টমাইজ করা

Highcharts এর tooltip.formatter ফাংশনের মাধ্যমে আপনি tooltip এর কন্টেন্ট কাস্টমাইজ করতে পারেন। আপনি এটি দিয়ে বিশেষ ফরম্যাটে ডেটা প্রদর্শন করতে পারবেন।

উদাহরণ: Custom Tooltip Format

tooltip: {
    formatter: function() {
        return '<b>' + this.series.name + '</b><br>' + 
               'Month: ' + this.x + '<br>' +
               'Sales: $' + this.y;
    }
}

এখানে, this.x হল X-Axis এর মান (যেমন মাস), এবং this.y হল Y-Axis এর মান (যেমন বিক্রয়)। this.series.name সিরিজের নাম প্রদর্শন করবে।

2. Tooltip Styling

আপনি tooltip এর শৈলীও কাস্টমাইজ করতে পারেন, যেমন ব্যাকগ্রাউন্ড রঙ, বর্ডার, ফন্ট সাইজ, এবং প্যাডিং।

উদাহরণ: Tooltip Styling

tooltip: {
    backgroundColor: 'rgba(0, 0, 0, 0.75)',  // ব্যাকগ্রাউন্ড রঙ
    style: {
        color: '#fff',  // টেক্সটের রঙ
        fontSize: '14px',  // ফন্ট সাইজ
        padding: '10px'  // প্যাডিং
    }
}

এখানে, tooltip এর ব্যাকগ্রাউন্ড কালার এবং টেক্সট স্টাইল কাস্টমাইজ করা হয়েছে।

3. Crosshairs ব্যবহার করা

Crosshairs ব্যবহার করে আপনি X এবং Y অক্ষের উপর একটি লাইনের মাধ্যমে ডেটা পয়েন্টের অবস্থান চিহ্নিত করতে পারেন। এটি ব্যবহারকারীদের জন্য আরও সঠিক ডেটা দেখানোর জন্য উপকারী।

উদাহরণ: Crosshairs ব্যবহার

tooltip: {
    crosshairs: true  // ক্রসহেয়ার সক্রিয়
}

এখানে, crosshairs সক্রিয় করা হয়েছে, যার ফলে ডেটা পয়েন্টের উপর মাউস হোভার করলে X এবং Y অক্ষের উপর একটি ক্রসহেয়ার দেখা যাবে।

4. Sticky Tooltip

আপনি যদি চান যে tooltip ব্যবহারকারীর মাউস মুভমেন্টের সাথে সাথে প্রদর্শিত হোক, তবে stickyTracking ফাংশন ব্যবহার করতে পারেন।

উদাহরণ: Sticky Tooltip

tooltip: {
    stickyTracking: true  // টুলটিপ মাউস ট্র্যাকিং অনুসরণ করবে
}

এখানে, stickyTracking সক্রিয় করা হয়েছে, যার ফলে tooltip ব্যবহারকারীর মাউসের অবস্থান অনুসরণ করবে।

Data Labels কাস্টমাইজেশন

Data Labels হল সেই লেবেলগুলি যা চার্টের ডেটা পয়েন্টগুলির উপর বা কাছাকাছি প্রদর্শিত হয়। আপনি Data Labels এর মাধ্যমে প্রতিটি ডেটা পয়েন্টের মান প্রদর্শন করতে পারেন এবং এগুলোর অবস্থান ও শৈলী কাস্টমাইজ করতে পারেন।

1. Data Label Formatter

Highcharts এ dataLabels.formatter ফাংশন ব্যবহার করে আপনি কাস্টম ফরম্যাটে ডেটা লেবেল প্রদর্শন করতে পারেন।

উদাহরণ: Custom Data Label Formatter

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            formatter: function() {
                return 'Value: ' + this.y;  // Y মান প্রদর্শন করবে
            }
        }
    }
}

এখানে, this.y দ্বারা Y-Axis এর মান প্রদর্শন করা হয়েছে, যা প্রতিটি ডেটা পয়েন্টের মানকে কাস্টম টেক্সট সহ প্রদর্শন করবে।

2. Data Label Styling

আপনি dataLabels এর শৈলী কাস্টমাইজ করতে পারেন, যেমন ফন্ট, রঙ, এবং অবস্থান।

উদাহরণ: Data Label Styling

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',  // ফন্টের ওজন
                color: '#FF0000',    // ফন্টের রঙ
                fontSize: '14px'     // ফন্ট সাইজ
            }
        }
    }
}

এখানে, dataLabels এর ফন্টের শৈলী কাস্টমাইজ করা হয়েছে।

3. Data Label Positioning

Data Labels এর অবস্থান কাস্টমাইজ করতে align, verticalAlign, এবং x, y প্রপার্টি ব্যবহার করা যায়।

উদাহরণ: Data Label Positioning

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            verticalAlign: 'top',  // লেবেলটি ডেটা পয়েন্টের উপরে থাকবে
            align: 'center',       // লেবেলটি সেন্টার আলাইন হবে
            y: -10                 // কিছুটা উপরে সেট করা হয়েছে
        }
    }
}

এখানে, verticalAlign এবং align ব্যবহার করে লেবেলের অবস্থান কাস্টমাইজ করা হয়েছে, এবং y দ্বারা লেবেলটি কিছুটা উপরে স্থানান্তরিত করা হয়েছে।

4. Data Label Background

Data Labels এর জন্য আপনি backgroundColor, borderWidth, এবং borderColor ব্যবহার করে একটি পটভূমি এবং বর্ডার যোগ করতে পারেন।

উদাহরণ: Data Label Background

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            backgroundColor: 'rgba(255, 255, 255, 0.7)',  // লেবেলের ব্যাকগ্রাউন্ড
            borderWidth: 1,                                 // বর্ডারের প্রস্থ
            borderColor: '#000'                             // বর্ডারের রঙ
        }
    }
}

এখানে, backgroundColor এবং borderColor দিয়ে ডেটা লেবেলের জন্য একটি পটভূমি এবং বর্ডার সেট করা হয়েছে।

উপসংহার

Highcharts এ Tooltip এবং Data Labels কাস্টমাইজ করার মাধ্যমে আপনি আপনার চার্টকে আরও ইন্টারঅ্যাকটিভ এবং তথ্যপূর্ণ করতে পারেন। Tooltip এর মাধ্যমে আপনি ডেটার বিস্তারিত তথ্য প্রদর্শন করতে পারেন, এবং Data Labels এর মাধ্যমে ডেটা পয়েন্টের মান সরাসরি প্রদর্শন করতে পারেন। উভয় উপাদানের শৈলী, অবস্থান, এবং কন্টেন্ট কাস্টমাইজেশন আপনার চার্টের পঠনযোগ্যতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করবে।