Highcharts এর জন্য Responsive Rules তৈরি করা

Highcharts-এ Responsive Rules ব্যবহার করে আপনি চার্টের উপাদানগুলির আকার এবং আচরণ কাস্টমাইজ করতে পারেন যাতে চার্টটি বিভিন্ন স্ক্রিন সাইজে সুন্দরভাবে কাজ করে। Responsive ফিচারটি আপনাকে চার্টের ভিউপোর্ট অনুযায়ী এলিমেন্টের আকার, রঙ, এবং অন্যান্য প্রপার্টি পরিবর্তন করতে সহায়ক। এটি মোবাইল, ট্যাবলেট, এবং ডেস্কটপের জন্য উপযুক্ত ভিউ তৈরি করতে ব্যবহৃত হয়।

Highcharts এ Responsive Rules তৈরি করার মাধ্যমে আপনি চার্টের ডিজাইন, স্কেল, এবং অন্যান্য বৈশিষ্ট্যগুলি কাস্টমাইজ করতে পারেন যাতে চার্টটি যেকোনো ডিভাইসে মানানসই হয়।

Responsive Rules এর জন্য সাধারণ গঠন

Highcharts এ responsive rules এর মাধ্যমে আপনি chart options, series, xAxis, yAxis, title, tooltip, এবং আরও অনেক উপাদানের জন্য কাস্টমাইজেশন করতে পারেন। এই রুলগুলি আপনার চার্টের উপাদানগুলি এমনভাবে পরিবর্তন করবে যে চার্টটি বিভিন্ন ডিভাইসে উপযুক্ত দেখাবে।

Responsive Rules এর গঠন

Highcharts.chart('container', {
    chart: {
        type: 'line',
        marginRight: 10
    },
    title: {
        text: 'Responsive Chart Example'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Value'
        }
    },
    series: [{
        name: 'Sales',
        data: [10, 20, 30, 40, 50]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500  // যদি স্ক্রিনের প্রস্থ 500px বা কম হয়
            },
            chartOptions: {
                chart: {
                    spacingLeft: 10,
                    spacingRight: 10
                },
                title: {
                    style: {
                        fontSize: '14px'  // ছোট স্ক্রিনে টাইটেল সাইজ ছোট করা হবে
                    }
                },
                subtitle: {
                    text: 'Shortened subtitle text for small screens'
                }
            }
        }]
    }
});

এখানে:

• condition: maxWidth, minWidth, বা maxHeight, minHeight ব্যবহার করে স্ক্রিন সাইজ বা অন্যান্য শর্তাবলী সেট করা হয়।
• chartOptions: যখন শর্তটি পূর্ণ হয়, তখন আপনি যে উপাদানগুলির পরিবর্তন করতে চান তা chartOptions এর মাধ্যমে কাস্টমাইজ করতে পারবেন।

Responsive Rules এর উদাহরণ

1. Screen Size অনুযায়ী Title এবং Subtitle পরিবর্তন করা

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Responsive Title Example'
    },
    subtitle: {
        text: 'This is a subtitle'
    },
    series: [{
        name: 'Sales',
        data: [5, 10, 15, 20, 25]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 600
            },
            chartOptions: {
                title: {
                    style: {
                        fontSize: '14px'
                    }
                },
                subtitle: {
                    style: {
                        fontSize: '12px'
                    }
                }
            }
        }]
    }
});

এখানে, স্ক্রিনের প্রস্থ 600px এর কম হলে title এবং subtitle এর ফন্ট সাইজ ছোট হবে।

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

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Responsive Chart with Custom Tooltip'
    },
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom'
    },
    series: [{
        name: 'Sales',
        data: [10, 20, 30, 40, 50]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 400
            },
            chartOptions: {
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top'
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.75)',
                    borderColor: '#ccc',
                    borderWidth: 1
                }
            }
        }]
    }
});

এখানে, স্ক্রিনের প্রস্থ 400px বা কম হলে legend এবং tooltip কাস্টমাইজ করা হচ্ছে। Legend এর অবস্থান পরিবর্তিত হবে এবং tooltip এর ব্যাকগ্রাউন্ড কালার এবং বর্ডার পরিবর্তন হবে।

3. XAxis এবং YAxis এর ট্যাগ এবং লেবেল পরিবর্তন

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Responsive X and Y Axis Example'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Sales'
        }
    },
    series: [{
        name: 'Sales',
        data: [15, 25, 35, 45, 55]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 400
            },
            chartOptions: {
                xAxis: {
                    labels: {
                        rotation: -45  // ছোট স্ক্রীনে X Axis লেবেলগুলো উল্টানো হবে
                    }
                },
                yAxis: {
                    title: {
                        style: {
                            fontSize: '14px'
                        }
                    }
                }
            }
        }]
    }
});

এখানে, যখন স্ক্রীনের প্রস্থ 400px বা কম হবে তখন xAxis এর লেবেলগুলোর রোটেশন হবে এবং yAxis এর টাইটেল ফন্ট সাইজ ছোট করা হবে।

উপসংহার

Highcharts-এ Responsive Rules এর মাধ্যমে আপনি চার্টের বিভিন্ন উপাদান কাস্টমাইজ করতে পারেন, যেমন title, subtitle, legend, tooltip, xAxis, yAxis এবং আরও অনেক কিছু, স্ক্রীন সাইজের উপর ভিত্তি করে। এটি ব্যবহারকারীদের জন্য চার্টের অভিজ্ঞতাকে আরও উন্নত এবং উপযুক্ত করে তোলে, বিশেষ করে মোবাইল এবং ট্যাবলেট ডিভাইসে। Responsive rules ব্যবহার করে আপনি আপনার চার্টকে বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শন করার জন্য কাস্টমাইজ করতে পারেন।