Multiple Overview Charts mapped to Axes

Hello,
First of all, I want to mention and share this example, which demonstrates how to control a visible range using a custom slider component: https://www.scichart.com/demo/react/html-annotations
This could be an alternative approach.

Otherwise, we’ve just released v5.2 with some fixes, including the Vertical Overview fix.
This allowed us to proceed with creating a solution for an overview customisation that would bind it to the Y-axis.
Currently, it looks like a workaround, but we will add corresponding tasks to improve it in the future.

Live Demo

  import {
    TSufaceDefinition,
    EAutoRange,
    EAxisAlignment,
    FastLineRenderableSeries,
    IOverviewOptions,
    MouseWheelZoomModifier,
    NumericAxis,
    SciChartJSDarkTheme,
    SciChartOverview,
    SciChartSurface,
    Thickness,
    XyDataSeries,
    ZoomExtentsModifier,
    ZoomPanModifier,
  } from "scichart";

  import { AxisSynchronizer } from "./AxisSynchronizer";

// SciChart.JS allows to create a chart and its elemnents from JSON-like definition object or explicitly via corresponding constructors and methods.
// Find more at https://www.scichart.com/documentation/js/v5/2d-charts/builder-api/builder-api-overview/

// If you want to use config-based approach, add your definition here and uncomment the corresponding SciChartReact component in App.tsx
export const chartConfig: TSurfaceDefinition = {};

export const initChartFunction = async (
  rootElement: HTMLDivElement | string
) => {
  const { wasmContext, sciChartSurface } = await SciChartSurface.create(
    rootElement
  );

  // Basic setup of primary axes and series
  const xAxis = new NumericAxis(wasmContext, {
    id: "mainXAxis",
    axisAlignment: EAxisAlignment.Bottom,
    autoRange: EAutoRange.Once,
  });
  xAxis.labelProvider.precision = 0;
  sciChartSurface.xAxes.add(xAxis);

  const yAxis = new NumericAxis(wasmContext, {
    id: "mainYAxis",
    axisAlignment: EAxisAlignment.Left,
    // visibleRange: new NumberRange(-5000, 5000),
    autoRange: EAutoRange.Once,
  });
  yAxis.labelProvider.precision = 0;
  sciChartSurface.yAxes.add(yAxis);

  const POINTS = 10000;
  const dataSeries = new XyDataSeries(wasmContext);
  const xValues = new Array(POINTS);
  const yValues = new Array(POINTS);
  let prev = 0;
  for (let i = 0; i < POINTS; i++) {
    const cur = Math.random() * 10 - 5;
    xValues[i] = i;
    yValues[i] = prev + cur;
    prev += cur;
  }
  dataSeries.appendRange(xValues, yValues);

  const rendSeries = new FastLineRenderableSeries(wasmContext, {
    dataSeries,
    stroke: "#99EE99FF",
    strokeThickness: 2,
    xAxisId: xAxis.id,
    yAxisId: yAxis.id,
  });
  sciChartSurface.renderableSeries.add(rendSeries);

  ////

  // customization that enables vertical overview

  // 1. Define Y Range limits
  // You can know your data limits for Y values, but to get this automatically we can use Renderable Series API.
  // We will use the simplest: `sciChartSurface.zoomExtents();`

  sciChartSurface.zoomExtents();

  // // // Here is other approach to do it manually:
  // // ensure that layout is measured by allowing the surface to render once with the default axes
  // await sciChartSurface.nextStateRender()

  // // abd then calculate the range
  // const yRange = rendSeries.getYRange(rendSeries.getXRange(), false);

  // // optionally prevent panning higher or lower than existing y  values
  // yAxis.visibleRangeLimit = yRange

  // 2. Create additional axes for binding to Vertical Overview
  const xAxisRight = new NumericAxis(wasmContext, {
    id: "xRight", // id the vertical overview would use
    axisAlignment: EAxisAlignment.Right,
    // visibleRange: new NumberRange(yRange.min, yRange.max),
    autoRange: EAutoRange.Never,
    isVisible: false,
  });
  xAxisRight.labelProvider.precision = 0;
  sciChartSurface.xAxes.add(xAxisRight);

  const yAxisTop = new NumericAxis(wasmContext, {
    id: "yTop", // id the vertical overview would use
    axisAlignment: EAxisAlignment.Top,
    autoRange: EAutoRange.Never,
    isVisible: false,
  });
  sciChartSurface.yAxes.add(yAxisTop);

  // sync additional Y axis with the main Y axis
  const axisSynchronizer = new AxisSynchronizer(yAxis.visibleRange, [
    yAxis,
    xAxisRight,
  ]);

  // make sure additional axes are ignored by modifiers so that they do not change visible range upn interactions automatically,
  // but rather wait for main Y axis subscription to sync it
  const commonModifierExcludeOptions = {
    excludedXAxisIds: [xAxisRight.id],
    excludedYAxisIds: [yAxisTop.id],
  };

  sciChartSurface.chartModifiers.add(
    new ZoomPanModifier(commonModifierExcludeOptions)
  );
  sciChartSurface.chartModifiers.add(
    new ZoomExtentsModifier(commonModifierExcludeOptions)
  );
  sciChartSurface.chartModifiers.add(
    new MouseWheelZoomModifier(commonModifierExcludeOptions)
  );

  // If using React app SciChartNestedOverview component from scichart-react could be used to create an overview.

  // Otherwise general approach for non React apps:
  // const horizontalOverview = await SciChartOverview.create(
  //     sciChartSurface,
  //     "horizontalOverviewContainerId",
  //     horizontalOverviewOptions
  // );

  // const verticalOverview = await SciChartOverview.create(
  //     sciChartSurface,
  //     "verticalOverviewContainerId",
  //     verticalOverviewOptions
  // );

  // sciChartSurface.addDeletable(horizontalOverview, verticalOverview)

  return { sciChartSurface };
};

// And these are the overview configuration options
export const horizontalOverviewOptions: IOverviewOptions = {
  mainAxisId: "mainXAxis",
  secondaryAxisId: "mainYAxis",
};
export const verticalOverviewOptions: IOverviewOptions = {
  mainAxisId: "xRight",
  secondaryAxisId: "yTop",
  theme: new SciChartJSDarkTheme(),
  // make the overview thin without extra padding to look like scrollbar
  padding: Thickness.fromNumber(0),
  overviewXAxisOptions: { flippedCoordinates: true },
  overviewYAxisOptions: { flippedCoordinates: true },
};