{"action":"closed","issue":{"url":"https://api.github.com/repos/chartjs/Chart.js/issues/5543","repository_url":"https://api.github.com/repos/chartjs/Chart.js","labels_url":"https://api.github.com/repos/chartjs/Chart.js/issues/5543/labels{/name}","comments_url":"https://api.github.com/repos/chartjs/Chart.js/issues/5543/comments","events_url":"https://api.github.com/repos/chartjs/Chart.js/issues/5543/events","html_url":"https://github.com/chartjs/Chart.js/issues/5543","id":328941180,"node_id":"MDU6SXNzdWUzMjg5NDExODA=","number":5543,"title":"Angular chart.js chart scale","user":{"login":"JacopoSciampi","id":32507291,"node_id":"MDQ6VXNlcjMyNTA3Mjkx","avatar_url":"https://avatars1.githubusercontent.com/u/32507291?v=4","gravatar_id":"","url":"https://api.github.com/users/JacopoSciampi","html_url":"https://github.com/JacopoSciampi","followers_url":"https://api.github.com/users/JacopoSciampi/followers","following_url":"https://api.github.com/users/JacopoSciampi/following{/other_user}","gists_url":"https://api.github.com/users/JacopoSciampi/gists{/gist_id}","starred_url":"https://api.github.com/users/JacopoSciampi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JacopoSciampi/subscriptions","organizations_url":"https://api.github.com/users/JacopoSciampi/orgs","repos_url":"https://api.github.com/users/JacopoSciampi/repos","events_url":"https://api.github.com/users/JacopoSciampi/events{/privacy}","received_events_url":"https://api.github.com/users/JacopoSciampi/received_events","type":"User","site_admin":false},"labels":[{"id":32309888,"node_id":"MDU6TGFiZWwzMjMwOTg4OA==","url":"https://api.github.com/repos/chartjs/Chart.js/labels/type:%20question","name":"type: question","color":"ccbbee","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-06-04T07:38:32Z","updated_at":"2018-06-17T15:15:19Z","closed_at":"2018-06-17T15:15:19Z","author_association":"NONE","body":"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:\r\n\r\nhttps://plnkr.co/edit/GEu6seOu1fbh9dnuSjMV?p=preview\r\n\r\nPackage.json :\r\n```\r\n\r\n\"dependencies\": {\r\n    \"@angular/animations\": \"^5.2.0\",\r\n    \"@angular/common\": \"^5.2.0\",\r\n    \"@angular/compiler\": \"^5.2.0\",\r\n    \"@angular/core\": \"^5.2.0\",\r\n    \"@angular/forms\": \"^5.2.0\",\r\n    \"@angular/http\": \"^5.2.0\",\r\n    \"@angular/platform-browser\": \"^5.2.0\",\r\n    \"@angular/platform-browser-dynamic\": \"^5.2.0\",\r\n    \"@angular/router\": \"^5.2.0\",\r\n    \"chart.js\": \"^2.7.2\",\r\n    \"core-js\": \"^2.4.1\",\r\n    \"rxjs\": \"^5.5.6\",\r\n    \"zone.js\": \"^0.8.19\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@angular/cli\": \"1.6.5\",\r\n    \"@angular/compiler-cli\": \"^5.2.0\",\r\n    \"@angular/language-service\": \"^5.2.0\",\r\n    \"@types/jasmine\": \"~2.8.3\",\r\n    \"@types/jasminewd2\": \"~2.0.2\",\r\n    \"@types/node\": \"~6.0.60\",\r\n    \"@types/chart.js\": \"2.7.19\",\r\n    \"codelyzer\": \"^4.0.1\",\r\n    \"jasmine-core\": \"~2.8.0\",\r\n    \"jasmine-spec-reporter\": \"~4.2.1\",\r\n    \"karma\": \"~2.0.0\",\r\n    \"karma-chrome-launcher\": \"~2.2.0\",\r\n    \"karma-cli\": \"~1.0.1\",\r\n    \"karma-coverage-istanbul-reporter\": \"^1.2.1\",\r\n    \"karma-jasmine\": \"~1.1.0\",\r\n    \"karma-jasmine-html-reporter\": \"^0.2.2\",\r\n    \"protractor\": \"~5.1.2\",\r\n    \"ts-node\": \"~4.1.0\",\r\n    \"tslint\": \"~5.9.1\",\r\n    \"typescript\": \"~2.5.3\"\r\n  }\r\n```\r\nComponent.ts :\r\n```\r\n\r\nimport { Component, OnDestroy, ElementRef, OnInit, AfterViewInit } from '@angular/core';\r\nimport { Observable } from 'rxjs/Observable';\r\nimport { Chart, ChartPoint } from 'chart.js';\r\n\r\nimport 'rxjs/add/observable/interval';\r\nimport 'rxjs/add/operator/takeWhile';\r\n\r\n@Component({\r\n    selector: 'app-root',\r\n    templateUrl: './app.component.html',\r\n    styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent implements OnInit, AfterViewInit {\r\n    public isAlive = true;\r\n    public chart: Chart;\r\n    public data = [];\r\n\r\n    canvas: any;\r\n    ctx: any;\r\n\r\n    public ngOnInit(): void {\r\n\r\n        Observable.interval(50)\r\n            .takeWhile(() => this.isAlive)\r\n            .subscribe(\r\n                succ => {\r\n                    if (!this.chart) {\r\n                        return;\r\n                    }\r\n\r\n                    if (this.data.length > 200) {\r\n                        this.data.splice(0, 1);\r\n                        this.chart.data.labels.splice(0, 1);\r\n                    }\r\n\r\n                    this.data.push(new Date().getSeconds());\r\n                    this.chart.data.labels.push(new Date().getSeconds().toString() + '-');\r\n                    this.chart.update();\r\n                }\r\n            );\r\n    }\r\n\r\n    public ngAfterViewInit(): void {\r\n        if (!this.chart) {\r\n            this.canvas = document.getElementById('myChart');\r\n            this.ctx = this.canvas.getContext('2d');\r\n            this.chart = new Chart(this.ctx, {\r\n                type: 'line',\r\n                data: {\r\n                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\r\n                    datasets: [{\r\n                        label: '# of Votes',\r\n                        data: this.data,\r\n                        fill: false,\r\n                        showLine: true,\r\n                        backgroundColor: [\r\n                            'rgba(255, 99, 132, 0)'\r\n                        ],\r\n                        borderColor: [\r\n                            'rgba(255,99,132,1)'\r\n                        ],\r\n                        borderWidth: 2\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: false,\r\n                    title: {\r\n                        display: true,\r\n                        text: 'Chart.js - Fixed X and Y Axis',\r\n                    },\r\n                    tooltips: {\r\n                        enabled: false\r\n                    },\r\n                    elements: {\r\n                        point: {\r\n                            radius: 0\r\n                        }\r\n                    },\r\n                    scales: {\r\n\r\n                        xAxes: [{\r\n                            display: false,\r\n                            ticks: {\r\n\r\n                            }\r\n                        }],\r\n                        yAxes: [{\r\n                            ticks: {\r\n                                min: 0,\r\n                                max: 60\r\n                            }\r\n                        }]\r\n                    }\r\n                }\r\n            });\r\n\r\n            for (let i = 0; i < 200; i++) {\r\n                this.data.push(new Date().getSeconds());\r\n                this.chart.data.labels.push(new Date().getSeconds().toString() + '-');\r\n            }\r\n            this.chart.update();\r\n        }\r\n    }\r\n}\r\n```\r\nComponent.html :\r\n`\r\n<canvas id=\"myChart\" width=\"800\" height=\"400\"></canvas>`\r\nModule.ts :\r\n```\r\n\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\n\r\n\r\nimport { AppComponent } from './app.component';\r\n\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n```\r\nThe 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 :\r\n\r\n```\r\nfor (let i = 0; i < 200; i++) {\r\n                    this.data.push(new Date().getSeconds());\r\n                    this.chart.data.labels.push(new Date().getSeconds().toString() + '-');\r\n                }\r\n                this.chart.update();\r\n```\r\nYou 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.\r\n\r\nI haven't seen a method or a way to pre-setup the scale. Is it missing or what am I doing wrong?"}}
{"actor":{"display_login":"benmccann"}}