Upgrading chartjs to 4.3 and removing ng2-charts from modelview (#23398)

* Upgrading chartjs

* Upgrading charjs in exthost and removing ng2-charts

* Updating lock file

* Fixing paths in workbench for new chartjs

* Removing more any

* Removing more any

* Fixing colors

* Fixing more stuff

* Updating distro hash

package.json

@@ -1,7 +1,7 @@
 {
   "name": "azuredatastudio",
   "version": "1.45.0",
-  "distro": "0b0260ce742552bb22069e74d4bfc54e6b4bd29f",
+  "distro": "90d90d3d534cc89532292bc23b38cdbc5c3f7a5c",
   "author": {
     "name": "Microsoft Corporation"
   },
@@ -81,7 +81,8 @@
     "ansi_up": "^5.1.0",
     "applicationinsights": "1.4.2",
     "azdataGraph": "github:Microsoft/azdataGraph#0.0.58",
-    "chart.js": "^2.9.4",
+    "chart.js": "^4.3.0",
+    "chartjs-adapter-moment": "^1.0.1",
     "chokidar": "3.5.1",
     "graceful-fs": "4.2.8",
     "gridstack": "^3.1.3",
@@ -93,10 +94,10 @@
     "keytar": "7.9.0",
     "mark.js": "^8.11.1",
     "minimist": "^1.2.6",
+    "moment": "^2.29.4",
     "native-is-elevated": "0.4.3",
     "native-keymap": "3.3.0",
     "native-watchdog": "1.4.0",
-    "ng2-charts": "^1.6.0",
     "node-pty": "0.11.0-beta11",
     "plotly.js-dist-min": "^1.53.0",
     "reflect-metadata": "^0.1.8",
@@ -128,7 +129,6 @@
     "7zip": "0.0.6",
     "@playwright/test": "1.26.0",
     "@types/applicationinsights": "0.20.0",
-    "@types/chart.js": "2.9.4",
     "@types/cookie": "^0.3.3",
     "@types/copy-webpack-plugin": "^6.0.3",
     "@types/cssnano": "^4.0.0",

remote/package.json

@@ -21,7 +21,8 @@
     "angular2-grid": "2.0.6",
     "ansi_up": "^5.1.0",
     "azdataGraph": "github:Microsoft/azdataGraph#0.0.58",
-    "chart.js": "^2.9.4",
+    "chart.js": "^4.3.0",
+    "chartjs-adapter-moment": "^1.0.1",
     "cookie": "^0.4.0",
     "graceful-fs": "4.2.8",
     "gridstack": "^3.1.3",
@@ -33,8 +34,8 @@
     "keytar": "7.9.0",
     "mark.js": "^8.11.1",
     "minimist": "^1.2.6",
+    "moment": "^2.29.4",
     "native-watchdog": "1.4.0",
-    "ng2-charts": "^1.6.0",
     "node-pty": "0.11.0-beta11",
     "plotly.js-dist-min": "^1.53.0",
     "reflect-metadata": "^0.1.8",

remote/web/package.json

@@ -18,13 +18,14 @@
 		"angular2-grid": "2.0.6",
 		"ansi_up": "^5.1.0",
 		"azdataGraph": "github:Microsoft/azdataGraph#0.0.58",
-		"chart.js": "^2.9.4",
+		"chart.js": "^4.3.0",
+    "chartjs-adapter-moment": "^1.0.1",
 		"gridstack": "^3.1.3",
 		"html-to-image": "^1.6.2",
 		"jquery": "3.5.0",
 		"jschardet": "3.0.0",
 		"mark.js": "^8.11.1",
-		"ng2-charts": "^1.6.0",
+    "moment": "^2.29.4",
 		"plotly.js-dist-min": "^1.53.0",
 		"reflect-metadata": "^0.1.8",
 		"rxjs": "5.4.0",

remote/web/yarn.lock

@@ -42,6 +42,11 @@
   resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.1.3.tgz#ddafd46ae7ccc8b1f74904ffb45f394e44625216"
   integrity sha512-i+1GMIvfM3OC6XX2kZf+tL36Nc4jhcMNOY6bOrmwlN8APl59I9KqdvywC5HnutkDctb8expiWTIuSKZQAc4AIA==
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@microsoft/1ds-core-js@3.2.9", "@microsoft/1ds-core-js@^3.2.2":
   version "3.2.9"
   resolved "https://registry.yarnpkg.com/@microsoft/1ds-core-js/-/1ds-core-js-3.2.9.tgz#8a26935966e4871d1f1e40d992828bdd52bba84e"
@@ -123,30 +128,19 @@ chalk@^2.3.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chart.js@^2.6.0, chart.js@^2.9.4:
+chart.js@^4.3.0:
-  version "2.9.4"
+  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+  integrity sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==
   dependencies:
-    chartjs-color "^2.1.0"
+    "@kurkle/color" "^0.3.0"
-    moment "^2.10.2"
 
-chartjs-color-string@^0.6.0:
+chartjs-adapter-moment@^1.0.1:
-  version "0.6.0"
+  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz#0f04c30d330b207c14bfb57dfaae9ce332f09102"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  integrity sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==
-  dependencies:
-    color-name "^1.0.0"
 
-chartjs-color@^2.1.0:
+color-convert@^1.9.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
-
-color-convert@^1.9.0, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -158,11 +152,6 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -288,18 +277,11 @@ mark.js@^8.11.1:
   resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
   integrity sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==
 
-moment@^2.10.2:
+moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
-ng2-charts@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/ng2-charts/-/ng2-charts-1.6.0.tgz#108a2133ff62a8623895240fadbddbea2951f29d"
-  integrity sha512-9w0WH69x5/nuqC1og2WaY39NbaBqTGIP1+5gZaH7/KPN6UEPonNg/pYnsIVklLj1DWPWXKa8+XXIJZ1jy5nLxg==
-  dependencies:
-    chart.js "^2.6.0"
-
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"

remote/yarn.lock

@@ -42,6 +42,11 @@
   resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.1.3.tgz#ddafd46ae7ccc8b1f74904ffb45f394e44625216"
   integrity sha512-i+1GMIvfM3OC6XX2kZf+tL36Nc4jhcMNOY6bOrmwlN8APl59I9KqdvywC5HnutkDctb8expiWTIuSKZQAc4AIA==
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@microsoft/1ds-core-js@3.2.9", "@microsoft/1ds-core-js@^3.2.2":
   version "3.2.9"
   resolved "https://registry.yarnpkg.com/@microsoft/1ds-core-js/-/1ds-core-js-3.2.9.tgz#8a26935966e4871d1f1e40d992828bdd52bba84e"
@@ -220,28 +225,17 @@ chalk@^2.3.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chart.js@^2.6.0, chart.js@^2.9.4:
+chart.js@^4.3.0:
-  version "2.9.4"
+  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+  integrity sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==
   dependencies:
-    chartjs-color "^2.1.0"
+    "@kurkle/color" "^0.3.0"
-    moment "^2.10.2"
 
-chartjs-color-string@^0.6.0:
+chartjs-adapter-moment@^1.0.1:
-  version "0.6.0"
+  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz#0f04c30d330b207c14bfb57dfaae9ce332f09102"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  integrity sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
 
 chownr@^1.1.1:
   version "1.1.4"
@@ -257,7 +251,7 @@ cls-hooked@^4.2.2:
     emitter-listener "^1.0.1"
     semver "^5.4.1"
 
-color-convert@^1.9.0, color-convert@^1.9.3:
+color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -269,11 +263,6 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
 continuation-local-storage@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/continuation-local-storage/-/continuation-local-storage-3.2.1.tgz#11f613f74e914fe9b34c92ad2d28fe6ae1db7ffb"
@@ -572,7 +561,7 @@ mkdirp@^0.5.5:
   dependencies:
     minimist "^1.2.6"
 
-moment@^2.10.2:
+moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
@@ -597,13 +586,6 @@ native-watchdog@1.4.0:
   resolved "https://registry.yarnpkg.com/native-watchdog/-/native-watchdog-1.4.0.tgz#547a1f9f88754c38089c622d405ed1e324c7a545"
   integrity sha512-4FynAeGtTpoQ2+5AxVJXGEGsOzPsNYDh8Xmawjgs7YWJe+bbbgt7CYlA/Qx6X+kwtN5Ey1aNSm9MqZa0iNKkGw==
 
-ng2-charts@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/ng2-charts/-/ng2-charts-1.6.0.tgz#108a2133ff62a8623895240fadbddbea2951f29d"
-  integrity sha512-9w0WH69x5/nuqC1og2WaY39NbaBqTGIP1+5gZaH7/KPN6UEPonNg/pYnsIVklLj1DWPWXKa8+XXIJZ1jy5nLxg==
-  dependencies:
-    chart.js "^2.6.0"
-
 node-abi@^3.3.0:
   version "3.33.0"
   resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.33.0.tgz#8b23a0cec84e1c5f5411836de6a9b84bccf26e7f"

src/sql/platform/dashboard/browser/insightRegistry.ts

@@ -16,8 +16,8 @@ export const Extensions = {
 };
 
 export interface IInsightData {
-	columns: Array<string>;
+	columns: string[];
-	rows: Array<Array<string>>;
+	rows: string[][];
 }
 
 export interface IInsightsView {

src/sql/workbench/contrib/charts/browser/graphInsight.ts

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as chartjs from 'chart.js';
+import 'chartjs-adapter-moment'; // Importing this library as datetime adapters are not included in the main chart.js bundle.
 
 import { mixin } from 'sql/base/common/objects';
 import { localize } from 'vs/nls';
@@ -11,8 +12,8 @@ import * as colors from 'vs/platform/theme/common/colorRegistry';
 import { editorLineNumbers } from 'vs/editor/common/core/editorColorRegistry';
 import { IThemeService, IColorTheme } from 'vs/platform/theme/common/themeService';
 
-import { IInsight, IPointDataSet, customMixin } from './interfaces';
+import { IInsight, customMixin } from './interfaces';
-import { IInsightOptions, DataDirection, ChartType, LegendPosition, DataType } from 'sql/workbench/contrib/charts/common/interfaces';
+import { IInsightOptions, DataDirection, ChartType, LegendPosition, DataType, ChartTypeToChartJsType, LegendPositionToChartJsPosition } from 'sql/workbench/contrib/charts/common/interfaces';
 import { values } from 'vs/base/common/collections';
 import { IInsightData } from 'sql/platform/dashboard/browser/insightRegistry';
 
@@ -20,7 +21,7 @@ const noneLineGraphs = [ChartType.Doughnut, ChartType.Pie];
 
 const timeSeriesScales: chartjs.ChartOptions = {
 	scales: {
-		xAxes: [{
+		x: {
 			type: 'time',
 			display: true,
 			ticks: {
@@ -28,11 +29,10 @@ const timeSeriesScales: chartjs.ChartOptions = {
 				maxRotation: 45,
 				minRotation: 45
 			}
-		}],
+		},
-
+		y: {
-		yAxes: [{
 			display: true,
-		}]
+		}
 	}
 };
 
@@ -44,7 +44,7 @@ const defaultOptions: IInsightOptions = {
 export class Graph implements IInsight {
 	private _options: IInsightOptions = { type: ChartType.Bar };
 	private canvas: HTMLCanvasElement;
-	private chartjs?: chartjs;
+	private chartjs?: chartjs.Chart<chartjs.ChartType>;
 	private _data?: IInsightData;
 
 	private originalType?: ChartType;
@@ -58,6 +58,10 @@ export class Graph implements IInsight {
 		container: HTMLElement, options: IInsightOptions = defaultOptions,
 		@IThemeService themeService: IThemeService
 	) {
+
+		chartjs.Chart.register(
+			...chartjs.registerables,
+		);
 		this._theme = themeService.getColorTheme();
 		themeService.onDidColorThemeChange(e => {
 			this._theme = e;
@@ -94,8 +98,8 @@ export class Graph implements IInsight {
 			return;
 		}
 		this._data = data;
-		let labels: Array<string>;
+		let labels: string[];
-		let chartData: Array<Chart.ChartDataSets>;
+		let chartData: chartjs.ChartDataset[];
 
 		if (this.options.dataDirection === DataDirection.Horizontal) {
 			if (this.options.labelFirstColumn) {
@@ -108,14 +112,16 @@ export class Graph implements IInsight {
 		}
 
 		if (this.originalType === ChartType.TimeSeries) {
-			let dataSetMap: { [label: string]: IPointDataSet } = {};
+			let dataSetMap: { [label: string]: chartjs.ChartDataset<'line', any[]> } = {};
 			this._data.rows.map(row => {
 				if (row && row.length >= 3) {
 					let legend = row[0];
+					const dataPoint = { x: row[1], y: Number(row[2]) };
 					if (!dataSetMap[legend]) {
-						dataSetMap[legend] = { label: legend, data: [], fill: false };
+						dataSetMap[legend] = { label: legend, data: [dataPoint] };
+					} else {
+						dataSetMap[legend].data.push((dataPoint));
 					}
-					dataSetMap[legend].data.push({ x: row[1], y: Number(row[2]) });
 				}
 			});
 			chartData = values(dataSetMap);
@@ -159,13 +165,18 @@ export class Graph implements IInsight {
 			return mixin(c, getColors(this.options.type, i, c.data!.length), false);
 		});
 
+		if (this.options.type === 'horizontalBar') {
+			this.options.type = ChartType.Bar;
+			this.options.indexAxis = 'y';
+		}
 		if (this.chartjs) {
 			this.chartjs.data.datasets = chartData;
-			this.chartjs.config.type = this.options.type;
+			(<chartjs.ChartConfiguration>this.chartjs.config).type = ChartTypeToChartJsType[this.options.type]
 			// we don't want to include lables for timeSeries
 			this.chartjs.data.labels = this.originalType === 'timeSeries' ? [] : labels;
 			this.chartjs.options = this.transformOptions(this.options);
-			this.chartjs.update({ duration: 0 });
+
+			this.chartjs.update();
 		} else {
 			this.chartjs = new chartjs.Chart(this.canvas.getContext('2d')!, {
 				data: {
@@ -173,14 +184,14 @@ export class Graph implements IInsight {
 					labels: this.originalType === 'timeSeries' ? [] : labels,
 					datasets: chartData
 				},
-				type: this.options.type,
+				type: ChartTypeToChartJsType[this.options.type],
 				options: this.transformOptions(this.options)
 			});
 		}
 	}
 
-	private transformOptions(options: IInsightOptions): Chart.ChartOptions {
+	private transformOptions(options: IInsightOptions): chartjs.ChartOptions {
-		let retval: Chart.ChartOptions = {};
+		let retval: chartjs.ChartOptions = {};
 		retval.maintainAspectRatio = false;
 
 		let foregroundColor = this._theme.getColor(colors.editorForeground);
@@ -194,19 +205,19 @@ export class Graph implements IInsight {
 			retval.scales = {};
 			// we only want to include axis if it is a axis based graph type
 			if (!noneLineGraphs.find(x => x === options.type as ChartType)) {
-				retval.scales.xAxes = [{
+				retval.scales.x = {
-					scaleLabel: {
-						fontColor: foreground,
-						labelString: options.xAxisLabel,
-						display: options.xAxisLabel ? true : false
-					},
 					ticks: {
-						fontColor: foreground
+						color: foreground,
 					},
-					gridLines: {
+					grid: {
 						color: gridLines
+					},
+					title: {
+						color: foreground,
+						text: options.xAxisLabel,
+						display: options.xAxisLabel ? true : false
 					}
-				}];
+				};
 
 				if (options.xAxisMax !== undefined) {
 					retval.scales = mixin(retval.scales, { xAxes: [{ ticks: { max: options.xAxisMax } }] }, true, customMixin);
@@ -216,19 +227,19 @@ export class Graph implements IInsight {
 					retval.scales = mixin(retval.scales, { xAxes: [{ ticks: { min: options.xAxisMin } }] }, true, customMixin);
 				}
 
-				retval.scales!.yAxes = [{
+				retval.scales.y = {
-					scaleLabel: {
-						fontColor: foreground,
-						labelString: options.yAxisLabel,
-						display: options.yAxisLabel ? true : false
-					},
 					ticks: {
-						fontColor: foreground
+						color: foreground
 					},
-					gridLines: {
+					grid: {
 						color: gridLines
+					},
+					title: {
+						color: foreground,
+						text: options.yAxisLabel,
+						display: options.yAxisLabel ? true : false
 					}
-				}];
+				};
 
 				if (options.yAxisMax !== undefined) {
 					retval.scales = mixin(retval.scales, { yAxes: [{ ticks: { max: options.yAxisMax } }] }, true, customMixin);
@@ -266,13 +277,19 @@ export class Graph implements IInsight {
 				}
 			}
 
-			retval.legend = <Chart.ChartLegendOptions>{
+			retval.plugins = {
-				position: options.legendPosition as Chart.PositionType,
+				legend: {
-				display: options.legendPosition !== LegendPosition.None,
+					position: LegendPositionToChartJsPosition[options.legendPosition],
-				labels: {
+					display: options.legendPosition !== LegendPosition.None,
-					fontColor: foreground
+					labels: {
+						color: foreground
+					}
 				}
 			};
+
+			if (options.indexAxis === 'y') {
+				retval.indexAxis = 'y';
+			}
 		}
 
 		// these are custom options that will throw compile errors

src/sql/workbench/contrib/charts/common/interfaces.ts

@@ -3,6 +3,8 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import * as chartjs from 'chart.js';
+
 export interface IInsightOptions {
 	type: InsightType | ChartType;
 	dataDirection?: DataDirection;
@@ -18,6 +20,7 @@ export interface IInsightOptions {
 	xAxisMax?: number;
 	encoding?: string;
 	imageFormat?: string;
+	indexAxis?: string;
 }
 
 export enum InsightType {
@@ -36,6 +39,16 @@ export enum ChartType {
 	Scatter = 'scatter'
 }
 
+export const ChartTypeToChartJsType: { [key in ChartType]: chartjs.ChartType } = {
+	'bar': 'bar',
+	'doughnut': 'doughnut',
+	'horizontalBar': 'bar',
+	'line': 'line',
+	'pie': 'pie',
+	'timeSeries': 'line',
+	'scatter': 'scatter'
+}
+
 export enum LegendPosition {
 	Top = 'top',
 	Bottom = 'bottom',
@@ -44,6 +57,14 @@ export enum LegendPosition {
 	None = 'none'
 }
 
+export const LegendPositionToChartJsPosition: { [key in LegendPosition]: chartjs.LayoutPosition } = {
+	'top': 'top',
+	'bottom': 'bottom',
+	'left': 'left',
+	'right': 'right',
+	'none': 'left' // chart.js doesn't have a 'none' option, so we use 'left' and then hide the legend
+}
+
 export enum DataType {
 	Number = 'number',
 	Point = 'point'

src/sql/workbench/contrib/dashboard/browser/dashboard.module.ts

@@ -9,7 +9,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule, Routes, UrlSerializer, Router, NavigationEnd } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NgGridModule } from 'angular2-grid';
-import { ChartsModule } from 'ng2-charts';
 
 import CustomUrlSerializer from 'sql/base/browser/urlSerializer';
 import { Extensions, IInsightRegistry } from 'sql/platform/dashboard/browser/insightRegistry';
@@ -140,7 +139,6 @@ export const DashboardModule = (params, selector: string, instantiationService:
 			BrowserModule,
 			FormsModule,
 			NgGridModule,
-			ChartsModule,
 			RouterModule.forRoot(appRoutes),
 			PanelModule,
 			ScrollableModule,

src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component.html

@@ -0,0 +1,4 @@
+<div style="display: block; width: 100%; height: 100%; position: relative">
+	<div #chartContainer *ngIf="_isDataAvailable && _hasInit" style="width: 100%; height: 100%"></div>
+	<div *ngIf="_hasError">{{CHART_ERROR_MESSAGE}}</div>
+</div>

src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component.ts

@@ -3,43 +3,35 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ViewChild } from '@angular/core';
+
-import { BaseChartDirective } from 'ng2-charts';
+import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ViewChild, ElementRef } from '@angular/core';
 import * as chartjs from 'chart.js';
 
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { mixin } from 'sql/base/common/objects';
-import { defaultChartConfig, IChartConfig, IDataSet } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces';
+import { defaultChartConfig, IChartConfig } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces';
 
 import * as colors from 'vs/platform/theme/common/colorRegistry';
 import * as types from 'vs/base/common/types';
 import { Disposable } from 'vs/base/common/lifecycle';
 import * as nls from 'vs/nls';
 import { IThemeService, IColorTheme } from 'vs/platform/theme/common/themeService';
-import { IPointDataSet } from 'sql/workbench/contrib/charts/browser/interfaces';
 import { IInsightsView, IInsightData } from 'sql/platform/dashboard/browser/insightRegistry';
-import { ChartType, LegendPosition } from 'sql/workbench/contrib/charts/common/interfaces';
+import { ChartType, ChartTypeToChartJsType, LegendPosition } from 'sql/workbench/contrib/charts/common/interfaces';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 
 @Component({
-	template: `	<div style="display: block; width: 100%; height: 100%; position: relative">
+	templateUrl: decodeURI(require.toUrl('./chartInsight.component.html'))
-					<canvas #canvas *ngIf="_isDataAvailable && _hasInit"
-							baseChart
-							[datasets]="chartData"
-							[labels]="labels"
-							[chartType]="chartType"
-							[colors]="colors"
-							[options]="_options"></canvas>
-					<div *ngIf="_hasError">{{CHART_ERROR_MESSAGE}}</div>
-				</div>`
 })
 export abstract class ChartInsight extends Disposable implements IInsightsView {
 	private _isDataAvailable: boolean = false;
 	protected _hasInit: boolean = false;
 	protected _hasError: boolean = false;
-	private _options: any = {};
+	private _options: chartjs.ChartOptions = {};
+	private _chart: chartjs.Chart;
+	private _chartCanvas: HTMLCanvasElement;
 
-	@ViewChild(BaseChartDirective) private _chart: BaseChartDirective;
+	@ViewChild('chartContainer') private _chartContainer: ElementRef;
 
 	protected _defaultConfig = defaultChartConfig;
 	protected _config: IChartConfig;
@@ -55,6 +47,10 @@ export abstract class ChartInsight extends Disposable implements IInsightsView {
 		@Inject(IAdsTelemetryService) private _telemetryService: IAdsTelemetryService
 	) {
 		super();
+		chartjs.Chart.register(
+			...chartjs.registerables,
+		);
+		chartjs.Chart.register(chartjs.Colors);
 	}
 
 	init() {
@@ -73,6 +69,20 @@ export abstract class ChartInsight extends Disposable implements IInsightsView {
 			this._hasError = true;
 			this._changeRef.detectChanges();
 		}
+		this._chartCanvas = document.createElement('canvas');
+		this._chartContainer.nativeElement.appendChild(this._chartCanvas);
+		this._chartCanvas.style.width = '100%';
+		this._chartCanvas.style.height = '100%';
+		this._chart = new chartjs.Chart(this._chartCanvas, {
+			type: ChartTypeToChartJsType[this.chartType],
+			data: {
+				labels: this.labels,
+				datasets: this.chartData,
+			},
+			options: this.options
+		});
+		this.refresh();
+
 		this._telemetryService.createActionEvent(TelemetryKeys.TelemetryView.Shell, TelemetryKeys.TelemetryAction.ChartCreated)
 			.withAdditionalProperties({ type: this.chartType })
 			.send();
@@ -81,7 +91,7 @@ export abstract class ChartInsight extends Disposable implements IInsightsView {
 	/**
 	 * Sets the options for the chart; handles rerendering the chart if needed
 	 */
-	public set options(options: any) {
+	public set options(options: chartjs.ChartOptions) {
 		this._options = options;
 		if (this._isDataAvailable) {
 			this._options = mixin({}, mixin(this._options, { animation: { duration: 0 } }));
@@ -89,24 +99,20 @@ export abstract class ChartInsight extends Disposable implements IInsightsView {
 		}
 	}
 
-	public get options(): any {
+	public get options(): chartjs.ChartOptions {
 		return this._options;
 	}
 
 	protected updateTheme(e: IColorTheme): void {
 		const foregroundColor = e.getColor(colors.editorForeground);
 		const foreground = foregroundColor ? foregroundColor.toString() : null;
-		const backgroundColor = e.getColor(colors.editorBackground);
+		const options: chartjs.ChartOptions = {
-		const background = backgroundColor ? backgroundColor.toString() : null;
+			plugins: {
-
+				legend: {
-		const options = {
+					labels: {
-			legend: {
+						color: foreground
-				labels: {
+					}
-					fontColor: foreground
 				}
-			},
-			viewArea: {
-				backgroundColor: background
 			}
 		};
 		this.options = mixin({}, mixin(this.options, options));
@@ -115,13 +121,24 @@ export abstract class ChartInsight extends Disposable implements IInsightsView {
 	public refresh() {
 		// cheaper refresh but causes problems when change data for rerender
 		if (this._chart) {
-			this._chart.ngOnChanges({});
+			this._chart.options = this.options;
+			this._chart.data.datasets = this.chartData;
+			this._chart.data.labels = this.labels;
+			this._chart.config['type'] = ChartTypeToChartJsType[this.chartType];
+			this._chart.update();
 		}
 	}
 
-	public getCanvasData(): string {
+	public refreshChartOptions() {
-		if (this._chart && this._chart.chart) {
+		if (this._chart) {
-			return this._chart.chart.toBase64Image();
+			this._chart.options = this.options;
+			this._chart.update();
+		}
+	}
+
+	public getCanvasData(): string | undefined {
+		if (this._chart) {
+			return this._chart.toBase64Image();
 		} else {
 			return undefined;
 		}
@@ -184,8 +201,8 @@ export abstract class ChartInsight extends Disposable implements IInsightsView {
 
 	/* Typescript does not allow you to access getters/setters for super classes.
 	his is a workaround that allows us to still call base getter */
-	private _cachedChartData: Array<IDataSet>;
+	private _cachedChartData: chartjs.ChartDataset[];
-	protected getChartData(): Array<IDataSet> {
+	protected getChartData(): chartjs.ChartDataset[] {
 		if (!this._cachedChartData) {
 			if (this._config.dataDirection === 'horizontal') {
 				if (this._config.labelFirstColumn) {
@@ -224,7 +241,7 @@ export abstract class ChartInsight extends Disposable implements IInsightsView {
 		return this._cachedChartData;
 	}
 
-	public get chartData(): Array<IDataSet | IPointDataSet> {
+	public get chartData(): chartjs.ChartDataset[] {
 		return this.getChartData();
 	}
 
@@ -265,16 +282,18 @@ export abstract class ChartInsight extends Disposable implements IInsightsView {
 	}
 
 	public set legendPosition(input: LegendPosition) {
-		const options = {
+		const options: chartjs.ChartOptions = {
-			legend: {
+			plugins: {
-				display: true,
+				legend: {
-				position: 'top'
+					position: 'top',
+					display: true
+				}
 			}
 		};
 		if (input === 'none') {
-			options.legend.display = false;
+			options.plugins.legend.display = false;
 		} else {
-			options.legend.position = input;
+			options.plugins.legend.position = input;
 		}
 		this.options = mixin(this.options, options);
 	}
@@ -295,13 +314,3 @@ function isValidData(data: IInsightData): boolean {
 
 	return true;
 }
-
-chartjs.Chart.pluginService.register({
-	beforeDraw: function (chart) {
-		if ((chart.config.options as any).viewArea && (chart.config.options as any).viewArea.backgroundColor) {
-			let ctx = (chart as any).chart.ctx;
-			ctx.fillStyle = (chart.config.options as any).viewArea.backgroundColor;
-			ctx.fillRect(0, 0, (chart as any).chart.width, (chart as any).chart.height);
-		}
-	}
-});

src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/barChart.component.ts

@@ -6,6 +6,7 @@
 import { ChartInsight } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component';
 import { mixin } from 'sql/base/common/objects';
 import { IChartConfig } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces';
+import * as chartjs from 'chart.js';
 
 import * as colors from 'vs/platform/theme/common/colorRegistry';
 import { editorLineNumbers } from 'vs/editor/common/core/editorColorRegistry';
@@ -36,88 +37,80 @@ export default class BarChart extends ChartInsight {
 	}
 
 	public override setConfig(config: IBarChartConfig): void {
-		let options = {};
+		let options: chartjs.ChartOptions = {};
 		if (config.xAxisMax) {
-			const opts = {
+			const opts: chartjs.ChartOptions = {
 				scales: {
-					xAxes: [{
+					x: {
 						display: true,
-						ticks: {
+						max: config.xAxisMax
-							max: config.xAxisMax
+					}
-						}
-					}]
 				}
 			};
 			options = mixin({}, mixin(options, opts, true, customMixin));
 		}
 
 		if (config.xAxisMin) {
-			const opts = {
+			const opts: chartjs.ChartOptions = {
 				scales: {
-					xAxes: [{
+					x: {
 						display: true,
-						ticks: {
+						min: config.xAxisMin
-							min: config.xAxisMin
+					}
-						}
-					}]
 				}
 			};
 			options = mixin({}, mixin(options, opts, true, customMixin));
 		}
 
 		if (config.xAxisLabel) {
-			const opts = {
+			const opts: chartjs.ChartOptions = {
 				scales: {
-					xAxes: [{
+					x: {
 						display: true,
-						scaleLabel: {
+						title: {
 							display: true,
-							labelString: config.xAxisLabel
+							text: config.xAxisLabel
 						}
-					}]
+					}
 				}
 			};
 			options = mixin({}, mixin(options, opts, true, customMixin));
 		}
 
 		if (config.yAxisMax) {
-			const opts = {
+			const opts: chartjs.ChartOptions = {
 				scales: {
-					yAxes: [{
+					y: {
 						display: true,
-						ticks: {
+						max: config.yAxisMax
-							max: config.yAxisMax
+					}
-						}
-					}]
 				}
 			};
 			options = mixin({}, mixin(options, opts, true, customMixin));
 		}
 
 		if (config.yAxisMin) {
-			const opts = {
+			const opts: chartjs.ChartOptions = {
 				scales: {
-					yAxes: [{
+					y: {
 						display: true,
-						ticks: {
+						min: config.yAxisMin
-							min: config.yAxisMin
+					}
-						}
-					}]
 				}
 			};
 			options = mixin({}, mixin(options, opts, true, customMixin));
 		}
 
 		if (config.yAxisLabel) {
-			const opts = {
+			const opts: chartjs.ChartOptions = {
 				scales: {
-					yAxes: [{
+					y: {
 						display: true,
-						scaleLabel: {
+						title: {
 							display: true,
-							labelString: config.yAxisLabel
+							text: config.yAxisLabel
 						}
-					}]
+					}
 				}
 			};
 			options = mixin({}, mixin(options, opts, true, customMixin));
@@ -133,30 +126,30 @@ export default class BarChart extends ChartInsight {
 		const foreground = foregroundColor ? foregroundColor.toString() : null;
 		const gridLinesColor = e.getColor(editorLineNumbers);
 		const gridLines = gridLinesColor ? gridLinesColor.toString() : null;
-		const options = {
+		const options: chartjs.ChartOptions = {
 			scales: {
-				xAxes: [{
+				x: {
-					scaleLabel: {
+					title: {
-						fontColor: foreground
+						color: foreground
 					},
 					ticks: {
-						fontColor: foreground
+						color: foreground
 					},
-					gridLines: {
+					grid: {
 						color: gridLines
 					}
-				}],
+				},
-				yAxes: [{
+				y: {
-					scaleLabel: {
+					title: {
-						fontColor: foreground
+						color: foreground
 					},
 					ticks: {
-						fontColor: foreground
+						color: foreground
 					},
-					gridLines: {
+					grid: {
 						color: gridLines
 					}
-				}]
+				}
 			}
 		};
 

src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/horizontalBarChart.component.ts

@@ -3,14 +3,17 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import BarChart from './barChart.component';
+import BarChart, { IBarChartConfig } from './barChart.component';
 import { forwardRef, Inject, ChangeDetectorRef } from '@angular/core';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { ChartType } from 'sql/workbench/contrib/charts/common/interfaces';
+import * as chartjs from 'chart.js';
+import { mixin } from 'sql/base/common/objects';
+import { customMixin } from 'sql/workbench/contrib/charts/browser/interfaces';
 
 export default class HorizontalBarChart extends BarChart {
-	protected override readonly chartType: ChartType = ChartType.HorizontalBar;
+	protected override readonly chartType: ChartType = ChartType.Bar;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) _changeRef: ChangeDetectorRef,
@@ -19,4 +22,12 @@ export default class HorizontalBarChart extends BarChart {
 	) {
 		super(_changeRef, themeService, telemetryService);
 	}
+
+	public override setConfig(config: IBarChartConfig): void {
+		let options: chartjs.ChartOptions = {
+			indexAxis: 'y'
+		};
+		this.options = mixin({}, mixin(this.options, options, true, customMixin));
+		super.setConfig(config);
+	}
 }

src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/lineChart.component.ts

@@ -4,12 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { mixin, deepClone } from 'vs/base/common/objects';
+import * as chartjs from 'chart.js';
 
 import BarChart, { IBarChartConfig } from './barChart.component';
-import { defaultChartConfig, IDataSet } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces';
+import { defaultChartConfig } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces';
 import { ChangeDetectorRef, Inject, forwardRef } from '@angular/core';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { IPointDataSet } from 'sql/workbench/contrib/charts/browser/interfaces';
 import { DataType, ChartType } from 'sql/workbench/contrib/charts/common/interfaces';
 import { values } from 'vs/base/common/collections';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
@@ -40,7 +40,7 @@ export default class LineChart extends BarChart {
 		super.init();
 	}
 
-	public override get chartData(): Array<IDataSet | IPointDataSet> {
+	public override get chartData(): chartjs.ChartDataset[] {
 		if (this._config.dataType === DataType.Number) {
 			return super.getChartData();
 		} else {
@@ -53,10 +53,10 @@ export default class LineChart extends BarChart {
 		this._cachedPointData = undefined;
 	}
 
-	private _cachedPointData: Array<IPointDataSet>;
+	private _cachedPointData: chartjs.ChartDataset[];
-	protected getDataAsPoint(): Array<IPointDataSet> {
+	protected getDataAsPoint(): chartjs.ChartDataset[] {
 		if (!this._cachedPointData) {
-			const dataSetMap: { [label: string]: IPointDataSet } = {};
+			const dataSetMap: { [label: string]: chartjs.ChartDataset } = {};
 			this._data.rows.map(row => {
 				if (row && row.length >= 3) {
 					const legend = row[0];
@@ -82,25 +82,24 @@ export default class LineChart extends BarChart {
 	protected addAxisLabels(): void {
 		const xLabel = this._config.xAxisLabel || this._data.columns[1] || 'x';
 		const yLabel = this._config.yAxisLabel || this._data.columns[2] || 'y';
-		const options = {
+		const options: chartjs.ChartOptions = {
 			scales: {
-				xAxes: [{
+				x: {
 					type: 'linear',
 					position: 'bottom',
 					display: true,
-					scaleLabel: {
+					title: {
 						display: true,
-						labelString: xLabel
+						text: xLabel
 					}
-				}],
+				},
-
+				y: {
-				yAxes: [{
 					display: true,
-					scaleLabel: {
+					title: {
 						display: true,
-						labelString: yLabel,
+						text: yLabel
 					}
-				}]
+				}
 			}
 		};
 

src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/timeSeriesChart.component.ts

@@ -5,12 +5,12 @@
 
 import LineChart, { ILineConfig } from './lineChart.component';
 import { defaultChartConfig } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces';
+import * as chartjs from 'chart.js';
 
 import { mixin, deepClone } from 'vs/base/common/objects';
 import { Color } from 'vs/base/common/color';
 import { ChangeDetectorRef, Inject, forwardRef } from '@angular/core';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { IPointDataSet } from 'sql/workbench/contrib/charts/browser/interfaces';
 import { ChartType } from 'sql/workbench/contrib/charts/common/interfaces';
 import { values } from 'vs/base/common/collections';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
@@ -32,42 +32,41 @@ export default class TimeSeriesChart extends LineChart {
 		const xLabel = this._config.xAxisLabel || this.getLabels()[1] || 'x';
 		const yLabel = this._config.yAxisLabel || this.getLabels()[2] || 'y';
 
-		const options = {
+		const options: chartjs.ChartOptions = {
 			scales: {
-				xAxes: [{
+				x: {
 					type: 'time',
 					display: true,
-					scaleLabel: {
+					title: {
 						display: true,
-						labelString: xLabel
+						text: xLabel
 					},
 					ticks: {
 						autoSkip: false,
 						maxRotation: 45,
 						minRotation: 45
 					}
-				}],
+				},
-
+				y: {
-				yAxes: [{
 					display: true,
-					scaleLabel: {
+					title: {
 						display: true,
-						labelString: yLabel
+						text: yLabel
 					}
-				}]
+				}
 			}
 		};
 
 		this.options = Object.assign({}, mixin(this.options, options));
 	}
 
-	protected override getDataAsPoint(): Array<IPointDataSet> {
+	protected override getDataAsPoint(): chartjs.ChartDataset[] {
-		const dataSetMap: { [label: string]: IPointDataSet } = {};
+		const dataSetMap: { [label: string]: chartjs.ChartDataset<'line', any[]> } = {};
 		this._data.rows.map(row => {
 			if (row && row.length >= 3) {
 				const legend = row[0];
 				if (!dataSetMap[legend]) {
-					dataSetMap[legend] = { label: legend, data: [], fill: false };
+					dataSetMap[legend] = { label: legend, data: [] };
 				}
 				dataSetMap[legend].data.push({ x: row[1], y: Number(row[2]) });
 

src/vs/code/browser/workbench/workbench-dev.html

@@ -70,9 +70,8 @@
 				'@angular/animations': `${window.location.origin}/static/remote/web/node_modules/@angular/animations/bundles/animations.umd.n.js`,
 				'angular2-grid': `${window.location.origin}/static/remote/web/node_modules/angular2-grid/bundles/NgGrid.umd.js`,
 				'angular2-slickgrid': `${window.location.origin}/static/remote/web/node_modules/angular2-slickgrid/out/bundles/angular2-slickgrid.umd.js`,
-				'chart.js':  `${window.location.origin}/static/remote/web/node_modules/chart.js/dist/Chart.bundle.min.js`,
+				'chart.js':  `${window.location.origin}/static/remote/web/node_modules/chart.js/dist/chart.umd.js`,
 				'html-to-image': `${window.location.origin}/static/remote/web/node_modules/html-to-image/dist/html-to-image.js`,
-				'ng2-charts': `${window.location.origin}/static/remote/web/node_modules/ng2-charts/bundles/ng2-charts.umd.js`,
 				'rxjs/Observable': `${window.location.origin}/static/remote/web/node_modules/rxjs/bundles/Rx.min.js?0`,
 				'rxjs/observable/merge': `${window.location.origin}/static/remote/web/node_modules/rxjs/bundles/Rx.min.js?1`,
 				'rxjs/operator/share': `${window.location.origin}/static/remote/web/node_modules/rxjs/bundles/Rx.min.js?2`,
@@ -106,7 +105,7 @@
 				'plotly.js-dist-min': `${window.location.origin}/static/node_modules/plotly.js-dist-min/plotly.min.js`,
 				'azdataGraph': `${window.location.origin}/static/node_modules/azdataGraph/dist/build.js`
 			}
-		};
+		});
 	</script>
 	<script src="./static/remote/web/node_modules/jquery/dist/jquery.min.js"></script>
 	<script src="./static/remote/web/node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>

src/vs/code/browser/workbench/workbench.html

@@ -95,9 +95,8 @@
 				'@angular/animations': `${window.location.origin}/static/node_modules/@angular/animations/bundles/animations.umd.n.js`,
 				'angular2-grid': `${window.location.origin}/static/node_modules/angular2-grid/bundles/NgGrid.umd.js`,
 				'angular2-slickgrid': `${window.location.origin}/static/node_modules/angular2-slickgrid/out/bundles/angular2-slickgrid.umd.js`,
-				'chart.js':  `${window.location.origin}/static/node_modules/chart.js/dist/Chart.bundle.min.js`,
+				'chart.js':  `${window.location.origin}/static/node_modules/chart.js/dist/chart.umd.js`,
 				'html-to-image': `${window.location.origin}/static/node_modules/html-to-image/dist/html-to-image.js`,
-				'ng2-charts': `${window.location.origin}/static/node_modules/ng2-charts/bundles/ng2-charts.umd.js`,
 				'rxjs/Observable': `${window.location.origin}/static/node_modules/rxjs/bundles/Rx.min.js?0`,
 				'rxjs/observable/merge': `${window.location.origin}/static/node_modules/rxjs/bundles/Rx.min.js?1`,
 				'rxjs/operator/share': `${window.location.origin}/static/node_modules/rxjs/bundles/Rx.min.js?2`,

yarn.lock

@@ -501,6 +501,11 @@
     methods "^1.1.2"
     path-to-regexp "^6.1.0"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@microsoft/1ds-core-js@3.2.9", "@microsoft/1ds-core-js@^3.2.2":
   version "3.2.9"
   resolved "https://registry.yarnpkg.com/@microsoft/1ds-core-js/-/1ds-core-js-3.2.9.tgz#8a26935966e4871d1f1e40d992828bdd52bba84e"
@@ -816,11 +821,6 @@
   dependencies:
     applicationinsights "*"
 
-"@types/chart.js@2.9.4":
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.9.4.tgz#19d12fae10536e7a2a6ea768c7a3811c626ca455"
-  integrity sha512-uKF7vOdTTAfrsKREKG4oojDqE/dQ5GkwdMRQGfk19aKmeC4wIF6eTWdN98PA8d+F4TPI8hy7oOTB6/JoWepEJw==
-
 "@types/cookie@^0.3.3":
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
@@ -2584,28 +2584,17 @@ charenc@0.0.2:
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
   integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
 
-chart.js@^2.6.0, chart.js@^2.9.4:
+chart.js@^4.3.0:
-  version "2.9.4"
+  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+  integrity sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==
   dependencies:
-    chartjs-color "^2.1.0"
+    "@kurkle/color" "^0.3.0"
-    moment "^2.10.2"
 
-chartjs-color-string@^0.6.0:
+chartjs-adapter-moment@^1.0.1:
-  version "0.6.0"
+  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz#0f04c30d330b207c14bfb57dfaae9ce332f09102"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  integrity sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
 
 chokidar@3.5.1:
   version "3.5.1"
@@ -7296,7 +7285,7 @@ mocha@^9.2.2:
     yargs-parser "20.2.4"
     yargs-unparser "2.0.0"
 
-moment@^2.10.2:
+moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
@@ -7431,13 +7420,6 @@ next-tick@1, next-tick@^1.1.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
-ng2-charts@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/ng2-charts/-/ng2-charts-1.6.0.tgz#108a2133ff62a8623895240fadbddbea2951f29d"
-  integrity sha512-9w0WH69x5/nuqC1og2WaY39NbaBqTGIP1+5gZaH7/KPN6UEPonNg/pYnsIVklLj1DWPWXKa8+XXIJZ1jy5nLxg==
-  dependencies:
-    chart.js "^2.6.0"
-
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"