SciChart.js: How to prevent SciChartOverview from extending past the main view's visible range limit.

Hi David,

I’ve fetched the latest revision of 3.5.706 and unfortunately it’s still possible to extend the chart overview’s grips such that it doesn’t apply the mainAxisId‘s visible range properties constraints of the timeline axis (see code below) .

I’ve provided a visual image attached image (PNG) to help me more clearly explain to you (and others) the behaviour that I’m experiencing.

• visibleRangeLimit property: spans from 10:43:12 AM – 10:45:12 AM –> 120 seconds
• visibleRangeSizeLimit property has a min: 5 seconds & max: 60 seconds

The idea is that the cloud apps loads 2 minutes worth of sampling values into the data-series of the axes in the principal chart (below the chart overview) in which users can configure a viewable window via the visibleRangeSizeLimit property from 5 seconds up to 60 seconds.

During playback of the video or when users jump to a point-in-time, the charts current point-in-time changes and new sampling values are loaded as needed.

Unfortunately, users can use the chart overview’s grips to set viewable window beyond 60 seconds size constraint, as well as beyond the 120 seconds (which is the visibleRangeLimit).

When they do this they are presented in the principal chart with empty bookends on either side of that chart.

I hope that provides more guidance and enlightenment about this matter.

Regards,
Steven.

Here is the code used to create the chart overview.

private async createOverview(channelLanes: ChannelLane[]): Promise {
     const secondaryAxis = channelLanes.at(0)?.axis;

     if (!this.timelineAxis.id || !secondaryAxis) return;

     if (this.chartOverview) return;

     channelLanes.forEach((channelLane) => channelLane.isPartOverview = true);

     this.chartOverview = await SciChartOverview.create(
     this.chart.sciChartSurface,
          'overview',
          {
               mainAxisId: this.timelineAxis.id,
               secondaryAxisId: secondaryAxis.id,
               theme: new SciChartJsNavyTheme(),
               transformRenderableSeries: (renderableSeries) => {
                    if (renderableSeries.xAxisId !== this.timelineAxis.id) return undefined;

                    const channelLane = channelLanes.find((channelLane) =>
                    channelLane.axis.id === renderableSeries.yAxisId);

                    return (channelLane)
                         ? createOverviewRenderableSeries(channelLane.definition,
                              this.chart.wasmContext,
                              renderableSeries)
                         : undefined;
               },
               overviewYAxisOptions: { autoRange: secondaryAxis.autoRange }
          });

    if (this.chartOverview) {
          this.chartOverview.overviewYAxis.visibleRange = secondaryAxis.visibleRange;
          this.chartOverview.overviewYAxis.visibleRangeLimit = secondaryAxis.visibleRangeLimit;
          this.chartOverview.overviewYAxis.visibleRangeSizeLimit = secondaryAxis.visibleRangeSizeLimit;
     }
}

While the above code explicitly sets the Y-axis properties after the creation of the chart, that isn’t the issue at hand since it’s the X-axis whose visible range properties need to set the constraints with.