react-native-livechart 3.5.1 → 3.7.0

package/src/components/CustomMarkerOverlay.tsx

@@ -0,0 +1,168 @@
+import { useState } from "react";
+import { StyleSheet, View, type LayoutChangeEvent } from "react-native";
+import Animated, {
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  type SharedValue,
+} from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import type { ChartPadding } from "../draw/line";
+import { markersSignature, projectPoint } from "../math/markers";
+import type { LiveChartPoint, Marker, SeriesConfig } from "../types";
+
+/**
+ * One custom-rendered marker: a React Native element floated over the canvas and
+ * pinned to the marker's live `(time, value)` position. Each glyph projects its
+ * OWN marker every frame (mirrors `ConnectorGlyph`) so reordering the array can't
+ * make it flash another marker's spot, and the transform runs on the UI thread —
+ * no JS re-render as the chart scrolls/rescales.
+ *
+ * The element is auto-centered on the point: its size is measured via `onLayout`
+ * into a SharedValue, and the animated transform offsets by half that size.
+ * `pointerEvents="box-none"` lets empty space fall through to the scrub gesture
+ * while still allowing an interactive leaf inside the custom element to be tapped.
+ */
+function CustomMarkerView({
+  marker,
+  element,
+  engine,
+  padding,
+  seriesSV,
+  lineDataSV,
+}: {
+  marker: Marker;
+  element: React.ReactElement;
+  engine: ChartEngineLayout;
+  padding: ChartPadding;
+  seriesSV?: SharedValue<SeriesConfig[]>;
+  lineDataSV?: SharedValue<LiveChartPoint[]>;
+}) {
+  const time = marker.time;
+  const value = marker.value;
+  const seriesId = marker.seriesId;
+
+  const layout = useDerivedValue(() =>
+    projectPoint(time, value, seriesId, {
+      canvasWidth: engine.canvasWidth.get(),
+      canvasHeight: engine.canvasHeight.get(),
+      padTop: padding.top,
+      padBottom: padding.bottom,
+      padLeft: padding.left,
+      padRight: padding.right,
+      timestamp: engine.timestamp.get(),
+      displayWindow: engine.displayWindow.get(),
+      displayMin: engine.displayMin.get(),
+      displayMax: engine.displayMax.get(),
+      series: seriesSV?.get(),
+      lineData: lineDataSV?.get(),
+    }),
+  );
+
+  // Measured element size, so the transform can center it on the point.
+  const size = useSharedValue({ width: 0, height: 0 });
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    size.value = { width, height };
+  };
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const l = layout.get();
+    const s = size.get();
+    return {
+      opacity: l.visible ? 1 : 0,
+      transform: [
+        { translateX: l.x - s.width / 2 },
+        { translateY: l.y - s.height / 2 },
+      ],
+    };
+  });
+
+  return (
+    <Animated.View
+      pointerEvents="box-none"
+      onLayout={onLayout}
+      style={[styles.anchor, animatedStyle]}
+    >
+      {element}
+    </Animated.View>
+  );
+}
+
+/**
+ * React Native overlay (NOT Skia) that floats `renderMarker` elements over the
+ * Skia canvas, one per marker the consumer chooses to customize. Rendered as a
+ * sibling of `<Canvas>` (like {@link AxisLabelOverlay}) so the elements can be
+ * any RN view — including non-Skia effects (e.g. a glass `BlurView`) — and stay
+ * crisp at native resolution instead of being rasterized into the marker atlas.
+ *
+ * The set of markers is mirrored to JS state via `markersSignature` (same as
+ * `MarkerOverlay`); `renderMarker` is then called per marker on the JS thread.
+ * Markers it returns an element for are excluded from the Skia atlas upstream, so
+ * there's no double-draw.
+ */
+export function CustomMarkerOverlay({
+  markers,
+  renderMarker,
+  engine,
+  padding,
+  series,
+  lineData,
+}: {
+  markers: SharedValue<Marker[]>;
+  renderMarker: (marker: Marker) => React.ReactElement | null | undefined;
+  engine: ChartEngineLayout;
+  padding: ChartPadding;
+  /** Multi-series data, used to anchor markers by `seriesId`. */
+  series?: SharedValue<SeriesConfig[]>;
+  /** Single-series line data; anchors markers that omit `value`. */
+  lineData?: SharedValue<LiveChartPoint[]>;
+}) {
+  const [snapshot, setSnapshot] = useState<Marker[]>(() => markers.get().slice());
+
+  const pull = () => {
+    setSnapshot(markers.get().slice());
+  };
+
+  useAnimatedReaction(
+    () => markersSignature(markers.get()),
+    /* istanbul ignore next -- scheduleOnRN from UI-thread reaction */
+    (sig, prev) => {
+      if (sig !== prev) scheduleOnRN(pull);
+    },
+    [markers, pull],
+  );
+
+  // Resolve each marker's custom element once per snapshot on the JS thread.
+  const custom: { marker: Marker; element: React.ReactElement }[] = [];
+  for (let i = 0; i < snapshot.length; i++) {
+    const m = snapshot[i];
+    const element = renderMarker(m);
+    if (element != null) custom.push({ marker: m, element });
+  }
+  if (custom.length === 0) return null;
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      {custom.map(({ marker, element }) => (
+        <CustomMarkerView
+          key={marker.id}
+          marker={marker}
+          element={element}
+          engine={engine}
+          padding={padding}
+          seriesSV={series}
+          lineDataSV={lineData}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // top/left 0 + translate so the measured element can be centered on the point.
+  anchor: { position: "absolute", top: 0, left: 0 },
+});

package/src/components/CustomTooltipOverlay.tsx

@@ -0,0 +1,135 @@
+import { StyleSheet, View, type LayoutChangeEvent } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  type SharedValue,
+} from "react-native-reanimated";
+
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import type { ChartPadding } from "../draw/line";
+import type { TooltipLayout } from "../hooks/crosshairShared";
+import type { TooltipRenderProps } from "../types";
+
+// Mirror the Skia tooltip's offsets (see crosshairShared.ts) so a custom pill
+// lines up with where the built-in one would sit. The vertical edge gap is
+// configurable via `scrub.tooltipMargin` (passed as `margin`).
+const OFFSET_X = 12;
+const EDGE_GAP = 4;
+
+/**
+ * React Native overlay (NOT Skia) that floats a custom `renderTooltip` element
+ * over the Skia canvas while scrubbing. A sibling of `<Canvas>` — like
+ * {@link AxisLabelOverlay} and `CustomMarkerOverlay` — so the element can be any
+ * RN view (e.g. a glass `BlurView`) and stays crisp at native resolution.
+ *
+ * The element is positioned entirely on the UI thread: a `useAnimatedStyle`
+ * transform tracks `scrubX` + the resolved `tooltipPlacement`, measuring the
+ * element's own size via `onLayout` so it can flip/clamp/center correctly — so
+ * movement stays smooth without JS re-renders, unlike rebuilding the tooltip
+ * from the JS-thread `onScrub`. The consumer binds the {@link TooltipRenderProps}
+ * SharedValues to animated text for the value/date to update on the UI thread.
+ *
+ * `pointerEvents="box-none"` lets the scrub pan gesture pass through the empty
+ * area (and any non-interactive tooltip body) while still allowing an
+ * interactive leaf inside the custom element to be tapped.
+ */
+export function CustomTooltipOverlay({
+  renderTooltip,
+  scrubX,
+  scrubValue,
+  scrubTime,
+  scrubActive,
+  crosshairOpacity,
+  tooltipLayout,
+  engine,
+  padding,
+  placement,
+  margin = 8,
+}: {
+  renderTooltip: (ctx: TooltipRenderProps) => React.ReactElement | null | undefined;
+  scrubX: SharedValue<number>;
+  scrubValue: SharedValue<number | null>;
+  scrubTime: SharedValue<number>;
+  scrubActive: SharedValue<boolean>;
+  crosshairOpacity: SharedValue<number>;
+  tooltipLayout: SharedValue<TooltipLayout>;
+  engine: ChartEngineLayout;
+  padding: ChartPadding;
+  placement: "side" | "top" | "bottom";
+  /** Gap (px) between the pill and the plot edge it's pinned to. Default 8. */
+  margin?: number;
+}) {
+  // Formatted strings come ready-made off the layout (formatted UI-side in
+  // computeTooltipLayout), so consumers don't need a worklet-safe formatter.
+  const valueStr = useDerivedValue(() => tooltipLayout.get().valueStr);
+  const timeStr = useDerivedValue(() => tooltipLayout.get().timeStr);
+
+  const ctx: TooltipRenderProps = {
+    value: scrubValue,
+    time: scrubTime,
+    valueStr,
+    timeStr,
+    active: scrubActive,
+  };
+  const element = renderTooltip(ctx);
+
+  // Measured element size, so the transform can flip/center/clamp the pill.
+  const size = useSharedValue({ width: 0, height: 0 });
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    size.value = { width, height };
+  };
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const active = scrubActive.get();
+    const sx = scrubX.get();
+    const cw = engine.canvasWidth.get();
+    const ch = engine.canvasHeight.get();
+    const s = size.get();
+    const rightEdge = cw - padding.right;
+
+    let x: number;
+    let y: number;
+    if (placement === "side") {
+      x = sx + OFFSET_X;
+      if (x + s.width > rightEdge - EDGE_GAP) x = sx - s.width - OFFSET_X;
+      y = padding.top + margin;
+    } else {
+      const leftBound = padding.left + EDGE_GAP;
+      const rightBound = rightEdge - EDGE_GAP - s.width;
+      x = Math.min(
+        Math.max(sx - s.width / 2, leftBound),
+        Math.max(leftBound, rightBound),
+      );
+      y =
+        placement === "top"
+          ? padding.top + margin
+          : ch - padding.bottom - margin - s.height;
+    }
+
+    return {
+      opacity: active ? crosshairOpacity.get() : 0,
+      transform: [{ translateX: x }, { translateY: y }],
+    };
+  });
+
+  if (element == null) return null;
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      <Animated.View
+        pointerEvents="box-none"
+        onLayout={onLayout}
+        style={[styles.anchor, animatedStyle]}
+      >
+        {element}
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // top/left 0 + transform so the measured element can be placed precisely.
+  anchor: { position: "absolute", top: 0, left: 0 },
+});

package/src/components/LiveChart.tsx

@@ -86,6 +86,8 @@ import {
   ThresholdLineOverlay,
 } from "./ThresholdLineOverlay";
 import { AxisLabelOverlay } from "./AxisLabelOverlay";
+import { CustomMarkerOverlay } from "./CustomMarkerOverlay";
+import { CustomTooltipOverlay } from "./CustomTooltipOverlay";
 import { BadgeOverlay } from "./BadgeOverlay";
 import { CrosshairOverlay } from "./CrosshairOverlay";
 import { DegenParticlesOverlay } from "./DegenParticlesOverlay";
@@ -199,6 +201,8 @@ function useLiveChartController({
   markers,
   onMarkerHover,
   markerHitRadius = 16,
+  renderMarker,
+  renderTooltip,
   leftEdgeFade = true,
 
   // ── Callbacks ───────────────────────────────────────────────────────────
@@ -530,6 +534,10 @@ function useLiveChartController({
     onScrubAction,
     metricsCfg.badge,
     markersActive || refPressActive ? deferTapHit : undefined,
+    scrubCfg?.tooltipPlacement ?? "side",
+    scrubCfg?.tooltipShowValue ?? true,
+    scrubCfg?.tooltipShowTime ?? true,
+    scrubCfg?.tooltipMargin ?? 8,
   );
 
   // Scrub-action composes a Tap (place/move the reticle, press the badge, dismiss)
@@ -682,6 +690,8 @@ function useLiveChartController({
     rootGesture,
     markersActive,
     markersSV,
+    renderMarker,
+    renderTooltip,
     // selection dot: resolved config + fallback color (the chart line/accent color)
     selectionDot: selectionDotCfg,
     selectionColor: lineProp?.color ?? palette.line,
@@ -819,6 +829,7 @@ function ChartStack({ model }: { model: LiveChartModel }) {
     degenPackRevision,
     markersActive,
     markersSV,
+    renderMarker,
     emptyText,
     metricsCfg,
     layoutWidth,
@@ -996,6 +1007,7 @@ function ChartStack({ model }: { model: LiveChartModel }) {
             palette={palette}
             font={skiaFont}
             lineData={engine.data}
+            renderMarker={renderMarker}
           />
         </Group>
       )}
@@ -1055,8 +1067,14 @@ function ChartScrubLayer({ model }: { model: LiveChartModel }) {
     dotOuterRadius,
     selectionDot,
     selectionColor,
+    renderTooltip,
   } = model;
 
+  // A custom line-mode tooltip is an RN overlay (sibling of <Canvas>), so the
+  // default Skia pill is suppressed here while it's active. Candle keeps its
+  // built-in OHLC stack (renderTooltip is ignored in candle mode).
+  const customTooltipActive = !isCandle && renderTooltip != null;
+
   if (!tradeStreamResolved && !scrubCfg) return null;
 
   // Extend the scrub dim past the plot's right edge to fully cover the live dot
@@ -1089,7 +1107,7 @@ function ChartScrubLayer({ model }: { model: LiveChartModel }) {
           padding={effectivePadding}
           palette={palette}
           font={skiaFont}
-          showTooltip={scrubCfg.tooltip}
+          showTooltip={scrubCfg.tooltip && !customTooltipActive}
           selectionDot={selectionDot}
           selectionY={crosshair.scrubDotY}
           scrubActive={crosshair.scrubActive}
@@ -1101,6 +1119,9 @@ function ChartScrubLayer({ model }: { model: LiveChartModel }) {
           tooltipBackground={scrubCfg.tooltipBackground}
           tooltipColor={scrubCfg.tooltipColor}
           tooltipBorderColor={scrubCfg.tooltipBorderColor}
+          tooltipBorderRadius={scrubCfg.tooltipBorderRadius}
+          tooltipShowValue={scrubCfg.tooltipShowValue}
+          tooltipShowTime={scrubCfg.tooltipShowTime}
         >
           {/* Candle charts render a multi-line OHLC tooltip; the line
               chart falls back to CrosshairOverlay's default value/time
@@ -1251,6 +1272,13 @@ export function LiveChart(props: LiveChartProps) {
     formatValue,
     topLabelCfg,
     bottomLabelCfg,
+    markersActive,
+    markersSV,
+    renderMarker,
+    renderTooltip,
+    scrubCfg,
+    crosshair,
+    isCandle,
   } = model;
 
   return (
@@ -1306,6 +1334,36 @@ export function LiveChart(props: LiveChartProps) {
           defaultColor={palette.gridLabel}
           padding={effectivePadding}
         />
+
+        {/* Custom-rendered markers — RN views floated over the canvas (non-Skia),
+            pinned to each marker's live position. Sibling of <Canvas>. */}
+        {markersActive && renderMarker && (
+          <CustomMarkerOverlay
+            markers={markersSV}
+            renderMarker={renderMarker}
+            engine={engine}
+            padding={effectivePadding}
+            lineData={engine.data}
+          />
+        )}
+
+        {/* Custom scrub tooltip — an RN view floated over the canvas (non-Skia),
+            positioned on the UI thread. Sibling of <Canvas>. Line mode only. */}
+        {scrubCfg && renderTooltip && !isCandle && (
+          <CustomTooltipOverlay
+            renderTooltip={renderTooltip}
+            scrubX={crosshair.scrubX}
+            scrubValue={crosshair.scrubValue}
+            scrubTime={crosshair.scrubTime}
+            scrubActive={crosshair.scrubActive}
+            crosshairOpacity={crosshair.crosshairOpacity}
+            tooltipLayout={crosshair.tooltipLayout}
+            engine={engine}
+            padding={effectivePadding}
+            placement={scrubCfg.tooltipPlacement}
+            margin={scrubCfg.tooltipMargin}
+          />
+        )}
       </View>
     </GestureDetector>
   );

package/src/components/LiveChartSeries.tsx

@@ -63,6 +63,7 @@ import {
 } from "../theme";
 import type { LiveChartSeriesProps, Marker, SeriesConfig } from "../types";
 import { AxisLabelOverlay } from "./AxisLabelOverlay";
+import { CustomMarkerOverlay } from "./CustomMarkerOverlay";
 import { CrosshairLine } from "./CrosshairLine";
 import { DegenParticlesOverlay } from "./DegenParticlesOverlay";
 import { LeftEdgeFade } from "./LeftEdgeFade";
@@ -143,6 +144,7 @@ function useLiveChartSeriesController({
   markers,
   onMarkerHover,
   markerHitRadius = 16,
+  renderMarker,
   leftEdgeFade = true,
 }: LiveChartSeriesProps) {
   const emptyMarkers = useSharedValue<Marker[]>([]);
@@ -386,6 +388,7 @@ function useLiveChartSeriesController({
     rootGesture,
     markersActive,
     markersSV,
+    renderMarker,
     // selection dot: resolved config + fallback color (the leading series' color)
     selectionDot: selectionDotCfg,
     selectionColor: lineColors[0],
@@ -426,6 +429,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
     degenPackRevision,
     markersActive,
     markersSV,
+    renderMarker,
     series,
     emptyText,
     metricsCfg,
@@ -541,6 +545,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
             palette={palette}
             font={skiaFont}
             series={series}
+            renderMarker={renderMarker}
           />
         </Group>
       )}
@@ -649,6 +654,9 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
     formatValue,
     topLabelCfg,
     bottomLabelCfg,
+    markersActive,
+    markersSV,
+    renderMarker,
   } = model;
 
   // Extend the scrub dim past the plot's right edge to fully cover the series
@@ -735,6 +743,18 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
             defaultColor={palette.gridLabel}
             padding={effectivePadding}
           />
+
+          {/* Custom-rendered markers — RN views floated over the canvas
+              (non-Skia), pinned to each marker's live position. */}
+          {markersActive && renderMarker && (
+            <CustomMarkerOverlay
+              markers={markersSV}
+              renderMarker={renderMarker}
+              engine={engine}
+              padding={effectivePadding}
+              series={series}
+            />
+          )}
         </View>
       </GestureDetector>
       {legendCfg.position === "bottom" ? legend : null}

package/src/components/MarkerOverlay.tsx

@@ -148,6 +148,7 @@ export function MarkerOverlay({
   font,
   series,
   lineData,
+  renderMarker,
 }: {
   markers: SharedValue<Marker[]>;
   engine: ChartEngineLayout;
@@ -158,6 +159,12 @@ export function MarkerOverlay({
   series?: SharedValue<SeriesConfig[]>;
   /** Single-series line data; anchors markers that omit `value`. */
   lineData?: SharedValue<LiveChartPoint[]>;
+  /**
+   * When provided, markers it returns an element for are rendered as RN views by
+   * `CustomMarkerOverlay` instead — so they're excluded from the atlas here to
+   * avoid a (blurry) glyph drawn behind the custom element.
+   */
+  renderMarker?: (marker: Marker) => unknown;
 }) {
   // Seed from the current markers at mount; the reaction below keeps it in sync.
   const [snapshot, setSnapshot] = useState<Marker[]>(() => markers.get().slice());
@@ -177,6 +184,24 @@ export function MarkerOverlay({
     [markers, pull],
   );
 
+  // Ids of markers the consumer renders as custom RN views (CustomMarkerOverlay).
+  // Stabilized via a string key so an inline `renderMarker` that returns the same
+  // set doesn't churn `customIds`' identity (which the per-frame worklet captures).
+  const customKey = useMemo(() => {
+    if (!renderMarker) return "";
+    let k = "";
+    for (let i = 0; i < snapshot.length; i++) {
+      const m = snapshot[i];
+      if (renderMarker(m) != null) k += `${m.id}\x1f`;
+    }
+    return k;
+  }, [snapshot, renderMarker]);
+  const customIds = useMemo<Record<string, true>>(() => {
+    const o: Record<string, true> = {};
+    for (const id of customKey.split("\x1f")) if (id) o[id] = true;
+    return o;
+  }, [customKey]);
+
   // Rebuild the atlas image only when the set of distinct appearances or the
   // theme/font changes — never per frame. `markersSignature` already drives the
   // snapshot, so this useMemo re-runs at most at the snapshot cadence.
@@ -184,17 +209,18 @@ export function MarkerOverlay({
     const sigs = new Set<string>();
     for (let i = 0; i < snapshot.length; i++) {
       const m = snapshot[i];
-      if (!isConnectorMarker(m)) sigs.add(markerAppearanceSig(m));
+      if (!isConnectorMarker(m) && !customIds[m.id])
+        sigs.add(markerAppearanceSig(m));
     }
     return Array.from(sigs).sort().join("\x1e");
-  }, [snapshot]);
+  }, [snapshot, customIds]);
   // Cells bake in resolved colors; include the palette fields they depend on.
   const paletteKey = `${palette.bgRgb.join(",")}|${palette.line}|${palette.refLine}|${palette.dotUp}|${palette.refLabel}`;
   // Rasterize at the screen's device-pixel ratio so sprites stay crisp on
   // retina canvases instead of being upscaled from a logical-sized texture.
   const dpr = PixelRatio.get();
   const atlas = useMemo(
-    () => buildMarkerAtlas(snapshot, palette, font, dpr),
+    () => buildMarkerAtlas(snapshot.filter((m) => !customIds[m.id]), palette, font, dpr),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- appearanceKey/paletteKey capture the inputs that change cell pixels
     [appearanceKey, paletteKey, font, dpr],
   );
@@ -245,6 +271,8 @@ export function MarkerOverlay({
         if (!pt.visible) continue;
         const m = ms[i];
         if (isConnectorMarker(m)) continue;
+        // Custom-rendered markers are floated as RN views, not drawn here.
+        if (customIds[m.id]) continue;
         const cell = cells[markerAppearanceSig(m)];
         if (!cell) continue;
         // Center the cell on the projected point. The cell's source rect is in
@@ -256,7 +284,7 @@ export function MarkerOverlay({
       }
       return { transforms, sprites };
     },
-    [cells, invScale, markers, engine, padding, series, lineData],
+    [cells, customIds, invScale, markers, engine, padding, series, lineData],
   );
   const transforms = useDerivedValue(() => atlasData.get().transforms, [atlasData]);
   const sprites = useDerivedValue(() => atlasData.get().sprites, [atlasData]);

package/src/core/resolveConfig.ts

@@ -89,6 +89,16 @@ export interface ResolvedScrubConfig {
   tooltipColor: string | undefined;
   /** undefined → palette.tooltipBorder */
   tooltipBorderColor: string | undefined;
+  /** Tooltip pill corner radius in px. */
+  tooltipBorderRadius: number;
+  /** Where the tooltip pill sits relative to the scrub line. */
+  tooltipPlacement: "side" | "top" | "bottom";
+  /** Gap (px) between the tooltip and the plot edge it's pinned to. */
+  tooltipMargin: number;
+  /** Show the value row in the default tooltip body. */
+  tooltipShowValue: boolean;
+  /** Show the time row in the default tooltip body. */
+  tooltipShowTime: boolean;
   /** Press-and-hold delay (ms) before scrubbing activates. 0 = immediate. */
   panGestureDelay: number;
 }
@@ -357,6 +367,11 @@ const SCRUB_DEFAULTS: ResolvedScrubConfig = {
   tooltipBackground: undefined,
   tooltipColor: undefined,
   tooltipBorderColor: undefined,
+  tooltipBorderRadius: 5,
+  tooltipPlacement: "side",
+  tooltipMargin: 8,
+  tooltipShowValue: true,
+  tooltipShowTime: true,
   panGestureDelay: 0,
 };