Radar Chart এর Styling এবং Labels কাস্টমাইজ করা

Radar Chart একটি বিশেষ ধরনের চার্ট যা বিভিন্ন ভেরিয়েবলের মধ্যে তুলনা করতে সাহায্য করে। এটি একটি কেন্দ্রীয় পয়েন্ট থেকে রেডিয়াল আকারে ডেটা প্রদর্শন করে। Chart.js এর মাধ্যমে Radar Chart কাস্টমাইজ করার জন্য আপনি স্টাইল এবং লেবেলস (Labels) কাস্টমাইজ করতে পারবেন। নিচে Radar Chart এর স্টাইলিং এবং লেবেল কাস্টমাইজ করার বিস্তারিত তথ্য দেয়া হলো।

Radar Chart তৈরি করা

প্রথমে একটি সাধারণ Radar Chart তৈরি করা যাক।

কোড উদাহরণ:

const ctx = document.getElementById('radarChart').getContext('2d');

const radarChart = new Chart(ctx, {
    type: 'radar', // Chart type: Radar
    data: {
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'], // Labels for the radar
        datasets: [{
            label: 'Activity Level', // Label for the dataset
            data: [20, 30, 40, 50, 60], // Data for each label
            borderColor: 'rgba(75, 192, 192, 1)', // Border color
            backgroundColor: 'rgba(75, 192, 192, 0.2)', // Background color
            borderWidth: 2, // Border width
            fill: true // Fill the area inside the radar chart
        }]
    },
    options: {
        scales: {
            r: {
                angleLines: {
                    display: true, // Display the angle lines
                    color: 'rgba(0, 0, 0, 0.1)' // Color of the angle lines
                },
                grid: {
                    color: 'rgba(0, 0, 0, 0.1)', // Color of the grid lines
                },
                ticks: {
                    display: true, // Display the ticks on the radar
                    stepSize: 10, // The distance between ticks
                    beginAtZero: true // Start the ticks at zero
                }
            }
        },
        plugins: {
            legend: {
                position: 'top', // Position of the legend
                labels: {
                    font: {
                        size: 14 // Font size of the legend
                    }
                }
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)', // Background color of the tooltip
                bodyFont: {
                    size: 14 // Font size of the tooltip body
                }
            }
        }
    }
});

Radar Chart এর Styling কাস্টমাইজ করা

Chart.js এর মাধ্যমে Radar Chart এর স্টাইলিং অনেক কিছু কাস্টমাইজ করা যায়। কিছু প্রধান স্টাইলিং অপশন নিচে দেওয়া হলো:

১. Grid Lines এবং Angle Lines কাস্টমাইজ করা

Grid Lines এবং Angle Lines চার্টের মধ্যে ডেটার লেবেল এবং পয়েন্টগুলির সাহায্যে সাহায্য করে। আপনি এগুলোর রঙ, দৃশ্যমানতা এবং স্টাইল পরিবর্তন করতে পারেন।

scales: {
    r: {
        angleLines: {
            display: true, // Angle lines visible
            color: 'rgba(0, 0, 0, 0.1)', // Color of the angle lines
            lineWidth: 2 // Line width for the angle lines
        },
        grid: {
            color: 'rgba(0, 0, 0, 0.1)', // Color of the grid lines
            lineWidth: 1 // Line width for the grid lines
        },
        ticks: {
            display: true, // Display ticks
            stepSize: 10, // Space between each tick
            beginAtZero: true // Start ticks at 0
        }
    }
}

২. Labels কাস্টমাইজ করা

আপনার Radar Chart এর labels (লেবেলস) কাস্টমাইজ করতে পারেন, যেমন তাদের রঙ, আকার এবং ফন্ট পরিবর্তন করা। font এবং color এর মাধ্যমে আপনি লেবেলের কাস্টমাইজেশন করতে পারবেন।

scales: {
    r: {
        ticks: {
            font: {
                size: 14, // Font size of the ticks
                family: 'Arial', // Font family
                weight: 'bold' // Font weight
            },
            color: 'rgba(0, 0, 0, 0.7)' // Tick label color
        }
    }
}

৩. Dataset এর Border এবং Fill কাস্টমাইজ করা

আপনার Radar Chart এর dataset এর সীমানা (border) এবং ভরাট (fill) রঙ কাস্টমাইজ করতে পারেন। এটি চার্টের দৃশ্যমানতাকে আরও আকর্ষণীয় করে তোলে।

datasets: [{
    label: 'Activity Level',
    data: [20, 30, 40, 50, 60],
    borderColor: 'rgba(75, 192, 192, 1)', // Border color of the radar chart
    backgroundColor: 'rgba(75, 192, 192, 0.2)', // Background color inside the radar chart
    borderWidth: 2, // Border width
    fill: true // Whether to fill the area inside the chart
}]

৪. Legend এবং Tooltip কাস্টমাইজ করা

Chart.js এ legend এবং tooltip কাস্টমাইজ করার জন্য আপনি plugins অপশন ব্যবহার করতে পারেন। এটি চার্টের ডেটা পয়েন্টের বর্ণনা এবং টুলটিপ স্টাইলিং নিয়ন্ত্রণ করে।

plugins: {
    legend: {
        position: 'top', // Legend position: 'top', 'bottom', 'left', 'right'
        labels: {
            font: {
                size: 14, // Font size of the legend labels
                family: 'Verdana' // Font family of the legend
            },
            color: 'rgba(0, 0, 0, 0.8)' // Legend label color
        }
    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.8)', // Tooltip background color
        bodyFont: {
            size: 14, // Tooltip body font size
            family: 'Arial' // Tooltip font family
        },
        bodyColor: '#fff' // Tooltip body text color
    }
}

সারাংশ

Chart.js এর Radar Chart কাস্টমাইজ করা খুবই সহজ এবং এটি বিভিন্ন ধরনের স্টাইলিং অপশন প্রদান করে। আপনি Grid lines, Angle lines, Labels, Dataset border, Tooltip এবং Legend এর রং, আকার, অবস্থান ইত্যাদি কাস্টমাইজ করে আপনার চার্টটি সুন্দর এবং কার্যকরী করে তুলতে পারেন। কাস্টমাইজেশন এর মাধ্যমে আপনি আপনার ডেটা আরও আকর্ষণীয় এবং পরিষ্কারভাবে উপস্থাপন করতে পারবেন।