@@ -81,18 +81,14 @@ export const hasMillisecondTimestamps = (chartData: KChartData) =>
81
81
( ds ) => ds . data [ 0 ] && ( ds . data [ 0 ] as ScatterDataPoint ) . x . toString ( ) . length >= 13 ,
82
82
)
83
83
84
+ /**
85
+ * Adjust the tooltip's horizontal position based on its width and cursor location relative to the chart center.
86
+ * This logic ensures consistent visual placement of a custom tooltip, as ChartJS offers limited direct control.
87
+ */
84
88
export const horizontalTooltipPositioning = ( position : Point , tooltipWidth : number , chartCenterX : number ) => {
85
- // We are manipulating an initial positioning logic that appears to be quite arbitrary.
86
- // ChartJS offers limited documentation on this. The logic that follows has been tested across multiple scenarios
87
- // and provides the most consistent visual output.
88
- // The goal is to shift the tooltip to either the left or right in proportion to the tooltip's width,
89
- // depending on the cursor's location relative to the chart's center.
90
- // Additionally, we need to scale by the ratio of the tooltip width to chart width in order to
91
- // adjust for any changes in the tooltip width.
92
- // The original tooltip position tends to lean towards the center of the tooltip — this is one of the arbitrary aspects we are dealing with.
93
- // It appears that the default position.x and position.y values don't consistently align with the tooltip.
94
- // It's likely that these initial position.x and position.y values refer to the position of ChartJS' default tooltip,
95
- // which is not visible as we're using a custom tooltip.
89
+ // Scaling factor that prevents the tooltip from shifting too far when it's wide, or too little when
90
+ // it's narrow. Ensuring that as the tooltip width changes, the horizontal offset is proportionally
91
+ // adjusted to maintain a visually balanced placement.
96
92
const withRatioScalingBase = 1150 // Found through trial and error.
97
93
const widthRatio = Math . min ( tooltipWidth / withRatioScalingBase , 1 ) // Limit the ratio to a maximum of 1
98
94
// Define a scaling factor for when the tooltip is positioned to the right of the cursor.
0 commit comments