get selected value from first chart into dynamic second chart | Apexchart dynamic charts

Question

the issue im facing is when i end 2nd chart like 'chart.render()' , 2nd chart gets value that i selected in first chart but when i click on another value in first chart , instead of update 2nd chart div , it creats another div vertically.

here is my chart. i'm getting value from controlle in chart.

        var app = @json($newval);
        var options = {
            series: app,
            chart: {
                events: {dataPointSelection:function (event, chartContext, config) {
                       var value= config.w.config.series[config.dataPointIndex]
                        $( "#chart2" ).load(window.location.href + " #chart2" );
                        secondchart(value);

                    }
                },
                width: 380,
                type: 'donut',

            },
            dataLabels: {
                enabled: false
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        show: false
                    }
                }
            }],
            legend: {
                position: 'right',
                offsetY: 0,
                height: 230,
            }
        };

        var chart = new ApexCharts(document.querySelector("#chart1"), options);
        chart.render();

//second chart starts...

        function secondchart(value) {
//in this console.log im getting correct value 
            console.log(value)
            var options = {
                series: [{
                    data: [value]
                }],
                chart: {
                    type: 'bar',
                    height: 350
                },
                plotOptions: {
                    bar: {
                        borderRadius: 4,
                        horizontal: true,
                    }
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
                        'United States', 'China', 'Germany'
                    ],
                }
            };

           
           chart.render()

        }

    </script>```

Answer 1

so here is code what i want do do exactly,

 <script>
        var app = @json($newval);
        var options = {
            series: app,
            chart: {
                events: {
                    dataPointSelection: function (event, chartContext, config) {
                        var value = config.w.config.series[config.dataPointIndex]

                        secondchart(value);

                    }

                },
                width: 380,
                type: 'donut',

            },
            dataLabels: {
                enabled: false
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        show: false
                    }
                }
            }],
            legend: {
                position: 'right',
                offsetY: 0,
                height: 230,
            }
        };

        var chart = new ApexCharts(document.querySelector("#chart1"), options);
        chart.render();


        function secondchart(value) {

            var cat = @json($cat);
            var options = {

                series: [{
                    data: [value,value]
                }],
                chart: {
                    redrawOnParentResize: true,

                    type: 'bar',
                    height: 350
                },
                plotOptions: {
                    bar: {
                        borderRadius: 4,
                        horizontal: true,
                    }
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: [cat
                    ],
                }
            };
            // $( "#chart2" ).load(window.location.href + " #chart2" );


            var chart = new ApexCharts(document.querySelector("#chart2"), options);

            debugger
            if ($("#chart2") == null) {
                console.log( $("#chart2"));

                chart.render()
            } else {
                $("#chart2").empty();
               console.log( $("#chart2"));
                chart.render()
            }

        }


    </script>