How to add radio button in highchart legend symbol

Question

I have 3 line series in my highchart , i want to make one series fixed (user) cant disable/hide it by clicking the legend.

And other two i want to work as radio button ie user can choose among those 2 which one to show , now i was able to make that happen , but now i want a radio button next to those two legend symbols which user can choose from .

legend should be like this. and the radio button should toggle the series. the working code (without radio button and legend allignment) is :

drawChart(data1, data2, data3) {
    let chart = Highcharts.chart("container", {
            chart: {
                zoomType: "xy"
            },
            title: {
                text: null
            },
            plotOptions: {
                series: {
                    events: {
                        show: function () {
                            let chart = this.chart,
                                series = chart.series,
                                i = series.length,
                                otherSeries;
                            while (i--) {
                                if (i != 0)
                                    otherSeries = series[i];
                                if (otherSeries != this && otherSeries.visible) {
                                    otherSeries.hide();
                                }
                            }
                        },
                        legendItemClick: function () {
                            if (this.visible) {
                                return false;
                            }
                        }
                    }
                }
            },

            series: [{
                name: "series1",
                data: data1
            }, {
                name: "series2",
                data: data2
            }, {
                name: "series3",
                data: data3,
                visible: false
            }]

        }

Answer 1

You need to set the plotOptions and set showCheckbox: true

plotOptions: {
    line: {
        marker: {   enabled: false  }
    },
    turboThreshold: 0,
    series: {
        cursor: 'pointer',
        showCheckbox: true,
        events: {
            checkboxClick: function (event) {
                if (event.checked) {
                    this.show();
                    this.legendSymbol.show();
                } else {
                    this.hide();
                    this.legendSymbol.hide();
                }
            },
            legendItemClick: function() {
                return false;
            }
        }
    }
},

By default the checkboxes are placed right next to series label but we can override it according to our need, Here is a fiddle that might help !!! It's just a pointer, You can customize according to your need.