diff --git a/src/ChartInternal/interactions/interaction.ts b/src/ChartInternal/interactions/interaction.ts index 34e9dacaa..53a546464 100644 --- a/src/ChartInternal/interactions/interaction.ts +++ b/src/ChartInternal/interactions/interaction.ts @@ -180,6 +180,7 @@ export default { if (element) { const isMultipleX = $$.isMultipleX(); + const isRotated = config.axis_rotated; let {width, left, top} = element.getBoundingClientRect(); if (hasAxis && !hasRadar && !isMultipleX) { @@ -197,9 +198,11 @@ export default { } const x = left + (mouse ? mouse[0] : 0) + ( - isMultipleX || config.axis_rotated ? 0 : (width / 2) + isMultipleX || isRotated ? 0 : (width / 2) ); - const y = top + (mouse ? mouse[1] : 0); + + // value 4, is to adjust coordinate value set from: scale.ts - updateScales(): $$.getResettedPadding(1) + const y = top + (mouse ? mouse[1] : 0) + (isRotated ? 4 : 0); const params = { screenX: x, screenY: y, diff --git a/src/config/Options/axis/x.ts b/src/config/Options/axis/x.ts index 4f2b12ea0..c61f34f7b 100644 --- a/src/config/Options/axis/x.ts +++ b/src/config/Options/axis/x.ts @@ -120,7 +120,7 @@ export default { * @memberof Options * @type {Function|string} * @default undefined - * @see [D3's time specifier](https://github.com/d3/d3-time-format#locale_format) + * @see [D3's time specifier](https://d3js.org/d3-time-format#locale_format) * @example * axis: { * x: { diff --git a/src/config/Options/data/axis.ts b/src/config/Options/data/axis.ts index 4e8425cc0..63c3d13f8 100644 --- a/src/config/Options/data/axis.ts +++ b/src/config/Options/data/axis.ts @@ -46,7 +46,7 @@ export default { * type: "timeseries" * } * } - * @see [D3's time specifier](https://github.com/d3/d3-time-format#locale_format) + * @see [D3's time specifier](https://d3js.org/d3-time-format#locale_format) */ data_xFormat: "%Y-%m-%d", diff --git a/test/api/tooltip-spec.ts b/test/api/tooltip-spec.ts index a8423d20e..42afe7d89 100644 --- a/test/api/tooltip-spec.ts +++ b/test/api/tooltip-spec.ts @@ -363,4 +363,76 @@ describe("API tooltip", () => { expect(tooltip.select(".value").text()).to.be.equal("34.6%"); }); }); + + describe("on rotated axis", () => { + before(() => { + args = { + data: { + columns: [ + ["data1", 150, 140, 110, 100, 300], + ["data1", 30, 200, 100, 400, 150], + ["data2", 130, 340, 200, 500, 250] + ], + type: "line" + }, + axis: { + rotated: true + } + }; + }); + + function checkTooltip(x, categoryName?) { + const type = chart.config("axis.x.type"); + let value = x; + + // when + chart.tooltip.show({x}); + + let th = chart.$.tooltip.select("th").text(); + + if (type === "timeseries") { + value = chart.internal.format.xAxisTick(x); + } + + expect(isNaN(th) ? th : +th).to.be.equal(categoryName ?? value); + } + + it("check for indexed x axis type", () => { + chart.xs().data1.forEach(v => { + checkTooltip(v); + }); + }); + + it("set options", () => { + args.data.x = "x"; + args.data.columns.unshift( + ["x", "2023-01-01", "2023-01-02", "2023-01-03", "2023-01-04", "2023-01-05"] + ); + args.axis.x = { + type: "timeseries", + tick: { + format: "%Y-%m-%d" + } + }; + }); + + it("check for timeseries x axis type", () => { + chart.xs().data1.forEach(v => { + checkTooltip(+v); + }); + }); + + it("set options", () => { + args.data.columns[0] = ["x", "a", "b", "c", "d", "e"]; + args.axis.x = { + type: "category" + }; + }); + + it("check for category x axis type", () => { + chart.categories().forEach((v, i) => { + checkTooltip(i, v); + }); + }); + }); }); diff --git a/test/internals/tooltip-spec.ts b/test/internals/tooltip-spec.ts index 689727e83..f76ce74cf 100644 --- a/test/internals/tooltip-spec.ts +++ b/test/internals/tooltip-spec.ts @@ -1887,7 +1887,7 @@ describe("TOOLTIP", function() { chart.$.chart.style("margin-top", "100px"); chart.tooltip.show({index:1}); - expect(chart.$.tooltip.select("th").text()).to.be.equal("0"); + expect(chart.$.tooltip.select("th").text()).to.be.equal("1"); chart.$.chart.style("margin-top", null); });