Angular chart.js chart scale

Question

I'm using chart.js in angular to achieve some results in a chart. What am I looking for is to have a certain number of number that dinamically change every 50ms. I've done this and here's the plunker:

https://plnkr.co/edit/GEu6seOu1fbh9dnuSjMV?p=preview

Package.json :

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "chart.js": "^2.7.2",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.5",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "@types/chart.js": "2.7.19",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

Component.ts :

import { Component, OnDestroy, ElementRef, OnInit, AfterViewInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Chart, ChartPoint } from 'chart.js';

import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/takeWhile';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
    public isAlive = true;
    public chart: Chart;
    public data = [];

    canvas: any;
    ctx: any;

    public ngOnInit(): void {

        Observable.interval(50)
            .takeWhile(() => this.isAlive)
            .subscribe(
                succ => {
                    if (!this.chart) {
                        return;
                    }

                    if (this.data.length > 200) {
                        this.data.splice(0, 1);
                        this.chart.data.labels.splice(0, 1);
                    }

                    this.data.push(new Date().getSeconds());
                    this.chart.data.labels.push(new Date().getSeconds().toString() + '-');
                    this.chart.update();
                }
            );
    }

    public ngAfterViewInit(): void {
        if (!this.chart) {
            this.canvas = document.getElementById('myChart');
            this.ctx = this.canvas.getContext('2d');
            this.chart = new Chart(this.ctx, {
                type: 'line',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: this.data,
                        fill: false,
                        showLine: true,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)'
                        ],
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: false,
                    title: {
                        display: true,
                        text: 'Chart.js - Fixed X and Y Axis',
                    },
                    tooltips: {
                        enabled: false
                    },
                    elements: {
                        point: {
                            radius: 0
                        }
                    },
                    scales: {

                        xAxes: [{
                            display: false,
                            ticks: {

                            }
                        }],
                        yAxes: [{
                            ticks: {
                                min: 0,
                                max: 60
                            }
                        }]
                    }
                }
            });

            for (let i = 0; i < 200; i++) {
                this.data.push(new Date().getSeconds());
                this.chart.data.labels.push(new Date().getSeconds().toString() + '-');
            }
            this.chart.update();
        }
    }
}

Component.html :

<canvas id="myChart" width="800" height="400"></canvas>

Module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The problem is that I've to pre-render (in this case) 200 elements because, in this way, the chart will set the right scale. If I don't put before this code :

for (let i = 0; i < 200; i++) {
                    this.data.push(new Date().getSeconds());
                    this.chart.data.labels.push(new Date().getSeconds().toString() + '-');
                }
                this.chart.update();

You will see the chart adjusting the scale unitil the if-statement that check if the array contains more than 200 elements is fired. What am I try to achieve is to have the right scale without first looping 200 times to put in the data "fake" elements.

Does anyone know the right way?

Thank you.

Answer 1

edit: In light of question edits this answer is not relevant.

I'm not sure If I fully understand your question, but I was having a problem with the scaling animation in angular-charts and the solution I found while checking the code behind the examples on the angular-chart site ( http://jtblin.github.io/angular-chart.js/examples/app.js ) was to set animation duration to 0 in the options. In Angular, using angular-charts this can be done in the controller using the chart-options directive as seen in the external linked code:

Controller

app.controller("ctrl",['$scope', function($scope){
  $scope.options = {animation: {duration: 0}};
}])

View

<canvas id="line" class="chart chart-line"
  chart-options="options"
></canvas>

Or globally using ChartJsProvider in the config method of the app:

app.config(function(ChartJsProvider) {
    ChartJsProvider.setOptions({
      animation: {duration: 0}
    });
})

I hope this helps, all of the info I posted can be found in the chart.js documentation: http://www.chartjs.org/docs/latest/configuration/animations.html