jqwidgets-framework/demos/angular/app/chart/chartwithtabs/app.component.html

jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxTabs [width]="getWidth()" [height]="560">
  <ul>
    <li style="margin-left: 30px">
      <div style="height: 20px; margin-top: 5px">
        <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left">
            Candlestick Chart
        </div>
      </div>
    </li>
    <li>
      <div style="height: 20px; margin-top: 5px">
        <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left">
            Line Chart
        </div>
      </div>
    </li>
  </ul>
  <div style="overflow: hidden">
    <jqxChart #chart1 [width]="'100%'" [height]="'100%'"></jqxChart>
  </div>
  <div style="overflow: hidden">
    <jqxChart
        [width]="'100%'" [height]="'100%'"
        [title]="'U.S. Stock Market Index Performance (2014)'"
        [description]="'(NASDAQ Composite compared to S&P 500'"
        [showLegend]="true" [enableAnimations]="true" [padding]="padding"
        [animationDuration]="1500" [source]="dataAdapter2" [xAxis]="xAxis2"
        [seriesGroups]="seriesGroups2" [colorScheme]="'scheme04'">
    </jqxChart>
  </div>
</jqxTabs>