Rendering issue ApexCharts

Melina Maccio commented on Jul 11

Hello, I'm trying to toggle in my card actions between two Donut Charts from the Apex library. But when I switch to the second chart, it's not rendering. This is my code

                    <!-- Pricing Strategy Chart -->
                    <div class="col-md-4 d-flex">
                        <div class="card flex-fill">
                            <div class="card-header">
                                <div class="card-actions float-end">
                                    <div class="dropdown position-relative">
                                        <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                                            <i class="align-middle" data-feather="more-horizontal"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a id="displaySuggestedPriceStrategy" class="dropdown-item" href="#" hidden>Show by Suggested Price</a>
                                            <!-- TODO: review chart rendering. Does not work --> 
                                            <a id="displaySweetSpotStrategy" class="dropdown-item disabled" href="#">Show by Sweet Spot</a>
                                        </div>
                                    </div>
                                </div>
                                <h5 class="card-title mb-0">Pricing Strategy</h5>
                            </div>
                            <!-- By Suggested Price -->
                            <div id="suggestedPriceStrategyChart" class="card-body">
                                <?php include "pricing-strategy-report/suggestedPriceStrategyReport.view.php"; ?>
                            </div>
                            <!-- By Sweet Spot -->
                            <div id="sweetSpotStrategyChart" class="card-body" hidden>
                                <?php include "pricing-strategy-report/sweetSpotStrategyReport.view.php"; ?>
                            </div>
                        </div>
                    </div>
                    <!-- Estimations Table -->
                    <div class="col-md-8 d-flex">
                        <div class="card flex-fill">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Estimations</h5>
                            </div>
                            <?php include "estimations-report/EstimationsReport.view.php"; ?>
                        </div>
                    </div>
                </div>

            </div>
        </main>
    </div>

    <script>
        // // Toggles between Suggested Price and Sweet Spot Pricing Strategy Charts
        $("document").ready(function() {
            $("#displaySweetSpotStrategy").click(function() {
                // By Sweet Spot
                $('div#sweetSpotStrategyChart').removeAttr('hidden');
                $('a#displaySweetSpotStrategy').attr('hidden', true);
                // By Suggested Price
                $("div#suggestedPriceStrategyChart").attr('hidden', true);
                $('a#displaySuggestedPriceStrategy').removeAttr('hidden');
            });

            $("#displaySuggestedPriceStrategy").click(function() {
                // By Sweet Spot
                $('div#sweetSpotStrategyChart').attr('hidden', true);
                $('a#displaySweetSpotStrategy').removeAttr('hidden');
                // By Suggested Price
                $("div#suggestedPriceStrategyChart").removeAttr('hidden');
                $('a#displaySuggestedPriceStrategy').attr('hidden', true);
            });
        });
    </script>

The Charts code (it's the same for both donuts I just change the name and the data):

\koolreport\apexcharts\DonutChart::create(array(
                                            "name" => "sweetSpotDonut",
                                            "dataSource" => $pricing_strategy_data,
                                            "columns" => array(
                                                "source",
                                                "count" => array("type" => "number", "suffix" => " orders")
                                            ),
                                            "options" => [],
                                            "showLegend" => false,
                                            "showLabel" => false,
                                            "colorScheme" => [
                                                "#19376D", 
                                                "#2e75e8", 
                                                "#5FBDFF", 
                                            ]
                                        ));

Melina Maccio commented on Jul 11

I've tried executing a redraw like this, but it did not work.

<script>
        function redrawChart() {
            var apexchartsObj = chartName.chart(); //with the corresponding chart name
            apexchartsObj.resetSeries();
        }
    </script>

Sebastian Morales commented on Jul 12

If you use hidden elements, ApexCharts won't be rendered correctly inside those. Only after removing hidden attribute of the chart's parent element should you call chart redraw function:

removeHiddenAttr();
redrawChart(); // using apexcharts' resetSeries() method or dispatching window resize event: window.dispatchEvent(new Event("resize"));

If it still doesn't work, consider calling redraw with setTimeout like this:

removeHiddenAttr();
setTimeout(function() {
    redrawChart();=
}, 200); // wait 200 miliseconds before redrawing chart

Melina Maccio commented on Jul 17

It worked! Thank you very much :)

KoolReport's Forum

Rendering issue ApexCharts #3316

Build Your Excellent Data Report