From 5c06f09ac7766ab9870059d86aee886ebac8e418 Mon Sep 17 00:00:00 2001 From: "Divyam (divyam.lamiyan@thoughtspot.com)" Date: Fri, 22 Sep 2023 17:35:23 +0530 Subject: [PATCH] Update Example Charts with Tooltip --- example/custom-bar-chart/custom-chart.ts | 36 +++++++++++++ example/custom-bar-chart/package-lock.json | 8 +-- example/custom-bar-chart/package.json | 2 +- example/custom-bar-chart/pnpm-lock.yaml | 8 +-- example/gantt/package-lock.json | 8 +-- example/gantt/package.json | 2 +- example/gantt/pnpm-lock.yaml | 8 +-- example/gantt/src/main.ts | 52 ++++++++++++++----- .../react/custom-bar-chart/package-lock.json | 14 ++--- example/react/custom-bar-chart/package.json | 2 +- example/react/custom-bar-chart/pnpm-lock.yaml | 8 +-- example/sunburst/package-lock.json | 8 +-- example/sunburst/package.json | 2 +- example/sunburst/pnpm-lock.yaml | 8 +-- example/sunburst/sunburst.ts | 32 ++++++++++-- 15 files changed, 144 insertions(+), 54 deletions(-) diff --git a/example/custom-bar-chart/custom-chart.ts b/example/custom-bar-chart/custom-chart.ts index 36937df..ac8dbea 100644 --- a/example/custom-bar-chart/custom-chart.ts +++ b/example/custom-bar-chart/custom-chart.ts @@ -122,6 +122,30 @@ function getParsedEvent(evt: any) { return _.pick(evt.native, ['clientX', 'clientY']); } +function handleMouseOver(e: any, dataModel, ctx: CustomChartContext) { + if (!e.chart) { + return; + } + const elements = e.chart.getActiveElements(); + if (elements.length > 0) { + const activeElement = elements[0]; + const dataX = activeElement?.index; + const dataY = activeElement?.datasetIndex; + if (!_.isNil(dataX) && !_.isNil(dataY)) { + const point = dataModel.getPointDetails(dataX, dataY); + ctx.emitEvent(ChartToTSEvent.ShowToolTip, { + event: getParsedEvent(e), + point: { + tuple: point, + }, + customTooltipContent: [], + }); + } + } else { + ctx.emitEvent(ChartToTSEvent.HideToolTip); + } +} + function render(ctx: CustomChartContext) { const chartModel = ctx.getChartModel(); const dataModel = getDataModel(chartModel); @@ -166,6 +190,9 @@ function render(ctx: CustomChartContext) { }, }, }, + tooltip: { + enabled: false, + }, }, // responsive: true, maintainAspectRatio: false, @@ -191,7 +218,16 @@ function render(ctx: CustomChartContext) { }, }); }, + onHover: (event) => { + if (event.type === 'mousemove') { + handleMouseOver(event, dataModel, ctx); + } + if (event.type === 'mouseout') { + ctx.emitEvent(ChartToTSEvent.HideToolTip); + } + }, }, + // onMouseOut: () => ctx.emitEvent(ChartToTSEvent.HideToolTip), }); } catch (e) { console.error('renderfailed', e); diff --git a/example/custom-bar-chart/package-lock.json b/example/custom-bar-chart/package-lock.json index 5ccca80..b3ad397 100644 --- a/example/custom-bar-chart/package-lock.json +++ b/example/custom-bar-chart/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.7", + "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8", "chart.js": "^4.3.0", "chartjs-plugin-datalabels": "^2.2.0", "lodash": "^4.17.21" @@ -376,9 +376,9 @@ "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" }, "node_modules/@thoughtspot/ts-chart-sdk": { - "version": "0.0.1-alpha.7", - "resolved": "https://registry.npmjs.org/@thoughtspot/ts-chart-sdk/-/ts-chart-sdk-0.0.1-alpha.7.tgz", - "integrity": "sha512-qlqEkXKiclkK1KipWJrTiQeMD5Y9cb4gwrzW8MWT/ef3RLdHP1rCdYtkA0XKioVtbhdGJlV97zUGQ1LPXP9XdA==", + "version": "0.0.1-alpha.8", + "resolved": "https://registry.npmjs.org/@thoughtspot/ts-chart-sdk/-/ts-chart-sdk-0.0.1-alpha.8.tgz", + "integrity": "sha512-zBvI1X5BjiDWNSmMEeXqvm4KcxDN8XmVH4Tfo80lCh1Vip48BjYub0/soLC7htaMixBYc/TbZYE6RSZsGtbr1A==", "dependencies": { "lodash": "^4.17.21", "react": "^17.0.2", diff --git a/example/custom-bar-chart/package.json b/example/custom-bar-chart/package.json index c40757a..96f5b8e 100644 --- a/example/custom-bar-chart/package.json +++ b/example/custom-bar-chart/package.json @@ -14,7 +14,7 @@ "vite": "^4.3.5" }, "dependencies": { - "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.7", + "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8", "chart.js": "^4.3.0", "chartjs-plugin-datalabels": "^2.2.0", "lodash": "^4.17.21" diff --git a/example/custom-bar-chart/pnpm-lock.yaml b/example/custom-bar-chart/pnpm-lock.yaml index fbf8a4b..9d615a7 100644 --- a/example/custom-bar-chart/pnpm-lock.yaml +++ b/example/custom-bar-chart/pnpm-lock.yaml @@ -1,14 +1,14 @@ lockfileVersion: 5.4 specifiers: - '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.7 + '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.8 chart.js: ^4.3.0 chartjs-plugin-datalabels: ^2.2.0 lodash: ^4.17.21 vite: ^4.3.5 dependencies: - '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.7 + '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.8 chart.js: 4.3.0 chartjs-plugin-datalabels: 2.2.0_chart.js@4.3.0 lodash: 4.17.21 @@ -220,8 +220,8 @@ packages: resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==} dev: false - /@thoughtspot/ts-chart-sdk/0.0.1-alpha.7: - resolution: {integrity: sha512-qlqEkXKiclkK1KipWJrTiQeMD5Y9cb4gwrzW8MWT/ef3RLdHP1rCdYtkA0XKioVtbhdGJlV97zUGQ1LPXP9XdA==} + /@thoughtspot/ts-chart-sdk/0.0.1-alpha.8: + resolution: {integrity: sha512-zBvI1X5BjiDWNSmMEeXqvm4KcxDN8XmVH4Tfo80lCh1Vip48BjYub0/soLC7htaMixBYc/TbZYE6RSZsGtbr1A==} dependencies: lodash: 4.17.21 react: 17.0.2 diff --git a/example/gantt/package-lock.json b/example/gantt/package-lock.json index bd1b730..995f597 100644 --- a/example/gantt/package-lock.json +++ b/example/gantt/package-lock.json @@ -8,7 +8,7 @@ "name": "gantt", "version": "0.0.0", "dependencies": { - "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.7", + "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8", "highcharts": "^11.1.0", "lodash": "^4.17.21" }, @@ -371,9 +371,9 @@ } }, "node_modules/@thoughtspot/ts-chart-sdk": { - "version": "0.0.1-alpha.7", - "resolved": "https://registry.npmjs.org/@thoughtspot/ts-chart-sdk/-/ts-chart-sdk-0.0.1-alpha.7.tgz", - "integrity": "sha512-qlqEkXKiclkK1KipWJrTiQeMD5Y9cb4gwrzW8MWT/ef3RLdHP1rCdYtkA0XKioVtbhdGJlV97zUGQ1LPXP9XdA==", + "version": "0.0.1-alpha.8", + "resolved": "https://registry.npmjs.org/@thoughtspot/ts-chart-sdk/-/ts-chart-sdk-0.0.1-alpha.8.tgz", + "integrity": "sha512-zBvI1X5BjiDWNSmMEeXqvm4KcxDN8XmVH4Tfo80lCh1Vip48BjYub0/soLC7htaMixBYc/TbZYE6RSZsGtbr1A==", "dependencies": { "lodash": "^4.17.21", "react": "^17.0.2", diff --git a/example/gantt/package.json b/example/gantt/package.json index 5f4a5f8..2f8fd6c 100644 --- a/example/gantt/package.json +++ b/example/gantt/package.json @@ -14,7 +14,7 @@ "vite": "^4.3.9" }, "dependencies": { - "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.7", + "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8", "highcharts": "^11.1.0", "lodash": "^4.17.21" } diff --git a/example/gantt/pnpm-lock.yaml b/example/gantt/pnpm-lock.yaml index 86bfead..4c0c298 100644 --- a/example/gantt/pnpm-lock.yaml +++ b/example/gantt/pnpm-lock.yaml @@ -1,7 +1,7 @@ lockfileVersion: 5.4 specifiers: - '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.7 + '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.8 '@types/lodash': ^4.14.195 highcharts: ^11.1.0 lodash: ^4.17.21 @@ -9,7 +9,7 @@ specifiers: vite: ^4.3.9 dependencies: - '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.7 + '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.8 highcharts: 11.1.0 lodash: 4.17.21 @@ -218,8 +218,8 @@ packages: dev: true optional: true - /@thoughtspot/ts-chart-sdk/0.0.1-alpha.7: - resolution: {integrity: sha512-qlqEkXKiclkK1KipWJrTiQeMD5Y9cb4gwrzW8MWT/ef3RLdHP1rCdYtkA0XKioVtbhdGJlV97zUGQ1LPXP9XdA==} + /@thoughtspot/ts-chart-sdk/0.0.1-alpha.8: + resolution: {integrity: sha512-zBvI1X5BjiDWNSmMEeXqvm4KcxDN8XmVH4Tfo80lCh1Vip48BjYub0/soLC7htaMixBYc/TbZYE6RSZsGtbr1A==} dependencies: lodash: 4.17.21 react: 17.0.2 diff --git a/example/gantt/src/main.ts b/example/gantt/src/main.ts index 0fbfdbc..d1e51e6 100644 --- a/example/gantt/src/main.ts +++ b/example/gantt/src/main.ts @@ -3,10 +3,13 @@ import { ChartColumn, ChartConfig, ChartModel, + ChartToTSEvent, + CustomChartContext, DataPointsArray, Query, getChartContext, } from '@thoughtspot/ts-chart-sdk'; +import { PointOptionsObject } from 'highcharts'; import Highcharts from 'highcharts/es-modules/masters/highcharts.src'; import 'highcharts/es-modules/masters/modules/gantt.src'; import _ from 'lodash'; @@ -16,12 +19,19 @@ function getDataForColumn(column: ChartColumn, dataArr: DataPointsArray) { return _.map(dataArr.dataValue, (row) => row[idx]); } -const getDataModel = (chartModel: any) => { - const columns = chartModel.columns; - const dataArr: DataPointsArray = chartModel.data[0].data; +function getParsedEvent(evt: any) { + return { + clientX: evt?.target?.plotX, + clientY: evt?.target?.plotY, + }; +} +const getDataModel = (ctx: CustomChartContext) => { + const chartModel = ctx.getChartModel(); + const columns = chartModel.columns; + const dataArr = chartModel?.data?.[0].data as DataPointsArray; // create point from data - const points = dataArr.dataValue.map((row: any[], idx: number) => { + const points = dataArr?.dataValue.map((row: any[], idx: number) => { return { id: `${row[0]} ${row[1]}`, parent: row[0], @@ -31,8 +41,27 @@ const getDataModel = (chartModel: any) => { completed: { amount: row[4], }, + events: { + mouseOver: (e) => { + ctx.emitEvent(ChartToTSEvent.ShowToolTip, { + event: getParsedEvent(e), + point: { + tuple: [ + { + columnId: columns[idx].id, + value: row[1], + }, + ], + }, + customTooltipContent: [], + }); + }, + mouseOut: () => { + ctx.emitEvent(ChartToTSEvent.HideToolTip); + }, + }, dependency: `${row[0]} ${row[5]}`, - }; + } as PointOptionsObject; }); // create projects from points & data @@ -71,11 +100,7 @@ const getDataModel = (chartModel: any) => { }; const renderChart = (ctx: any) => { - const chartModel = ctx.getChartModel(); - console.log('chartModel:', chartModel); - console.log('data:', chartModel.data); - - const dataModel = getDataModel(chartModel); + const dataModel = getDataModel(ctx); console.log('dataModel:', dataModel); @@ -85,7 +110,9 @@ const renderChart = (ctx: any) => { text: 'Gantt Chart with Progress Indicators', align: 'left', }, - + tooltip: { + enabled: false, + }, xAxis: { min: dataModel.minDate, max: dataModel.maxDate, @@ -127,7 +154,8 @@ const init = async () => { // following order. // [Project Name, Task, Start Date, End Date, Completion] - // TBD: do basic validation here to ensure that the chart is renderable + // TBD: do basic validation here to ensure that the chart is + // renderable if (columns.length < 4) { // not possible to plot a chart return []; diff --git a/example/react/custom-bar-chart/package-lock.json b/example/react/custom-bar-chart/package-lock.json index 0c2ea28..bf94b37 100644 --- a/example/react/custom-bar-chart/package-lock.json +++ b/example/react/custom-bar-chart/package-lock.json @@ -8,7 +8,7 @@ "name": "react-bar-chart", "version": "0.0.0", "dependencies": { - "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.5", + "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8", "chart.js": "^4.0.0", "chartjs-plugin-datalabels": "^2.2.0", "lodash": "^4.17.21", @@ -797,9 +797,9 @@ "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" }, "node_modules/@thoughtspot/ts-chart-sdk": { - "version": "0.0.1-alpha.5", - "resolved": "https://registry.npmjs.org/@thoughtspot/ts-chart-sdk/-/ts-chart-sdk-0.0.1-alpha.5.tgz", - "integrity": "sha512-TVTD5mWl6AIipOWKM4WFOHQxi/6T3OtAjT+Tm+lMzkEzdqAQK0ZcrI3jqGitnO/XWzFAkhejUJjW5Mkn+yu3XA==", + "version": "0.0.1-alpha.8", + "resolved": "https://registry.npmjs.org/@thoughtspot/ts-chart-sdk/-/ts-chart-sdk-0.0.1-alpha.8.tgz", + "integrity": "sha512-zBvI1X5BjiDWNSmMEeXqvm4KcxDN8XmVH4Tfo80lCh1Vip48BjYub0/soLC7htaMixBYc/TbZYE6RSZsGtbr1A==", "dependencies": { "lodash": "^4.17.21", "react": "^17.0.2", @@ -1902,9 +1902,9 @@ "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" }, "@thoughtspot/ts-chart-sdk": { - "version": "0.0.1-alpha.5", - "resolved": "https://registry.npmjs.org/@thoughtspot/ts-chart-sdk/-/ts-chart-sdk-0.0.1-alpha.5.tgz", - "integrity": "sha512-TVTD5mWl6AIipOWKM4WFOHQxi/6T3OtAjT+Tm+lMzkEzdqAQK0ZcrI3jqGitnO/XWzFAkhejUJjW5Mkn+yu3XA==", + "version": "0.0.1-alpha.8", + "resolved": "https://registry.npmjs.org/@thoughtspot/ts-chart-sdk/-/ts-chart-sdk-0.0.1-alpha.8.tgz", + "integrity": "sha512-zBvI1X5BjiDWNSmMEeXqvm4KcxDN8XmVH4Tfo80lCh1Vip48BjYub0/soLC7htaMixBYc/TbZYE6RSZsGtbr1A==", "requires": { "lodash": "^4.17.21", "react": "^17.0.2", diff --git a/example/react/custom-bar-chart/package.json b/example/react/custom-bar-chart/package.json index 618ad75..95e3ee4 100644 --- a/example/react/custom-bar-chart/package.json +++ b/example/react/custom-bar-chart/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.5", + "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8", "chart.js": "^4.0.0", "chartjs-plugin-datalabels": "^2.2.0", "lodash": "^4.17.21", diff --git a/example/react/custom-bar-chart/pnpm-lock.yaml b/example/react/custom-bar-chart/pnpm-lock.yaml index 793271c..2f1a4ab 100644 --- a/example/react/custom-bar-chart/pnpm-lock.yaml +++ b/example/react/custom-bar-chart/pnpm-lock.yaml @@ -1,7 +1,7 @@ lockfileVersion: 5.4 specifiers: - '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.5 + '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.8 '@types/lodash': 4.14.175 '@types/react': ^17.0.2 '@types/react-dom': ^17.0.11 @@ -16,7 +16,7 @@ specifiers: vite: ^4.3.9 dependencies: - '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.5 + '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.8 chart.js: 4.3.0 chartjs-plugin-datalabels: 2.2.0_chart.js@4.3.0 lodash: 4.17.21 @@ -498,8 +498,8 @@ packages: resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==} dev: false - /@thoughtspot/ts-chart-sdk/0.0.1-alpha.5: - resolution: {integrity: sha512-TVTD5mWl6AIipOWKM4WFOHQxi/6T3OtAjT+Tm+lMzkEzdqAQK0ZcrI3jqGitnO/XWzFAkhejUJjW5Mkn+yu3XA==} + /@thoughtspot/ts-chart-sdk/0.0.1-alpha.8: + resolution: {integrity: sha512-zBvI1X5BjiDWNSmMEeXqvm4KcxDN8XmVH4Tfo80lCh1Vip48BjYub0/soLC7htaMixBYc/TbZYE6RSZsGtbr1A==} dependencies: lodash: 4.17.21 react: 17.0.2 diff --git a/example/sunburst/package-lock.json b/example/sunburst/package-lock.json index 559730a..635de28 100644 --- a/example/sunburst/package-lock.json +++ b/example/sunburst/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.7", + "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8", "highcharts": "^11.0.1", "lodash": "^4.17.21" }, @@ -370,9 +370,9 @@ } }, "node_modules/@thoughtspot/ts-chart-sdk": { - "version": "0.0.1-alpha.7", - "resolved": "https://registry.npmjs.org/@thoughtspot/ts-chart-sdk/-/ts-chart-sdk-0.0.1-alpha.7.tgz", - "integrity": "sha512-qlqEkXKiclkK1KipWJrTiQeMD5Y9cb4gwrzW8MWT/ef3RLdHP1rCdYtkA0XKioVtbhdGJlV97zUGQ1LPXP9XdA==", + "version": "0.0.1-alpha.8", + "resolved": "https://registry.npmjs.org/@thoughtspot/ts-chart-sdk/-/ts-chart-sdk-0.0.1-alpha.8.tgz", + "integrity": "sha512-zBvI1X5BjiDWNSmMEeXqvm4KcxDN8XmVH4Tfo80lCh1Vip48BjYub0/soLC7htaMixBYc/TbZYE6RSZsGtbr1A==", "dependencies": { "lodash": "^4.17.21", "react": "^17.0.2", diff --git a/example/sunburst/package.json b/example/sunburst/package.json index 16e44ae..cbf6114 100644 --- a/example/sunburst/package.json +++ b/example/sunburst/package.json @@ -11,7 +11,7 @@ "author": "", "license": "ISC", "dependencies": { - "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.7", + "@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8", "highcharts": "^11.0.1", "lodash": "^4.17.21" }, diff --git a/example/sunburst/pnpm-lock.yaml b/example/sunburst/pnpm-lock.yaml index 70e849e..3ee2dd1 100644 --- a/example/sunburst/pnpm-lock.yaml +++ b/example/sunburst/pnpm-lock.yaml @@ -1,13 +1,13 @@ lockfileVersion: 5.4 specifiers: - '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.7 + '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.8 highcharts: ^11.0.1 lodash: ^4.17.21 vite: ^4.3.9 dependencies: - '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.7 + '@thoughtspot/ts-chart-sdk': 0.0.1-alpha.8 highcharts: 11.1.0 lodash: 4.17.21 @@ -214,8 +214,8 @@ packages: dev: true optional: true - /@thoughtspot/ts-chart-sdk/0.0.1-alpha.7: - resolution: {integrity: sha512-qlqEkXKiclkK1KipWJrTiQeMD5Y9cb4gwrzW8MWT/ef3RLdHP1rCdYtkA0XKioVtbhdGJlV97zUGQ1LPXP9XdA==} + /@thoughtspot/ts-chart-sdk/0.0.1-alpha.8: + resolution: {integrity: sha512-zBvI1X5BjiDWNSmMEeXqvm4KcxDN8XmVH4Tfo80lCh1Vip48BjYub0/soLC7htaMixBYc/TbZYE6RSZsGtbr1A==} dependencies: lodash: 4.17.21 react: 17.0.2 diff --git a/example/sunburst/sunburst.ts b/example/sunburst/sunburst.ts index cc4b155..bd95437 100644 --- a/example/sunburst/sunburst.ts +++ b/example/sunburst/sunburst.ts @@ -34,7 +34,15 @@ function getDataForColumn( return _.map(dataArr?.dataValue, (row) => row[idx]); } -function getDataModel(chartModel: ChartModel) { +function getParsedEvent(evt: any) { + return { + clientX: evt?.target?.plotX, + clientY: evt?.target?.plotY, + }; +} + +function getDataModel(ctx: CustomChartContext) { + const chartModel = ctx.getChartModel(); const configDimensions = chartModel.config?.chartConfig?.[0].dimensions ?? []; const dataArr = chartModel.data?.[0].data ?? undefined; @@ -57,6 +65,22 @@ function getDataModel(chartModel: ChartModel) { parent, id: currentId, name: colData[idx], + events: { + mouseOver: (e) => { + ctx.emitEvent(ChartToTSEvent.ShowToolTip, { + event: getParsedEvent(e), + point: { + tuple: [ + { columnId: xCol.id, value: colData[idx] }, + ], + }, + customTooltipContent: [], + }); + }, + mouseOut: () => { + ctx.emitEvent(ChartToTSEvent.HideToolTip); + }, + }, }; if (dataRowIdx === xAxisColumns.length - 1) { dataMap[currentId].value = yAxisColData[idx]; @@ -71,8 +95,7 @@ function getDataModel(chartModel: ChartModel) { } function render(ctx: CustomChartContext) { - const chartModel = ctx.getChartModel(); - const dataModel = getDataModel(chartModel); + const dataModel = getDataModel(ctx); try { const chart = Highcharts.chart({ @@ -142,6 +165,9 @@ function render(ctx: CustomChartContext) { ], }, ], + tooltip: { + enabled: false, + }, }); } catch (e) { console.error('renderfailed', e);