I have a problem, I am using apexchart, when I change the screen size the graph does not update or adapt unless I refresh the entire screen.

I have tried the apexchart methods but they do not work https://products.technia.com/app/docs/tvc-helium-documentation-2021.4.0/helium/jsapi/ApexChart.html

Do you use style for apexchart ?

Could you be more specific?

Try setting the style to width: 100%

it doesn't work either

Can you provide more information about your code?

Yes:

     AreaChart::create(array(
        "dataSource" => $breakeven_data,
        "columns" => array(
            "date_time" => array(
                "label" => "Date",
            ),
            "total_cost" => array(
              "label" => "Total Cost",
              "type" => "number",
              "prefix" => '$',
            ),
            "sold_amount" => array(
                "label" => "Revenue",
                "type" => "number",
                "prefix" => '$',
            ),
        ),
        "options" => [
            'yaxis | labels' => [    // yaxis | labels: Customize the Y axis labels
                'style' => [
                    "colors" => ['#adadad']
                ],
                'formatter' => "function(value, index) {
                    return '$ ' + value.toLocaleString();
                }"
            ],
            'xaxis | labels' => [   // xaxis | labels: Customize the x axis labels
                'style' => [
                    "colors" => '#adadad'
                ],
                'formatter' => "function(value) {
                    return typeof value === 'string' ? (value.length > 15 ? value.substring(0, 15) + '...' : value) : '';
                }",
                'show' => true,
                'rotate' => -45 // Rotate labels if they overlap
            ],
            'xaxis | tickAmount' => 10, // Defines the number of ticks on the X axis to avoid overlap.
            'legend' => [
                'position' => 'bottom', // Move legend to the bottom for small screens
                'horizontalAlign' => 'center',
                'floating' => false  //the legend should float above the chart
            ],
            'chart' => [
                'height' => 260, // Default height
            ],
            'responsive' => [
                [
                    'breakpoint' => 1000,
                    'options' => [
                        'chart' => [
                            'height' => 350
                        ],
                        'xaxis' => [
                            'labels' => [
                                'rotate' => -30
                            ]
                        ]
                    ]
                ],
                [
                    'breakpoint' => 600,
                    'options' => [
                        'chart' => [
                            'height' => 300
                        ],
                        'xaxis' => [
                            'labels' => [
                                'rotate' => -45
                            ]
                        ],
                        'legend' => [
                            'position' => 'bottom'
                        ]
                    ]
                ]
            ]
        ],
        'colors' => [
            '#008ffb',
            '#00e396'
        ],
        "widthHeightAutoRatio" => 3,
        "showLegend" => true
    ));
    ?>

I don't see any effect on the resizing from the code. I think it is affected by some external setting