mk.developer
Posts: 83
Joined: Wed Mar 17, 2021 6:07 pm

Stock chart date filter overlaps

I am using an Angular application to show a stock chart. Somehow the date filter overlaps with the menu icon when it renders for the first time.

Please see below screenshot:
Capture.JPG
Capture.JPG (56.93 KiB) Viewed 676 times

As soon as I change anything on the chart (e.g. enable / disable legend, change range), it formats it properly.

How can I fix it?

HTML Code:

Code: Select all

<highcharts-chart [Highcharts]="Highcharts" [(update)]="updateFlag" style="width: 100%; height: 100%; display: block;"
        [constructorType]="'stockChart'" [options]="chartOptions">
</highcharts-chart>

Type Script:

Code: Select all

export class Component implements OnInit {

  @Input() set funds(value: Fund[]) {
    
    for (let index = 0; index < value.length; index++) {
        this.loadChart(index, value[index]);
    }
    this.updateFlag = true;
  }

  updateFlag = false;

  Highcharts: typeof Highcharts = Highcharts;

  chartOptions: any = {
    credits: {
      enabled: false
    },
    chart: {
      type: 'line',
      zoomType: 'x'
    },
    title: {
      text: null,
    },
    subtitle: {
      text: null,
    },
    xAxis: {
      type: 'datetime'
    },
    yAxis: {
      title: {
        text: ''
      },
      labels: {
        formatter: function () {
          return (this.value * 100).toFixed(2);
        }
      }
    },
    legend: {
      enabled: true
    },
    tooltip: {
      headerFormat: '{point.x:%d/%m/%Y}',
      pointFormatter: function () {
        return '<b>' + this.series.name + '</b>: ' + Highcharts.numberFormat(this.y * 100, 2);
      }
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        }
      }
    },
    series: [{},{}, {}]
  };

  
  constructor() { }

  ngOnInit(): void {
  }

  loadChart(index: number, fund: Fund) {

    let data = fund.data.map((fp) => {
      return [new Date(fp.date).valueOf(), fp.value]
    });
    
    let series = {
      type: 'line',
      name: fund.name,
      data: data,
      visible: true
    };

    this.chartOptions.series[index] = series;
  }
}

User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Stock chart date filter overlaps

Hi,
Thanks for your message.

Could you reproduce this behavior with this simple example?
https://stackblitz.com/edit/highcharts- ... onent.html

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Stock”