microting/ngx-charts

View on GitHub
demo/app.component.html

Summary

Maintainability
Test Coverage
<main [class]="theme">
  <div class="chart-col">
    <div style="position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px;">
      <ngx-charts-bar-vertical
        *ngIf="chartType === 'bar-vertical'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [customColors]="customColors"
        [results]="single"
        [animations]="animations"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [showYAxisLineLeft]=true
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [tooltipDisabled]="tooltipDisabled"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [showGridLines]="showGridLines"
        [barPadding]="barPadding"
        [roundDomains]="roundDomains"
        [roundEdges]="roundEdges"
        [yScaleMax]="yScaleMax"
        [noBarWhenZero]="noBarWhenZero"
        [showDataLabel]="showDataLabel"
        [barWidth]="barWidth"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (legendLabelClick)="onLegendLabelClick($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-bar-vertical>
      <ngx-charts-bar-horizontal
        *ngIf="chartType === 'bar-horizontal'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="single"
        [animations]="animations"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [showXAxisLineTop]=true
        [showXAxisLineBottom]=true
        [tooltipDisabled]="tooltipDisabled"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [showGridLines]="showGridLines"
        [barPadding]="barPadding"
        [barWidth]="barWidth"
        [roundDomains]="roundDomains"
        [roundEdges]="roundEdges"
        [xScaleMax]="xScaleMax"
        [noBarWhenZero]="noBarWhenZero"
        [showDataLabel]="showDataLabel"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (legendLabelClick)="onLegendLabelClick($event)"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-bar-horizontal>
      <ngx-charts-bar-vertical-2d
        *ngIf="chartType === 'bar-vertical-2d'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="multi"
        [animations]="animations"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [tooltipDisabled]="tooltipDisabled"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        (legendLabelClick)="onLegendLabelClick($event)"
        [showGridLines]="showGridLines"
        [barPadding]="barPadding"
        [barWidth]="barWidth"
        [groupPadding]="groupPadding"
        [roundDomains]="roundDomains"
        [roundEdges]="roundEdges"
        [yScaleMax]="yScaleMax"
        [noBarWhenZero]="noBarWhenZero"
        [showDataLabel]="showDataLabel"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-bar-vertical-2d>
      <ngx-charts-bar-horizontal-2d
        *ngIf="chartType === 'bar-horizontal-2d'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="multi"
        [animations]="animations"
        [gradient]="gradient"
        [tooltipDisabled]="tooltipDisabled"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [legend]="showLegend"
        [showXAxisLineTop]=true
        [showXAxisLineBottom]=true
        [showYAxisLineRight]=true
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        (legendLabelClick)="onLegendLabelClick($event)"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [showGridLines]="showGridLines"
        [barPadding]="barPadding"
        [barWidth]="barWidth"
        [groupPadding]="groupPadding"
        [roundDomains]="roundDomains"
        [roundEdges]="roundEdges"
        [xScaleMax]="xScaleMax"
        [noBarWhenZero]="noBarWhenZero"
        [showDataLabel]="showDataLabel"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-bar-horizontal-2d>
      <ngx-charts-bar-vertical-stacked
        *ngIf="chartType === 'bar-vertical-stacked'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="multi"
        [animations]="animations"
        [gradient]="gradient"
        [tooltipDisabled]="tooltipDisabled"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        (legendLabelClick)="onLegendLabelClick($event)"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [showGridLines]="showGridLines"
        [barPadding]="barPadding"
        [barWidth]="barWidth"
        [roundDomains]="roundDomains"
        [roundEdges]="roundEdges"
        [yScaleMax]="yScaleMax"
        [noBarWhenZero]="noBarWhenZero"
        [showDataLabel]="showDataLabel"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-bar-vertical-stacked>
      <ngx-charts-bar-vertical-2d-stacked
        *ngIf="chartType === 'bar-vertical-2d-stacked'"
        class="chart-container"
        [view]="view"
        [customColors]="customColors"
        [schemeType]="schemeType"
        [results]="groupedStacked"
        [animations]="animations"
        [gradient]="gradient"
        [barWidth]="12"
        [tooltipDisabled]="tooltipDisabled"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [showXAxisLineTop]=false
        [showYAxisLineLeft]=true
        [showYAxisLineRight]=false
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [showXAxisLabel]="showXAxisLabel"
        (legendLabelClick)="onLegendLabelClick($event)"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [showGridLines]="showGridLines"
        [barPadding]="barPadding"
        [roundDomains]="roundDomains"
        [showDataLabel]="showDataLabel"
        [noBarWhenZero]="noBarWhenZero"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-bar-vertical-2d-stacked>
      <ngx-charts-bar-horizontal-stacked
        *ngIf="chartType === 'bar-horizontal-stacked'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="multi"
        [animations]="animations"
        [gradient]="gradient"
        [tooltipDisabled]="tooltipDisabled"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [showXAxisLabel]="showXAxisLabel"
        [showXAxisLineTop]=true
        [showXAxisLineBottom]=true
        [showYAxisLineRight]=true
        (legendLabelClick)="onLegendLabelClick($event)"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [showGridLines]="showGridLines"
        [barPadding]="barPadding"
        [barWidth]="barWidth"
        [roundDomains]="roundDomains"
        [showDataLabel]="showDataLabel"
        [xScaleMax]="xScaleMax"
        [noBarWhenZero]="noBarWhenZero"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-bar-horizontal-stacked>
      <ngx-charts-bar-vertical-normalized
        *ngIf="chartType === 'bar-vertical-normalized'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="multi"
        [animations]="animations"
        [gradient]="gradient"
        [tooltipDisabled]="tooltipDisabled"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [showXAxisLabel]="showXAxisLabel"
        (legendLabelClick)="onLegendLabelClick($event)"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [showGridLines]="showGridLines"
        [barPadding]="barPadding"
        [barWidth]="barWidth"
        [roundDomains]="roundDomains"
        [noBarWhenZero]="noBarWhenZero"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-bar-vertical-normalized>
      <ngx-charts-bar-horizontal-normalized
        *ngIf="chartType === 'bar-horizontal-normalized'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="multi"
        [animations]="animations"
        [gradient]="gradient"
        [tooltipDisabled]="tooltipDisabled"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [showXAxisLineTop]=true
        [showXAxisLineBottom]=true
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        (legendLabelClick)="onLegendLabelClick($event)"
        [showGridLines]="showGridLines"
        [barPadding]="barPadding"
        [barWidth]="barWidth"
        [roundDomains]="roundDomains"
        [noBarWhenZero]="noBarWhenZero"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-bar-horizontal-normalized>
      <ngx-charts-pie-chart
        *ngIf="chartType === 'pie-chart'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [results]="single"
        [animations]="animations"
        [legend]="showLegend"
        [totalValue]="3000"
        [totalLabel]="totalLabel"
        [legendTitle]="legendTitle"
        [legendAdvanced]="legendAdvanced"
        [legendPosition]="legendPosition"
        [explodeSlices]="explodeSlices"
        [labels]="showLabels"
        [doughnut]="doughnut"
        [showDoughnutSum]="showDoughnutSum"
        [arcWidth]="arcWidth"
        (legendLabelClick)="onLegendLabelClick($event)"
        [gradient]="gradient"
        [tooltipDisabled]="tooltipDisabled"
        [tooltipText]="pieTooltipText"
        (dblclick)="dblclick($event)"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-pie-chart>
      <ngx-charts-advanced-pie-chart
        *ngIf="chartType === 'advanced-pie-chart'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [results]="single"
        [valueFormatting]="valueFormatting"
        [animations]="animations"
        (legendLabelClick)="onLegendLabelClick($event)"
        [gradient]="gradient"
        [tooltipDisabled]="tooltipDisabled"
        [tooltipText]="pieTooltipText"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-advanced-pie-chart>
      <ngx-charts-pie-grid
        *ngIf="chartType === 'pie-grid'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        (legendLabelClick)="onLegendLabelClick($event)"
        [results]="single"
        [animations]="animations"
        [tooltipDisabled]="tooltipDisabled"
        [tooltipText]="pieTooltipText"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-pie-grid>
      <ngx-charts-line-chart
        *ngIf="chartType === 'line-chart'"
        [view]="view"
        class="chart-container"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="dateDataWithOrWithoutRange"
        [animations]="animations"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        (legendLabelClick)="onLegendLabelClick($event)"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [autoScale]="autoScale"
        [xScaleMin]="xScaleMin"
        [xScaleMax]="xScaleMax"
        [yScaleMin]="yScaleMin"
        [yScaleMax]="yScaleMax"
        [timeline]="timeline"
        [showGridLines]="showGridLines"
        [curve]="curve"
        [rangeFillOpacity]="rangeFillOpacity"
        [roundDomains]="roundDomains"
        [tooltipDisabled]="tooltipDisabled"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-line-chart>
      <ngx-charts-polar-chart
        *ngIf="chartType === 'polar-chart'"
        [view]="view"
        class="chart-container"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="multi"
        [animations]="animations"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        (legendLabelClick)="onLegendLabelClick($event)"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [autoScale]="autoScale"
        [showGridLines]="showGridLines"
        [rangeFillOpacity]="rangeFillOpacity"
        [roundDomains]="roundDomains"
        [tooltipDisabled]="tooltipDisabled"
        [showSeriesOnHover]="showSeriesOnHover"
        [trimYAxisTicks]="trimYAxisTicks"
        [maxYAxisTickLength]="maxYAxisTickLength"
        [curve]="closedCurve"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-polar-chart>
      <ngx-charts-bubble-chart
        *ngIf="chartType === 'bubble-chart'"
        [view]="view"
        class="chart-container"
        [results]="bubble"
        [animations]="animations"
        [showGridLines]="showGridLines"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [autoScale]=false
        [clip]=false
        [xScaleMin]="0"
        [xScaleMax]="xScaleMax"
        [yScaleMin]="0"
        [yScaleMax]="yScaleMax"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [roundDomains]="roundDomains"
        [tooltipDisabled]="tooltipDisabled"
        [minRadius]="minRadius"
        [maxRadius]="maxRadius"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
        (select)="select($event)"
      >
      </ngx-charts-bubble-chart>
      <div style="width: 100%; height: 100%" *ngIf="chartType === 'force-directed-graph'">
        <ngx-charts-force-directed-graph
          class="chart-container"
          [legend]="showLegend"
          [legendTitle]="legendTitle"
          [legendPosition]="legendPosition"
          [links]="graph.links"
          [animations]="animations"
          (legendLabelClick)="onLegendLabelClick($event)"
          [nodes]="graph.nodes"
          [scheme]="colorScheme"
          [view]="view"
          [tooltipDisabled]="tooltipDisabled"
          (select)="select($event)"
        >
        </ngx-charts-force-directed-graph>
        <p style="width: calc(100% - 300px)">
          The force-directed chart type has been deprecated in favor of
          <a href="https://github.com/swimlane/ngx-graph" target="_blank">ngx-graph</a> and will be removed in the next
          major version. Please use ngx-graph instead
        </p>
      </div>
      <ngx-charts-area-chart
        *ngIf="chartType === 'area-chart'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="dateData"
        [animations]="animations"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        (legendLabelClick)="onLegendLabelClick($event)"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [autoScale]="autoScale"
        [xScaleMin]="xScaleMin"
        [xScaleMax]="xScaleMax"
        [yScaleMin]="yScaleMin"
        [yScaleMax]="yScaleMax"
        [timeline]="timeline"
        [showGridLines]="showGridLines"
        [roundDomains]="roundDomains"
        [curve]="curve"
        [tooltipDisabled]="tooltipDisabled"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-area-chart>
      <ngx-charts-area-chart-stacked
        *ngIf="chartType === 'area-chart-stacked'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="dateData"
        [animations]="animations"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        (legendLabelClick)="onLegendLabelClick($event)"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [timeline]="timeline"
        [xScaleMin]="xScaleMin"
        [xScaleMax]="xScaleMax"
        [yScaleMin]="yScaleMin"
        [yScaleMax]="yScaleMax"
        [showGridLines]="showGridLines"
        [roundDomains]="roundDomains"
        [tooltipDisabled]="tooltipDisabled"
        [curve]="curve"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-area-chart-stacked>
      <ngx-charts-area-chart-normalized
        *ngIf="chartType === 'area-chart-normalized'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="dateData"
        [animations]="animations"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [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"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-area-chart-normalized>
      <combo-chart-component
        *ngIf="chartType === 'combo-chart'"
        class="chart-container"
        [view]="view"
        [scheme]="comboBarScheme"
        [colorSchemeLine]="lineChartScheme"
        [results]="barChart"
        [animations]="animations"
        [lineChart]="lineChartSeries"
        [tooltipDisabled]="tooltipDisabled"
        [yAxisTickFormatting]="yLeftTickFormat"
        [yLeftAxisScaleFactor]="yLeftAxisScale"
        [yRightAxisScaleFactor]="yRightAxisScale"
        [yRightAxisTickFormatting]="yRightTickFormat"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [showGridLines]="showGridLines"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [showRightYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [yAxisLabelRight]="yAxisLabelRight"
        [noBarWhenZero]="noBarWhenZero"
        (select)="onSelect($event)"
      >
      </combo-chart-component>
      <ngx-charts-heat-map
        *ngIf="chartType === 'heat-map'"
        class="chart-container"
        [min]="heatmapMin"
        [max]="heatmapMax"
        [view]="view"
        [scheme]="colorScheme"
        [results]="multi"
        [animations]="animations"
        [legend]="showLegend"
        [gradient]="gradient"
        (legendLabelClick)="onLegendLabelClick($event)"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [innerPadding]="innerPadding"
        [tooltipDisabled]="tooltipDisabled"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-heat-map>
      <ngx-charts-heat-map
        *ngIf="chartType === 'calendar'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [results]="calendarData"
        [animations]="animations"
        [legend]="showLegend"
        [gradient]="gradient"
        (legendLabelClick)="onLegendLabelClick($event)"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [showXAxisLabel]="false"
        [showYAxisLabel]="false"
        [xAxisTickFormatting]="calendarAxisTickFormatting"
        [tooltipText]="calendarTooltipText"
        [innerPadding]="innerPadding"
        [tooltipDisabled]="tooltipDisabled"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [rotateXAxisTicks]="rotateXAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-heat-map>
      <ngx-charts-tree-map
        *ngIf="chartType === 'tree-map'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [results]="single"
        [animations]="animations"
        [tooltipDisabled]="tooltipDisabled"
        [labelFormatting]="gdpLabelFormatting"
        [valueFormatting]="currencyFormatting"
        [gradient]="gradient"
        [showLabel]="showLabel"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-tree-map>
      <ngx-charts-number-card
        *ngIf="chartType === 'number-card'"
        class="chart-container"
        [view]="view"
        (legendLabelClick)="onLegendLabelClick($event)"
        [scheme]="colorScheme"
        cardColor="#232837"
        emptyColor="#1e222e"
        [results]="single"
        [animations]="animations"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-number-card>
      <div *ngIf="chartType === 'status-demo'">
        <ngx-slider
          [(ngModel)]="salePrice"
          [step]="100"
          [filled]="true"
          [min]="0"
          [max]="10000"
          (change)="statusData = calcStatusData()"
        >
        </ngx-slider>
        Price: ${{ salePrice }}
        <br />
        <ngx-slider
          [(ngModel)]="personnelCost"
          [step]="100"
          [filled]="true"
          [min]="0"
          [max]="10000"
          (change)="statusData = calcStatusData()"
        >
        </ngx-slider>
        Cost: ${{ personnelCost }} / hr
        <ngx-charts-number-card
          class="chart-container"
          [view]="view"
          (legendLabelClick)="onLegendLabelClick($event)"
          [scheme]="colorScheme"
          cardColor="#232837"
          emptyColor="#1e222e"
          [results]="statusData"
          [animations]="animations"
          [valueFormatting]="statusValueFormat"
          [labelFormatting]="statusLabelFormat"
        >
        </ngx-charts-number-card>
      </div>
      <ngx-charts-gauge
        *ngIf="chartType === 'gauge'"
        class="chart-container"
        [view]="view"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [results]="single"
        [animations]="animations"
        [textValue]="gaugeTextValue"
        [scheme]="colorScheme"
        [min]="gaugeMin"
        [max]="gaugeMax"
        [units]="gaugeUnits"
        [angleSpan]="gaugeAngleSpan"
        [startAngle]="gaugeStartAngle"
        [showAxis]="gaugeShowAxis"
        [bigSegments]="gaugeLargeSegments"
        [smallSegments]="gaugeSmallSegments"
        [margin]="margin ? [marginTop, marginRight, marginBottom, marginLeft] : null"
        [tooltipDisabled]="tooltipDisabled"
        [showText]="showText"
        (select)="select($event)"
        (legendLabelClick)="onLegendLabelClick($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-gauge>
      <ngx-charts-linear-gauge
        *ngIf="chartType === 'linear-gauge'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [animations]="animations"
        [min]="gaugeMin"
        [max]="gaugeMax"
        [value]="gaugeValue"
        [previousValue]="gaugePreviousValue"
        [units]="gaugeUnits"
        (select)="select($event)"
      >
      </ngx-charts-linear-gauge>
      <div *ngIf="chartType === 'plot-demo'">
        <ngx-input
          type="text"
          [required]="true"
          [(ngModel)]="mathText"
          (change)="mathFunction = getFunction(mathText); plotData = generatePlotData()"
        >
        </ngx-input>
        <ngx-charts-line-chart
          style="position: static; display: inline-block; transform: none;"
          [view]="view"
          class="chart-container"
          [scheme]="colorScheme"
          [schemeType]="schemeType"
          [results]="plotData"
          [animations]="animations"
          [legend]="false"
          [legendTitle]="legendTitle"
          [legendPosition]="legendPosition"
          (legendLabelClick)="onLegendLabelClick($event)"
          [gradient]="gradient"
          [xAxis]="showXAxis"
          [yAxis]="showYAxis"
          [showXAxisLabel]="false"
          [showYAxisLabel]="false"
          [xAxisLabel]="'angle'"
          [yAxisLabel]="'radius'"
          [autoScale]="autoScale"
          [timeline]="timeline"
          [showGridLines]="showGridLines"
          [curve]="curves['Cardinal']"
          [rangeFillOpacity]="rangeFillOpacity"
          [roundDomains]="roundDomains"
          [tooltipDisabled]="tooltipDisabled"
          [trimXAxisTicks]="trimXAxisTicks"
          [trimYAxisTicks]="trimYAxisTicks"
          [maxXAxisTickLength]="maxXAxisTickLength"
          [maxYAxisTickLength]="maxYAxisTickLength"
          (select)="select($event)"
        >
        </ngx-charts-line-chart>
        <p></p>
        <ngx-charts-polar-chart
          style="position: static; display: inline-block; transform: none;"
          [view]="view"
          class="chart-container"
          [scheme]="colorScheme"
          [schemeType]="schemeType"
          [results]="plotData"
          [animations]="animations"
          [legend]="false"
          [legendTitle]="legendTitle"
          [legendPosition]="legendPosition"
          (legendLabelClick)="onLegendLabelClick($event)"
          [gradient]="gradient"
          [xAxis]="false"
          [yAxis]="true"
          [showXAxisLabel]="false"
          [showYAxisLabel]="false"
          [xAxisLabel]="'angle'"
          [yAxisLabel]="'radius'"
          [autoScale]="autoScale"
          [showGridLines]="showGridLines"
          [rangeFillOpacity]="rangeFillOpacity"
          [roundDomains]="roundDomains"
          [tooltipDisabled]="tooltipDisabled"
          [showSeriesOnHover]="showSeriesOnHover"
          [curve]="curves['Cardinal Closed']"
          [trimYAxisTicks]="trimYAxisTicks"
          [maxYAxisTickLength]="maxYAxisTickLength"
          (select)="select($event)"
          (activate)="activate($event)"
          (deactivate)="deactivate($event)"
        >
        </ngx-charts-polar-chart>
      </div>
      <div
        class="chart-container"
        *ngIf="chartType === 'tree-map-demo'"
        style="padding: 10px; border: 1px solid white;"
      >
        <h4 style="text-align: center;">
          <button class="btn btn-link" [class.active]="sumBy === 'Size'" (click)="treemapProcess('Size')">
            By Size
          </button>
          <button class="btn btn-link" [class.active]="sumBy === 'Count'" (click)="treemapProcess('Count')">
            By Count
          </button>
        </h4>
        <div style="height: 17px; font-size: 12px;">
          <ng-container *ngFor="let item of treemapPath; let last = last">
            <button class="btn btn-link" [class.active]="last" [disabled]="last" (click)="treemapSelect(item)">
              {{ item.name }} ({{ item.value }})
            </button>
            <span *ngIf="!last"> / </span>
          </ng-container>
        </div>
        <ngx-charts-tree-map
          [view]="view"
          (legendLabelClick)="onLegendLabelClick($event)"
          [scheme]="colorScheme"
          [results]="treemap"
          [animations]="animations"
          [tooltipDisabled]="tooltipDisabled"
          [gradient]="gradient"
          (select)="treemapSelect($event)"
          (activate)="activate($event)"
          (deactivate)="deactivate($event)"
        >
        </ngx-charts-tree-map>
      </div>
      <div
        class="chart-container"
        *ngIf="chartType === 'bubble-chart-interactive-demo'"
        style="padding: 10px; border: 1px solid white;"
      >
        <div>
          <span class="active">{{ getBubbleInteractiveTitle() }}</span>
          <button
            *ngIf="bubbleShowDrilldownResetLink()"
            class="btn btn-link"
            style="float: right;"
            (click)="onClickResetBubbleInteractiveDrill()"
          >
            <span>Go Back</span>
          </button>
        </div>
        <ngx-charts-bubble-chart-interactive
          [view]="view"
          [results]="bubbleDemoTempData"
          [animations]="animations"
          [showGridLines]="showGridLines"
          [legend]="showLegend"
          [legendTitle]="legendTitle"
          [xAxis]="showXAxis"
          [yAxis]="showYAxis"
          [showXAxisLabel]="showXAxisLabel"
          [showYAxisLabel]="showYAxisLabel"
          [xAxisLabel]="xAxisLabel"
          [yAxisLabel]="yAxisLabel"
          [autoScale]="autoScale"
          [scheme]="colorScheme"
          [schemeType]="schemeType"
          [roundDomains]="roundDomains"
          [tooltipDisabled]="tooltipDisabled"
          [minRadius]="minRadius"
          [maxRadius]="maxRadius"
          (select)="onSelectBubbleInteractivePoint($event)"
        >
        </ngx-charts-bubble-chart-interactive>
      </div>
      <ngx-charts-line-chart
        *ngIf="chartType === 'line-reference-lines'"
        [view]="view"
        class="chart-container"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="multi"
        [animations]="animations"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        (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]="tooltipDisabled"
        [showRefLines]="showRefLines"
        [showRefLabels]="showRefLabels"
        [referenceLines]="refLines"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
      </ngx-charts-line-chart>
      <ngx-charts-bar-vertical
        *ngIf="chartType === 'tooltip-templates'"
        class="chart-container"
        [view]="view"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [customColors]="customColors"
        [results]="single"
        [animations]="animations"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [legend]="showLegend"
        [legendTitle]="legendTitle"
        [legendPosition]="legendPosition"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [tooltipDisabled]="tooltipDisabled"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [showGridLines]="showGridLines"
        [barPadding]="barPadding"
        [roundDomains]="roundDomains"
        [trimXAxisTicks]="trimXAxisTicks"
        [trimYAxisTicks]="trimYAxisTicks"
        [maxXAxisTickLength]="maxXAxisTickLength"
        [maxYAxisTickLength]="maxYAxisTickLength"
        (select)="select($event)"
        (legendLabelClick)="onLegendLabelClick($event)"
        (activate)="activate($event)"
        (deactivate)="deactivate($event)"
      >
        <ng-template #tooltipTemplate let-model="model">
          <h1>
            {{ getFlag(model.name) }}
          </h1>
          <h2>{{ model.name }}: {{ model.value }}</h2>
        </ng-template>
      </ngx-charts-bar-vertical>
      <ngx-charts-sparkline
        *ngIf="chartType === 'sparkline'"
        [view]="[100, 50]"
        class="chart-container"
        [scheme]="'flame'"
        [results]="sparklineData"
        [animations]="animations"
        [curve]="curve"
      >
      </ngx-charts-sparkline>
      <ngx-charts-timeline-filter-bar-chart
        *ngIf="chartType === 'timeline-filter-bar-chart-demo'"
        [view]="view"
        class="chart-container"
        [scheme]="colorScheme"
        [schemeType]="schemeType"
        [results]="timelineFilterBarData"
        [animations]="animations"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [showXAxisLabel]="false"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="'Executions'"
        [showGridLines]="showGridLines"
        [noBarWhenZero]="noBarWhenZero"
        (onFilter)="onFilter($event)"
      >
      </ngx-charts-timeline-filter-bar-chart>
    </div>
    <ngx-charts-bar-vertical-stacked
      *ngIf="chartType === 'bar-vertical-stacked-negative'"
      class="chart-container"
      [view]="view"
      [scheme]="colorScheme"
      [schemeType]="schemeType"
      [results]="fiscalYearReport"
      [animations]="animations"
      [gradient]="gradient"
      [tooltipDisabled]="tooltipDisabled"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [legendTitle]="legendTitle"
      [legendPosition]="legendPosition"
      (legendLabelClick)="onLegendLabelClick($event)"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="'Fiscal Year Report'"
      [showGridLines]="showGridLines"
      [barPadding]="barPadding"
      [roundDomains]="roundDomains"
      [noBarWhenZero]="noBarWhenZero"
      [yScaleMax]="yScaleMax"
      [showDataLabel]="showDataLabel"
      [trimXAxisTicks]="trimXAxisTicks"
      [trimYAxisTicks]="trimYAxisTicks"
      [maxXAxisTickLength]="maxXAxisTickLength"
      [maxYAxisTickLength]="maxYAxisTickLength"
      (select)="select($event)"
      (activate)="activate($event)"
      (deactivate)="deactivate($event)"
    >
    </ngx-charts-bar-vertical-stacked>
    <ngx-charts-bar-horizontal-stacked
      *ngIf="chartType === 'bar-horizontal-stacked-negative'"
      class="chart-container"
      [view]="view"
      [scheme]="colorScheme"
      [schemeType]="schemeType"
      [results]="fiscalYearReport"
      [animations]="animations"
      [gradient]="gradient"
      [tooltipDisabled]="tooltipDisabled"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [showYAxisLineRight]=true
      [showYAxisLineLeft]=true
      [showXAxisLineTop]=true
      [showXAxisLineBottom]=true
      [legend]="showLegend"
      [legendTitle]="legendTitle"
      [legendPosition]="legendPosition"
      (legendLabelClick)="onLegendLabelClick($event)"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="'Fiscal Year Report'"
      [showGridLines]="showGridLines"
      [barPadding]="barPadding"
      [roundDomains]="roundDomains"
      [noBarWhenZero]="noBarWhenZero"
      [showDataLabel]="showDataLabel"
      [trimXAxisTicks]="trimXAxisTicks"
      [trimYAxisTicks]="trimYAxisTicks"
      [maxXAxisTickLength]="maxXAxisTickLength"
      [maxYAxisTickLength]="maxYAxisTickLength"
      (select)="select($event)"
      (activate)="activate($event)"
      (deactivate)="deactivate($event)"
    >
    </ngx-charts-bar-horizontal-stacked>
  </div>
  <div class="sidebar">
    <h1>
      Ngx-<strong>Charts</strong>
      <small class="version">{{ version }}</small>
      <small class="subtitle">Angular D3 Chart Framework</small>
    </h1>
    <div style="margin:20px">
      <h3>Chart Type</h3>
      <select [ngModel]="chartType" (ngModelChange)="selectChart($event)">
        <ng-template ngFor let-group [ngForOf]="chartGroups">
          <optgroup [label]="group.name">
            <option *ngFor="let chart of group.charts" [value]="chart.selector">{{ chart.name }}</option>
          </optgroup>
        </ng-template>
      </select>

      <h3>Theme</h3>
      <select [ngModel]="theme" (ngModelChange)="theme = $event"
        >>
        <option [value]="'light'">Light</option>
        <option [value]="'dark'">Dark</option>
      </select>

      <h3 (click)="dataVisable = !dataVisable" style="cursor: pointer">
        <span [class.arrow-down]="dataVisable" [class.arrow-right]="!dataVisable"> </span>
        <strong>Data</strong>
      </h3>
      <div [hidden]="!dataVisable" style="margin-left: 10px;">
        <pre *ngIf="chart.inputFormat === 'singleSeries'">{{ single | json }}</pre>
        <pre *ngIf="chart.inputFormat === 'groupedStackedBarChart'">{{ groupedStacked | json }}</pre>
        <pre *ngIf="chart.inputFormat === 'multiSeries' && !linearScale">{{ multi | json }}</pre>
        <pre *ngIf="chart.inputFormat === 'multiSeriesNegative' && !linearScale">{{ fiscalYearReport | json }}</pre>
        <pre *ngIf="chart.inputFormat === 'multiSeries' && linearScale && !range">{{ dateData | json }}</pre>
        <pre *ngIf="chart.inputFormat === 'multiSeries' && linearScale && range">{{ dateDataWithRange | json }}</pre>
        <pre *ngIf="chart.inputFormat === 'bubble'">{{ bubble | json }}</pre>
        <pre *ngIf="chart.inputFormat === 'bubbleInteractive'">{{ bubbleDemoTempData | json }}</pre>
        <pre *ngIf="chart.inputFormat === 'comboChart'">{{ barChart | json }}</pre>
        <pre *ngIf="chart.inputFormat === 'comboChart'">{{ lineChartSeries | json }}</pre>
        <pre *ngIf="chart.inputFormat === 'timelineFilter'">{{timelineFilterBarData | json}}</pre>
        <div>
          <label>
            <input type="checkbox" [checked]="realTimeData" (change)="realTimeData = $event.target.checked" />
            Real-time
          </label>

          <label *ngIf="chartType === 'line-chart'">
            <br />
            <input type="checkbox" [checked]="range" (change)="range = $event.target.checked" />
            Show min and max values
          </label>
        </div>
      </div>
      <div>
        <h3 (click)="dimVisiable = !dimVisiable" style="cursor: pointer">
          <span [class.arrow-down]="dimVisiable" [class.arrow-right]="!dimVisiable"> </span>
          <strong>Dimensions</strong>
        </h3>
        <div [hidden]="!dimVisiable" style="margin-left: 10px;">
          <label>
            <input type="checkbox" [checked]="fitContainer" (change)="toggleFitContainer($event.target.checked)" />
            Fit Container
          </label>
          <br />
          <div *ngIf="!fitContainer">
            <label>Width:</label><br />
            <input type="number" [(ngModel)]="width" /><br />
            <label>Height:</label><br />
            <input type="number" [(ngModel)]="height" /><br /><br />
            <button class="btn btn-primary" (click)="applyDimensions()">Apply dimensions</button>
          </div>
        </div>
      </div>
      <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
        <span [class.arrow-down]="colorVisible" [class.arrow-right]="!colorVisible"> </span>
        <strong>Color Scheme</strong>
      </h3>
      <select
        [hidden]="!colorVisible"
        style="margin-left: 10px;"
        [ngModel]="selectedColorScheme"
        (ngModelChange)="setColorScheme($event)"
      >
        <option *ngFor="let scheme of colorSets" [value]="scheme.name">{{ scheme.name }}</option>
      </select>

      <select
        *ngIf="chart.options.includes('schemeType')"
        [hidden]="!colorVisible"
        style="margin-left: 10px;"
        [ngModel]="schemeType"
        (ngModelChange)="schemeType = $event"
      >
        <option value="ordinal">Ordinal</option>
        <option value="linear">Linear</option>
      </select>

      <div [hidden]="!colorVisible || !range" style="margin-left: 10px;">
        <div>
          <label>Range fill color opacity (0.0 - 1.0):</label><br />
          <input type="number" [(ngModel)]="rangeFillOpacity" /><br />
        </div>
      </div>

      <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
        <span [class.arrow-down]="optsVisible" [class.arrow-right]="!optsVisible"> </span>
        <strong>Options</strong>
      </h3>
      <div [hidden]="!optsVisible" style="margin-left: 10px;">
        <div *ngIf="chart.options.includes('animations')">
          <label>
            <input type="checkbox" [checked]="animations" (change)="animations = $event.target.checked" />
            Animations
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('showXAxis')">
          <label>
            <input type="checkbox" [checked]="showXAxis" (change)="showXAxis = $event.target.checked" />
            Show X Axis
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('showRefLabels')">
          <label>
            <input type="checkbox" [checked]="showRefLabels" (change)="showRefLabels = $event.target.checked" />
            Show Reference Labels
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('showRefLines')">
          <label>
            <input type="checkbox" [checked]="showRefLines" (change)="showRefLines = $event.target.checked" />
            Show Reference Lines
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('showYAxis')">
          <label>
            <input type="checkbox" [checked]="showYAxis" (change)="showYAxis = $event.target.checked" />
            Show Y Axis
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('showGridLines')">
          <label>
            <input type="checkbox" [checked]="showGridLines" (change)="showGridLines = $event.target.checked" />
            Show Grid Lines
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('roundDomains')">
          <label>
            <input type="checkbox" [checked]="roundDomains" (change)="roundDomains = $event.target.checked" />
            Round Domains
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('rotateXAxisTicks')">
          <label>
            <input type="checkbox" [checked]="rotateXAxisTicks" (change)="rotateXAxisTicks = $event.target.checked" />
            Rotate X Axis Ticks
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('gradient')">
          <label>
            <input type="checkbox" [checked]="gradient" (change)="gradient = $event.target.checked" />
            Use Gradients
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('noBarWhenZero')">
          <label>
            <input type="checkbox" [checked]="noBarWhenZero" (change)="noBarWhenZero = $event.target.checked">
            Hide bar if value is 0
          </label> <br/>
        </div>        
        <div *ngIf="chart.options.includes('showLegend')">
          <label>
            <input type="checkbox" [checked]="showLegend" (change)="showLegend = $event.target.checked" />
            Show Legend
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('legendAdvanced')">
          <label>
            <input type="checkbox" [checked]="legendAdvanced" (change)="legendAdvanced = $event.target.checked" />
            Advanced Legend
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('showDataLabel')">
          <label>
            <input type="checkbox" [checked]="showDataLabel" (change)="showDataLabel = $event.target.checked" />
            Show Data Label
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('roundEdges')">
          <label>
            <input type="checkbox" [checked]="roundEdges" (change)="roundEdges = $event.target.checked" />
            Round Bar Edges
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('legendTitle')">
          <label>Legend Title:</label><br />
          <input type="text" [(ngModel)]="legendTitle" /><br />
        </div>
        <div *ngIf="chart.options.includes('legendPosition')">
          <label>Legend Position:</label><br />
          <select style="margin-left: 10px;" [(ngModel)]="legendPosition">
            <option value="right">Right</option>
            <option value="below">Below</option> </select
          ><br />
        </div>
        <div *ngIf="chart.options.includes('tooltipDisabled')">
          <label>
            <input type="checkbox" [checked]="tooltipDisabled" (change)="tooltipDisabled = $event.target.checked" />
            Disable tooltip
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('showText')">
          <label>
            <input type="checkbox" [checked]="showText" (change)="showText = $event.target.checked" />
            Show Text
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('showXAxisLabel')">
          <label>
            <input type="checkbox" [checked]="showXAxisLabel" (change)="showXAxisLabel = $event.target.checked" />
            Show X Axis Label
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('xAxisLabel')">
          <label>X Axis Label:</label><br />
          <input type="text" [(ngModel)]="xAxisLabel" /><br />
        </div>
        <div *ngIf="chart.options.includes('showYAxisLabel')">
          <label>
            <input type="checkbox" [checked]="showYAxisLabel" (change)="showYAxisLabel = $event.target.checked" />
            Show Y Axis Label
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('yAxisLabel')">
          <label>Y Axis Label:</label><br />
          <input type="text" [(ngModel)]="yAxisLabel" /><br />
        </div>
        <div *ngIf="chart.options.includes('showLabels')">
          <label>
            <input type="checkbox" [checked]="showLabels" (change)="showLabels = $event.target.checked" />
            Show Labels
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('trimXAxisTicks')">
          <label>
            <input type="checkbox" [checked]="trimXAxisTicks" (change)="trimXAxisTicks = $event.target.checked" />
            Trim X Axis Ticks
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('maxXAxisTickLength')">
          <label>Max X Axis Tick Length:</label><br />
          <input type="text" [(ngModel)]="maxXAxisTickLength" /><br />
        </div>
        <div *ngIf="chart.options.includes('trimYAxisTicks')">
          <label>
            <input type="checkbox" [checked]="trimYAxisTicks" (change)="trimYAxisTicks = $event.target.checked" />
            Trim Y Axis Ticks
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('maxYAxisTickLength')">
          <label>Max Y Axis Tick Length:</label><br />
          <input type="text" [(ngModel)]="maxYAxisTickLength" /><br />
        </div>
        <div *ngIf="chart.options.includes('barWidth')">
          <label>Max Bar Width:</label><br />
          <input type="text" [(ngModel)]="barWidth" /><br />
        </div>
        <div *ngIf="chart.options.includes('doughnut')">
          <label>
            <input type="checkbox" [checked]="doughnut" (change)="doughnut = $event.target.checked" />
            Doughnut
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('showDoughnutSum')">
          <label>
            <input type="checkbox" [checked]="showDoughnutSum" (change)="showDoughnutSum = $event.target.checked" />
            Show Doughnut Sum
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('arcWidth') && doughnut">
          <label>Arc width (fraction of radius):</label><br />
          <input type="number" [disabled]="!doughnut" [(ngModel)]="arcWidth" max="1" min="0" step="0.01" /><br />
        </div>
        <div *ngIf="chart.options.includes('explodeSlices') && !doughnut">
          <label>
            <input type="checkbox" [checked]="explodeSlices" (change)="explodeSlices = $event.target.checked" />
            Explode Slices
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('autoScale')">
          <label>
            <input type="checkbox" [checked]="autoScale" (change)="autoScale = $event.target.checked" />
            Auto Scale
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('timeline')">
          <label>
            <input type="checkbox" [checked]="timeline" (change)="timeline = $event.target.checked" />
            Timeline
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('curve')">
          <label>Line Interpolation</label>
          <select [(ngModel)]="curveType" (ngModelChange)="curve = getInterpolationType($event)">
            <option *ngFor="let interpolationType of interpolationTypes" [value]="interpolationType">
              {{ interpolationType }}
            </option>
          </select>
        </div>
        <div *ngIf="chart.options.includes('curveClosed')">
          <label>Line Interpolation</label>
          <select [(ngModel)]="closedCurveType" (ngModelChange)="closedCurve = getInterpolationType($event)">
            <option *ngFor="let interpolationType of closedInterpolationTypes" [value]="interpolationType">
              {{ interpolationType }}
            </option>
          </select>
        </div>
        <div *ngIf="chart.options.includes('min')">
          <label>Min value:</label><br />
          <input type="number" [(ngModel)]="gaugeMin" /><br />
        </div>
        <div *ngIf="chart.options.includes('max')">
          <label>Max value:</label><br />
          <input type="number" [(ngModel)]="gaugeMax" /><br />
        </div>
        <div *ngIf="chart.options.includes('innerPadding')">
          <label>Inner padding value:</label><br />
          <input type="text" [(ngModel)]="innerPadding" min="0" step="1" /><br />
        </div>
        <div *ngIf="chart.options.includes('barPadding')">
          <label>Padding between bars:</label><br />
          <input type="number" [(ngModel)]="barPadding" min="0" step="1" /><br />
        </div>
        <div *ngIf="chart.options.includes('groupPadding')">
          <label>Padding between groups:</label><br />
          <input type="number" [(ngModel)]="groupPadding" min="0" step="1" /><br />
        </div>
        <div *ngIf="chart.options.includes('value')">
          <label>Value:</label><br />
          <input type="number" [(ngModel)]="gaugeValue" /><br />
        </div>
        <div *ngIf="chart.options.includes('previousValue')">
          <label>Previous value:</label><br />
          <input type="number" [(ngModel)]="gaugePreviousValue" /><br />
        </div>
        <div *ngIf="chart.options.includes('angleSpan')">
          <label>Angle span:</label><br />
          <input type="number" [(ngModel)]="gaugeAngleSpan" /><br />
        </div>
        <div *ngIf="chart.options.includes('startAngle')">
          <label>Start Angle:</label><br />
          <input type="number" [(ngModel)]="gaugeStartAngle" /><br />
        </div>
        <div *ngIf="chart.options.includes('showAxis')">
          <label>
            <input type="checkbox" [checked]="gaugeShowAxis" (change)="gaugeShowAxis = $event.target.checked" />
            Show Axis
          </label>
          <br />
        </div>
        <div *ngIf="chart.options.includes('largeSegments')">
          <label>Number of large segments:</label><br />
          <input type="number" [(ngModel)]="gaugeLargeSegments" /><br />
        </div>
        <div *ngIf="chart.options.includes('smallSegments')">
          <label>Number of small segments:</label><br />
          <input type="number" [(ngModel)]="gaugeSmallSegments" /><br />
        </div>
        <div *ngIf="chart.options.includes('units')">
          <label>Units:</label><br />
          <input type="text" [(ngModel)]="gaugeUnits" /><br />
        </div>
        <div *ngIf="chart.options.includes('margin')">
          <label>
            <input type="checkbox" [checked]="margin" (change)="margin = $event.target.checked" />
            Show Margin
          </label>
          <br />
        </div>

        <div *ngIf="chart.options.includes('margin') && margin">
          <label>Top:</label><input type="number" [(ngModel)]="marginTop" /><br />
          <label>Right:</label><input type="number" [(ngModel)]="marginRight" /><br />
          <label>Bottom:</label><input type="number" [(ngModel)]="marginBottom" /><br />
          <label>Left:</label><input type="number" [(ngModel)]="marginLeft" /><br />
        </div>

        <div *ngIf="chart.options.includes('minRadius')">
          <label>Minimum Radius:</label><input type="number" [(ngModel)]="minRadius" />
        </div>

        <div *ngIf="chart.options.includes('maxRadius')">
          <label>Maximum Radius:</label><input type="number" [(ngModel)]="maxRadius" />
        </div>

        <div *ngIf="chart.options.includes('xScaleMin')">
          <div *ngIf="chartType !== 'bubble-chart'">
            <label></label><br />
            <ngx-date-time [inputType]="'datetime'" label="Minimum X-Scale value" [(ngModel)]="xScaleMin">
            </ngx-date-time>
          </div>
          <div *ngIf="chartType === 'bubble-chart'">
            <label>Minimum X-Scale value</label><br />
            <input type="number" [(ngModel)]="xScaleMin" /><br />
          </div>
        </div>

        <div *ngIf="chart.options.includes('xScaleMax')">
          <div *ngIf="!chartType.startsWith('bar-horizontal') && chartType !== 'bubble-chart'">
            <ngx-date-time
              *ngIf="!chartType.startsWith('bar-horizontal')"
              [inputType]="'datetime'"
              label="Maximum X-Scale value"
              [(ngModel)]="xScaleMax"
            >
            </ngx-date-time>
          </div>
          <div *ngIf="chartType.startsWith('bar-horizontal') || chartType === 'bubble-chart'">
            <label>Maximum X-Scale value</label><br />
            <input type="number" [(ngModel)]="xScaleMax" /><br />
          </div>
        </div>

        <div *ngIf="chart.options.includes('yScaleMin')">
          <label>Minimum Y-Scale value</label><br />
          <input type="number" [(ngModel)]="yScaleMin" /><br />
        </div>
        <div *ngIf="chart.options.includes('yScaleMax')">
          <label>Maximum Y-Scale value</label><br />
          <input type="number" [(ngModel)]="yScaleMax" /><br />
        </div>
      </div>
      <h3><a href="https://swimlane.gitbooks.io/ngx-charts/content/" target="_blank">Documentation</a></h3>
    </div>
  </div>
</main>