Variable AxisScrollStrategiesConst

Type declaration

• expansion: ((opts?: {
      end?: boolean;
      start?: boolean;
  }) => AxisScrollStrategy)

  • • (opts?: {
          end?: boolean;
          start?: boolean;
      }): AxisScrollStrategy

    • Axis will scroll to fit Series that are out of view, but it won't shrink even if there is empty space (like "fitting" does).

      Parameters

      • Optional opts: {
            end?: boolean;
            start?: boolean;
        }

        • Optional end?: boolean

          Should apply to Axis interval end (right side for X axis, top side for Y axis). Defaults to true

        • Optional start?: boolean

          Should apply to Axis interval start (left side for X axis, bottom side for Y axis). Defaults to true

      Returns AxisScrollStrategy

• fitting: ((opts?: {
      considerVisibleRangeOnly?: boolean;
      end?: boolean;
      start?: boolean;
  }) => AxisScrollStrategy)

  • • (opts?: {
          considerVisibleRangeOnly?: boolean;
          end?: boolean;
          start?: boolean;
      }): AxisScrollStrategy

    • Axis will always display all visible data.

       axis.setScrollStrategy(AxisScrollStrategies.fitting)
      

      This is the default option for majority of Axes.

      Optional extra parameters:

      • start - whether should affect Axis interval start (left side for X axis, bottom side for Y axis). Defaults to true
      • end - whether should affect Axis interval end (right side for X axis, top side for Y axis). Defaults to true
      • considerVisibleRangeOnly - whether axis scrolling should only consider data in visible range, rather than entire data set which may be partly outside the view.

       axis.setScrollStrategy(AxisScrollStrategies.fitting({ start: false }))
       axis.setScrollStrategy(AxisScrollStrategies.fitting({ considerVisibleRangeOnly: false }))
      

      Parameters

      • Optional opts: {
            considerVisibleRangeOnly?: boolean;
            end?: boolean;
            start?: boolean;
        }

        • Optional considerVisibleRangeOnly?: boolean

          Whether axis scrolling should only consider data in visible range, rather than entire data set which may be partly outside the view. This is enabled by default.

          Important: Only PointLineAreaSeries actually supports range calculations for visible range only For series which don't support this, this flag will not have any effect.

           // Example, change from default to fitting based on whole data set rather than only view
           chart.axisY.setScrollStrategy(AxisScrollStrategies.fitting({ considerVisibleRangeOnly: false }))
          

        • Optional end?: boolean

          Should apply to Axis interval end (right side for X axis, top side for Y axis). Defaults to true

        • Optional start?: boolean

          Should apply to Axis interval start (left side for X axis, bottom side for Y axis). Defaults to true

      Returns AxisScrollStrategy

• fittingStepped: ((opts?: {
      end?: boolean;
      start?: boolean;
  }) => AxisScrollStrategy)

  • • (opts?: {
          end?: boolean;
          start?: boolean;
      }): AxisScrollStrategy

    • Same as fitting but operates in larger steps. So instead of always moving to show exact data range, all steps are done by either halving or doubling the active axis range.

      Useful when you want to reduce the amount of visual disruption to users, but don't know the exact ranges of data.

      Parameters

      • Optional opts: {
            end?: boolean;
            start?: boolean;
        }

        • Optional end?: boolean

          Should apply to Axis interval end (right side for X axis, top side for Y axis). Defaults to true

        • Optional start?: boolean

          Should apply to Axis interval start (left side for X axis, bottom side for Y axis). Defaults to true

      Returns AxisScrollStrategy

• nextPowerOf10: {
      allowIntervalLengthChange: boolean;
      end: ((scaleStart: number, scaleEnd: number, contentMin: number, contentMax: number) => number);
      id: string;
      start: ((scaleStart: number, scaleEnd: number, contentMin: number, contentMax: number) => number);
  }

  Same as fitting but sets axis end side to next power of 10 from attached data.

  • allowIntervalLengthChange: boolean

  • end: ((scaleStart: number, scaleEnd: number, contentMin: number, contentMax: number) => number)

    • • (scaleStart: number, scaleEnd: number, contentMin: number, contentMax: number): number

      • Parameters

        • scaleStart: number

        • scaleEnd: number

        • contentMin: number

        • contentMax: number

        Returns number

  • id: string

  • start: ((scaleStart: number, scaleEnd: number, contentMin: number, contentMax: number) => number)

    • • (scaleStart: number, scaleEnd: number, contentMin: number, contentMax: number): number

      • Parameters

        • scaleStart: number

        • scaleEnd: number

        • contentMin: number

        • contentMax: number

        Returns number

• scrolling: ((opts?: {
      progressive?: boolean;
      realTime?: boolean | {
          catchUpThresholdMs?: number;
      };
  }) => AxisScrollStrategy)

  • • (opts?: {
          progressive?: boolean;
          realTime?: boolean | {
              catchUpThresholdMs?: number;
          };
      }): AxisScrollStrategy

    • Axis scrolls to reveal new data but keeps its interval (start - end) constant.

       axis.setScrollStrategy(AxisScrollStrategies.scrolling)
      

      Optional extra parameters:

      • progressive - whether axis should scroll towards higher data value, or lower data value. Defaults to true which means towards higher data value.
      • realTime - if set to true axis will automatically scroll according to real time, rather than jumping to latest data point immediately. This is intended for applications where data arrives in chunks (for example, every 1 second). This assumes that Axis interval represents milliseconds!

       // Example, real-time scrolling Axis
       axis
           .setTickStrategy(AxisTickStrategies.DateTime)
           .setDefaultInterval((state) => ({
               start: (state.dataMax ?? 0) - 10_000,
               end: state.dataMax,
               stopAxisAfter: false
           }))
           .setScrollStrategy(AxisScrollStrategies.scrolling({ realTime: true }))
      

      By default, real time scrolling is configured for data points arriving around once every second. If data points arrive significantly more infrequently (e.g. every 5 seconds, 10 seconds, 1 minute, ...) then you should configure catch up threshold:

       // Example, catch up if gap between last data point is more than 10 seconds
       axis.setScrollStrategy(AxisScrollStrategies.scrolling({
           realTime: { catchUpThresholdMs: 10_000 }
       }))
      

      This value is required to cope with situations where data flow is interrupted, and later continues, so that axis can "catch up" to live data. Alternatively, catching up can be disabled by setting the threshold value to an extremely large number.

      Parameters

      • Optional opts: {
            progressive?: boolean;
            realTime?: boolean | {
                catchUpThresholdMs?: number;
            };
        }

        • Optional progressive?: boolean

        • Optional realTime?: boolean | {
              catchUpThresholdMs?: number;
          }

      Returns AxisScrollStrategy