<div class="row"> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Vertical Bar Chart</h4> <ngx-charts-bar-vertical class="chart-container" [scheme]="colorScheme" [schemeType]="schemeType" [results]="single" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [tooltipDisabled]="tooltipDisabled" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [showGridLines]="showGridLines" [barPadding]="40" [view]="view" [roundDomains]="roundDomains" (select)="select($event)" (legendLabelClick)="onLegendLabelClick($event)"> </ngx-charts-bar-vertical> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Horizontal bar chart</h4> <ngx-charts-bar-horizontal class="chart-container" [scheme]="colorScheme" [schemeType]="schemeType" [results]="single" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [tooltipDisabled]="tooltipDisabled" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [showGridLines]="showGridLines" [barPadding]="20" [roundDomains]="roundDomains" (legendLabelClick)="onLegendLabelClick($event)" (select)="select($event)"> </ngx-charts-bar-horizontal> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Group Vertical bar chart</h4> <ngx-charts-bar-vertical-2d class="chart-container" [scheme]="colorScheme" [schemeType]="schemeType" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [tooltipDisabled]="tooltipDisabled" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" (legendLabelClick)="onLegendLabelClick($event)" [showGridLines]="showGridLines" [barPadding]="barPadding" [groupPadding]="20" [roundDomains]="roundDomains" (select)="select($event)"> </ngx-charts-bar-vertical-2d> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Group horizontal bar chart</h4> <ngx-charts-bar-horizontal-2d class="chart-container" [scheme]="colorScheme" [schemeType]="schemeType" [results]="multi" [gradient]="gradient" [tooltipDisabled]="tooltipDisabled" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" (legendLabelClick)="onLegendLabelClick($event)" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [showGridLines]="showGridLines" [barPadding]="barPadding" [groupPadding]="20" [roundDomains]="roundDomains" (select)="select($event)"> </ngx-charts-bar-horizontal-2d> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Line chart</h4> <ngx-charts-line-chart class="chart-container" [scheme]="colorScheme" [schemeType]="schemeType" [results]="dateDataWithOrWithoutRange" [legend]="showLegend" (legendLabelClick)="onLegendLabelClick($event)" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale" [timeline]="timeline" [showGridLines]="showGridLines" [curve]="curve" [rangeFillOpacity]="rangeFillOpacity" [roundDomains]="roundDomains" [tooltipDisabled]="true" (select)="select($event)"> </ngx-charts-line-chart> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Area chart</h4> <ngx-charts-area-chart class="chart-container" [scheme]="colorScheme" [schemeType]="schemeType" [results]="dateData" [legend]="showLegend" (legendLabelClick)="onLegendLabelClick($event)" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale" [timeline]="timeline" [showGridLines]="showGridLines" [roundDomains]="roundDomains" [curve]="curve" [tooltipDisabled]="tooltipDisabled" (select)="select($event)"> </ngx-charts-area-chart> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Stacked chart</h4> <ngx-charts-area-chart-stacked class="chart-container" [scheme]="colorScheme" [schemeType]="schemeType" [results]="dateData" [legend]="showLegend" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" (legendLabelClick)="onLegendLabelClick($event)" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [timeline]="timeline" [showGridLines]="showGridLines" [roundDomains]="roundDomains" [tooltipDisabled]="tooltipDisabled" [curve]="curve" (select)="select($event)"> </ngx-charts-area-chart-stacked> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Normalize Area chart</h4> <ngx-charts-area-chart-normalized class="chart-container" [scheme]="colorScheme" [schemeType]="schemeType" [results]="dateData" [legend]="showLegend" [gradient]="gradient" [xAxis]="showXAxis" (legendLabelClick)="onLegendLabelClick($event)" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [timeline]="timeline" [showGridLines]="showGridLines" [roundDomains]="roundDomains" [tooltipDisabled]="tooltipDisabled" [curve]="curve" (select)="select($event)"> </ngx-charts-area-chart-normalized> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Pie chart</h4> <ngx-charts-pie-chart class="chart-container" [scheme]="colorScheme" [results]="single" [legend]="showLegend" [explodeSlices]="explodeSlices" [labels]="showLabels" [doughnut]="doughnut" [arcWidth]="arcWidth" (legendLabelClick)="onLegendLabelClick($event)" [gradient]="gradient" [tooltipDisabled]="tooltipDisabled" (select)="select($event)"> </ngx-charts-pie-chart> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Advanced pie chart</h4> <ngx-charts-advanced-pie-chart class="chart-container" [scheme]="colorScheme" [results]="single" (legendLabelClick)="onLegendLabelClick($event)" [gradient]="gradient" [tooltipDisabled]="tooltipDisabled" (select)="select($event)"> </ngx-charts-advanced-pie-chart> </div> </div> </div> </div>