How to use @swimlane/ngx-charts - 10 common examples

this.xScaleMin,
        this.xScaleMax,
        this.yScaleMin,
        this.yScaleMax
      );
    }

    // update custom colors to use error bars
    this.customColors.push(
      {name: 'error', value: this.errorBarColor}
    );

    this.combinedSeries = this.results;
    super.update();

    this.dims = calculateViewDimensions({
      height: this.height,
      legendType: this.schemeType,
      margins: this.margin,
      showLegend: this.legend,
      showXAxis: this.xAxis,
      showXLabel: this.showXAxisLabel,
      showYAxis: this.yAxis,
      showYLabel: this.showYAxisLabel,
      width: this.width,
      xAxisHeight: this.xAxisHeight,
      yAxisWidth: this.yAxisWidth,
    });

    if (!this.yAxis) {
      this.legendSpacing = 0;
    } else if (this.showYAxisLabel && this.yAxis) {

import {colorSets} from '@swimlane/ngx-charts/release/utils';
import * as shape from 'd3-shape';
import {DashboardChart} from '../../models/dashboard-chart';
import {dashboardChartTypes} from './dashboardChartTypes';

export const defaultOptions = {
  view: [716, 337],
  id: 0,
  showCommon: true,
  threshold: 0,
  mostLoaded: 1,
  // colorScheme:  {
  //   domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  // },
  colorScheme: {...colorSets.find(s => s.name === 'cool')},
  schemeType: 'ordinal',
  showLegend: true,
  legendTitle: 'Legend',
  gradient: false,
  showXAxis: true,
  showYAxis: true,
  showXAxisLabel: true,
  showYAxisLabel: true,
  yAxisLabel: '',
  xAxisLabel: '',
  yScaleMax: 100,
  yScaleMin: 0,
  autoScale: true,
  showGridLines: true,
  rangeFillOpacity: 0.5,
  roundDomains: false,

.map((d, i) => {
        if (typeof d.y === 'undefined' || typeof d.x === 'undefined') {
          return null;
        }

        const y = d.y;
        const x = d.x;
        const r = d.r;

        const radius = this.rScale(r || 1);
        const borderColor = d.borderColor || null;

        const tooltipLabel = Swimlane.formatLabel(d.name);

        const cx = this.xScale(x);
        const cy = this.yScale(y);

        const color = d.color ||
          this.colors.scaleType === 'linear'
            ? this.colors.getColor(r)
            : this.colors.getColor(seriesName);

        if (!d.opacity) {
          d.opacity = 1;
        }

        const opacity = isActive ? d.opacity : d.opacity / 3;

        // error bar calculations

setColors(): void {
    let domain;
    if (this.schemeType === 'ordinal') {
      domain = this.xDomain;
    } else {
      domain = this.yDomain;
    }
    this.colors = new ColorHelper(this.scheme, this.schemeType, domain, this.customColors);
    this.colorsLine = new ColorHelper(this.colorSchemeLine, this.schemeType, domain, this.customColors);
  }

setColors(): void {
    let domain;
    if (this.schemeType === 'ordinal') {
      domain = this.seriesDomain;
    } else {
      domain = this.yDomain;
    }

    this.colors = new ColorHelper(this.scheme, this.schemeType, domain, this.customColors);
  }

setColors(): void {
    let domain;
    if (this.schemeType === 'ordinal') {
      domain = this.xDomain;
    } else {
      domain = this.yDomain;
    }
    this.colors = new ColorHelper(this.scheme, this.schemeType, domain, this.customColors);
    this.colorsLine = new ColorHelper(this.colorSchemeLine, this.schemeType, domain, this.customColors);
    this.colorsExtra = new ColorHelper(this.scheme, this.schemeType, domain, this.customColors);
  }

setColors(): void {
    this.colors = new ColorHelper(this.scheme, 'ordinal', this.seriesDomain, this.customColors);
  }

setColors(): void {
    this.colors = new ColorHelper(this.scheme, 'ordinal', this.domain, []);
  }

setColors(): void {
    let domain;
    if (this.schemeType === 'ordinal') {
      domain = this.xDomain;
    } else {
      domain = this.yDomain;
    }
    this.colors = new ColorHelper(this.scheme, this.schemeType, domain, this.customColors);
    this.colorsLine = new ColorHelper(this.colorSchemeLine, this.schemeType, domain, this.customColors);
    this.colorsExtra = new ColorHelper(this.scheme, this.schemeType, domain, this.customColors);
  }

this.zone.run(() => {
      this.dims = calculateViewDimensions({
        width: this.width,
        height: this.height,
        margins: this.margin,
        showLegend: this.legend
      });

      this.seriesDomain = this.getSeriesDomain();
      this.setColors();
      this.legendOptions = this.getLegendOptions();

      this.createGraph();
      this.updateTransform();
      this.initialized = true;
    });
  }