From e53dbb6d5bf8d4dfb80fa670a078ffe613bb19aa Mon Sep 17 00:00:00 2001 From: Barath Kumar R Date: Tue, 8 Jun 2021 11:06:38 +0530 Subject: [PATCH] Fix Bug to the Chart Js for displaying multiple * The chart shows multiple instances bar graph in dashboard. Change-Id: I8a420a77134b52710a87997333f127c80ab3ebe2 Signed-off-by: Barath Kumar R --- package.json | 4 +-- src/app/dashboard/DashboardComponent.ts | 35 +++++++++++++++---------- 2 files changed, 23 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index ca23253..6f33eb4 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "@types/ol": "^5.3.5", "angular-notifier": "^6.0.1", "bootstrap": "^4.4.1", - "chart.js": "^3.2.1", + "chart.js": "^2.8.0", "codemirror": "^5.51.0", "core-js": "^2.5.4", "d3": "^5.9.2", @@ -48,7 +48,7 @@ "js-yaml": "^3.13.1", "jsonpath": "^1.0.2", "ng-sidebar": "~9.2.0", - "ng2-charts": "^3.0.0-beta.5", + "ng2-charts": "^2.4.2", "ng2-file-upload": "^1.3.0", "ng2-smart-table": "~1.6.0", "ol": "^5.3.3", diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts index 4660732..56b79a4 100644 --- a/src/app/dashboard/DashboardComponent.ts +++ b/src/app/dashboard/DashboardComponent.ts @@ -21,7 +21,7 @@ import { Component, Injector, OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { AuthenticationService } from 'AuthenticationService'; -import { ActiveElement, Chart, ChartEvent } from 'chart.js'; +import { Chart } from 'chart.js'; import { ERRORDATA } from 'CommonModel'; import { environment } from 'environment'; import { NSDDetails } from 'NSDModel'; @@ -303,29 +303,36 @@ export class DashboardComponent implements OnInit { data: this.noOfHours, label: this.translateService.instant('NOOFHOURS'), borderColor: this.backgroundColor, + fill: false, backgroundColor: this.backgroundColor }] }, options: { - onHover: (evt: ChartEvent, elements):void => { - const el: HTMLElement = document.getElementById('canvas'); - el.style.cursor = elements[0] ? 'pointer' : 'default'; - }, - plugins: { - legend: { display: false }, + hover: { + onHover(evt: Event, item: {}): void { + const el: HTMLElement = document.getElementById('canvas'); + el.style.cursor = item[0] ? 'pointer' : 'default'; + } }, + legend: { display: false }, scales: { - x: { + xAxes: [{ display: true, - labels: [this.translateService.instant('INSTANCES')], - }, - y: { + scaleLabel: { + display: true, + labelString: this.translateService.instant('INSTANCES') + } + }], + yAxes: [{ ticks: { - labelOffset: 0, + beginAtZero: true }, display: true, - labels: [this.translateService.instant('NOOFHOURS')] - }, + scaleLabel: { + display: true, + labelString: this.translateService.instant('NOOFHOURS') + } + }] } } }); -- 2.25.1