@stackline/angular-highcharts

<chart
  [type]="'StockChart'"
  [options]="binanceOptions"
  (create)="onBinanceChartCreate($event)"
></chart>

binanceSymbol = 'BNBUSDT';
binanceInterval = '1s';
binanceTheme = 'light';
binanceOptions: any = this.createBinanceOptions();

onBinanceChartCreate(chart: any) {
  this.binanceChart = chart;
}

private applyLiveCandle(candle: any) {
  var ohlc = this.binanceChart.series[0];
  var volume = this.binanceChart.series[1];
  ohlc.addPoint([candle.time, candle.open, candle.high, candle.low, candle.close], false, true);
  volume.addPoint([candle.time, candle.volume], true, true);
}

.chart-frame {
  width: 100%;
  min-height: 420px;
  border: 1px solid #d9e5ee;
  border-radius: 8px;
  background: #fff;
}

<chart [options]="liveTreemapOptions"></chart>

private createLiveTreemapOptions() {
  return {
    chart: { type: 'treemap', height: 420 },
    title: { text: 'Live crypto treemap' },
    colorAxis: {
      minColor: '#d45d35',
      maxColor: '#1b8c6a'
    },
    tooltip: {
      outside: false,
      pointFormat: '<b>{point.name}</b><br>Market cap: {point.value}'
    },
    series: [{
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      data: this.cryptoTreemapRowsForChart()
    }]
  };
}

.crypto-treemap-chart .highcharts-data-label {
  pointer-events: none;
}

<chart [options]="liveSplineOptions"></chart>

private createLiveSplineOptions() {
  return {
    chart: { type: 'spline', height: 320 },
    title: { text: 'Live price heartbeat spline' },
    xAxis: { type: 'datetime' },
    yAxis: {
      title: { text: 'Normalized pulse' },
      plotLines: [{ value: 100, color: '#94a3b8', width: 1 }]
    },
    plotOptions: {
      spline: { animation: false, marker: { enabled: false } }
    },
    series: this.marketHeartbeatSeries()
  };
}

chart {
  display: block;
  width: 100%;
  min-height: 320px;
}