Quantcast
Channel: DevExpress Support Center (Examples)
Viewing all articles
Browse latest Browse all 7205

How to add charts to bootstrap tabset with the AngularJS approach

$
0
0

DevExtreme charts are not rendered inside an invisible container. You are required to render a chart when a bootstrap tabset tab become active using the render method.

Question Comments

Added By: Mark van Proctor at: 3/26/2015 7:52:41 PM    

An alternative to this solution is to use a scope variable in the tab's "active" option and then use an ng-if to only generate the chart when the tab is active.
e.g:

[HTML]
<tabset><tabheading="One">One</tab><tabheading="Two"active="circleActive"><divng-if="circleActive"id="circularChartContainer"dx-circular-gauge="circularGaugeSettings"></div></tab><tabheading="Three"active="linearActive"><divng-if="linearActive"id="linearChartContainer"dx-linear-gauge="linearGaugeSettings"></tab></tabset>

Viewing all articles
Browse latest Browse all 7205

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>