pie charts not works in tabs

[kasinau]

Hi, I don't know if this is an issue or no, but I have a list of tabs created with yii\bootstrap\Tabs, in each tab I want to have some charts(pie charts), but, the charts are shown only for the first tab, for other tabs I don't get anything, can you please help me with this? Thank you!

[miloschuman]

Can you provide sample code?

[kasinau]

Here is the tab:

yii\bootstrap\Tabs::widget([
            'navType' => 'nav-pills',
            'encodeLabels' => false,
            'items' => [
                [
                    'label' => 'Week',
                    'content' => $this->render('_overview_tabs_content'),
                ],
                [
                    'label' => 'Month',
                    'content' => $this->render('_overview_tabs_content'),
                ],
                [
                    'label' => 'Year',
                    'content' => $this->render('_overview_tabs_content'),
                ],
                [
                    'label' => 'Custom',
                    'content' => $this->render('_custom_tab'),
                ],
            ],
        ]);

And here is the pie chart partial:

\miloschuman\highcharts\Highcharts::widget([
    'options' => [
        'title' => [
            'text' => null
        ],
        'chart' => [
            'renderTo' => $chartContainerId,
            'type' => 'pie',
            'backgroundColor' => 'rgba(255, 255, 255, 0.0)',
            'height' => 100,
        ],
        'plotOptions' => [
            'pie' => [
                'borderColor' => '#000000',
                'innerSize' => 65,
                'size' => 80,
                'dataLabels' => [
                    'enabled' => false
                ]
            ]
        ],
        'series' => [
            [
                'data' => [$progress, 100 - $progress],
                'name' => null
            ]
        ],
        'credits' => false,
        'tooltip' => false,
        'labels' => [
            'items' => [
                ['html' => $progress . '%']
            ],
            'style' => [
                'font-size' => '22px',
                'top' => '32px',
                'left' => '20%'
            ]
        ]
    ]
]);

The ids for each container are different, but the charts are shown only for the firs tab, for the others the chart div is generated but it isn't shown, it seems that it is something like css configuration

[kasinau]

and also if we load a partial containing chart via ajax, the chart isn't shown, maybe the js needs to be re-initialized

[miloschuman]

You do not need to set the "renderTo" option. The widget creates a container and automatically assigns "renderTo" the ID of the container. If you need a specific container ID, set it using the top-level "id" option. For instance:

\miloschuman\highcharts\Highcharts::widget([
    'id' => $chartContainerId,
    'options' => [...]
]);

[miloschuman]

and also if we load a partial containing chart via ajax, the chart isn't shown, maybe the js needs to be re-initialized

Two suggestions:

• Make sure you are using renderAjax() and not renderPartial()
• Make sure the container ID is not conflicting with another ID in the existing page.

[kasinau]

Yes, it works, thank you for your assistance, and, as I said in my first message, it wasn't an issue, it was just a question :)