Panning, clamp max X

[jbbjarnason]

Hi again,

I am trying to use the chart for real time updates (timeseries) and being able to pan backwards in time. I have not found a way to clamp the maximum x value, the timestamp(DateTime.now()) with the internals of cristalyse.

Is is possible to clamp or cap the maximum X value in panning mode, and can it be updateable so I would not need to rebuild the chart?

[rudi-q]

Hey again 👋 Great question, this was actually a deliberate design choice, but I can see why it's a pain for your use case.

Cristalyse currently allows infinite panning in both directions. I removed boundary checks intentionally because most users wanted smooth exploration without hitting walls. The visual clipping handles what's rendered, but the domain itself can go anywhere.

Your use case is totally valid, though. Real-time time series is different, you want "pan backwards through history" but "can't look into the future" behavior. That's a specific constraint that doesn't exist right now.

Workaround for now:

Use onPanUpdate to detect when they've gone past your max boundary, then clamp it yourself:

CristalyseChart()
  .data(data)
  .mapping(x: 'timestamp', y: 'value')
  .geomLine()
  .interaction(
    pan: PanConfig(
      enabled: true,
      updateXDomain: true,
      onPanUpdate: (info) {
        final now = DateTime.now().millisecondsSinceEpoch.toDouble();
        if (info.visibleMaxX! > now) {
          // User tried to pan into the future
          // Option 1: Rebuild with clamped data
          // Option 2: Just ignore and let them hit the visual edge
        }
      },
    ),
  )
  .build()

Yeah, it requires a rebuild to actually enforce it, which isn't ideal. But it'll work.

Should this be a feature?

I could add optional minX, maxX, minY, maxY parameters to PanConfig that would enforce hard boundaries. Would need to think through the API design—do we want per-axis limits? Should they be dynamic/updateable?

Let me know if this workaround is good enough for your needs or if you need proper boundary support. If it's a blocker for you (or others hit this), I'll prioritize it. Otherwise it goes on the backlog.

Also happy to review a PR if you want to take a crack at it yourself! The logic would live in _updatePanDomains() in animated_chart_widget.dart.

[jbbjarnason]

Thanks, I will try the pan update method.

minX, maxX, minY, maxY would be flexible, though it might also make sense to have a simple boolean flag which would maybe disable infinite panning, therefore only be able to pan through the supplied data.

I think the boolean flag is maybe easier, like from the example, with the amended diff

diff --git a/example/lib/graphs/pan_example.dart b/example/lib/graphs/pan_example.dart
index 5cd1223..791ee23 100644
--- a/example/lib/graphs/pan_example.dart
+++ b/example/lib/graphs/pan_example.dart
@@ -165,7 +165,7 @@ class _PanExampleWidgetState extends State<_PanExampleWidget> {
                     size: 2.0 + widget.sliderValue * 4.0,
                     alpha: 0.7,
                   )
-                  .scaleXContinuous()
+                  .scaleXContinuous(min: 100, max: 200)
                   .scaleYContinuous()
                   .interaction(
                     pan: PanConfig(

the user would be able to pan through the data from 0 - 1000 (x value) but stop at each end.

What do you think?

I might make a followup PR if it seems easy to add.

[rudi-q]

True, I agree, alongside minX, maxX, minY, maxY, it would be nice to have a boolean flag for enabling/disabling infinite panning (enabled by default) inside the panConfig() method.

Sounds great to me, feel free to make a PR 🙌