sticky Y axis when scrolling horizontally

[maciejbaczynski]

Is there a way to achieve sticky Y axis when scrolling horizontally? Something like VictoryZoomContainer in old version. Right now Im using ScrollView outside CartesianChart but it would be great to use it inside, only over lines so Y axis legend is always visible. scroll.webm

[zibs]

Hey, sorry we haven't implemented panning/scrolling yet.

[devevecare]

+1

[manyaagarwal]

Hey @zibs

Do you have any tips on go about creating a custom implementation for panning or if me or someone on my team can contribute to the process of implementing it (if this is on the eventual roadmap for xl)?

[carbonrobot]

@manyaagarwal Brush and Zoom containers are on the roadmap, but we do not have resources assigned to work on it currently.

[ducpt-bili]

yeah, the chart on the mobile is really need this feature (cause the size of device is too small, user need to scroll), this is only reason right now stoping me from using Victory native chart. I hope this feature will be on in the nearest future. Thank for your great lib. @carbonrobot

[cr0nil]

+1

[keithluchtel]

This alone doesn't quite get the required functionality, but here's a pan/zoom PR I've been working on: #413 , I'll see if I can build upon this to implement the Brush Container from original Victory.

[Jothebug]

Is there a way to achieve sticky Y axis when scrolling horizontally? Something like VictoryZoomContainer in old version. Right now Im using ScrollView outside CartesianChart but it would be great to use it inside, only over lines so Y axis legend is always visible. scroll.webm

Hi maciejbaczynski,

How can you implement the horizontal scrolling like GIF above?. Because I stuck with the issue for weeks, I'm so glad if you share the idea about the horizontal scroll to me. Thank you so much in advance.

[keithluchtel]

The PR for panning/zoom was merged today. I think it can be extended to allow for the horizontal axis scrolling only relatively easily.

[maciejbaczynski]

@Jothebug

 <ScrollView horizontal ref={scrollViewRef}>
      <View style={styles.container}>
        <View style={styles.labelContainer}>
          <Text style={{ color: GLOBAL_STYLES.colors.chartLabel }}>{unitLabel}</Text>
        </View>
        <CartesianChart
          chartPressState={state}
          data={data}
          xKey="x"
          yKeys={['y1', 'y2']}
          domain={{ y: [lowestValueWithOffset, highestValueWithOffset] }}
          padding={{ bottom: axisMargin }}
          axisOptions={{
            font,
            axisSide: {
              x: 'bottom',
              y: 'right',
            },
            tickCount: {
              x: 6,
              y: 5,
            },
            lineColor: {
              grid: {
                x: 'transparent',
                y: GLOBAL_STYLES.colors.chartScaleLine,
              },
              frame: 'transparent',
            },
            labelColor: GLOBAL_STYLES.colors.chartLabel,
            labelOffset: {
              x: axisMargin,
              y: axisMargin,
            },
            labelPosition: {
              y: 'outset',
              x: 'outset',
            },
            formatXLabel: value => value || '',
          }}>
          {({ points }) => {
            return (
              <>
                {line1Visible && (
                  <Line
                    points={points.y1}
                    color={line1Color}
                    strokeWidth={3}
                    animate={animation}
                  />
                )}
                {line2Visible && (
                  <Line
                    points={points.y2}
                    color={line2Color}
                    strokeWidth={3}
                    animate={animation}
                  />
                )}
                {isActive ? (
                  <RoundedRect
                    x={state.x.position}
                    y={0}
                    width={1}
                    height={300}
                    r={0}
                    color={GLOBAL_STYLES.colors.chartLabel}
                  />
                ) : null}
              </>
            );
          }}
        </CartesianChart>
      </View>
    </ScrollView>