Insert a text into the horizontally scrollable VictoryChart

Question

Is there a way to add text in the horizontally scrollable [VictoryChart][1] component?

I tried the [VoronoiScatter][2] component, it looks fine on the first picture when you scroll to the right side of chart, but when you scroll a bit left the text crashes instead of disappearing.

What is wrong in this implementation or do you know some better way to insert text in

 <VictoryChart
      containerComponent={
        <VictoryZoomContainer ... />
      }
      height={...}
      padding={...}
 >
      <VictoryArea
        data={chartData}
        x="hour"
        y="price"
        interpolation="step"
        groupComponent={<VictoryClipContainer clipPadding={{ top: 1 }} />}
        style={chartStyles.data}
      />

      <VictoryScatter
        y={(data) => priceAverage}
        x={(data) => 30}
        samples={1}
        labels={() => priceUpdateParts}
        dataComponent={<VictoryLabel />}
      />


      <VictoryAxis
        style={chartStyles.yAxis}
        tickValues={chartData.map((d) => d.hour)}
        tickFormat={...}
        offsetY={20}
      />
      <VictoryAxis crossAxis={false} dependentAxis orientation={'right'} style={chartStyles.xAxis} />
 </VictoryChart>

score 0 · Answer 1 · answered Dec 07 '22 at 19:03

I fount that it's better to use VictoryLine and VictoryLabel components in case of horizontally scrollable charts over VictoryScatter.

Here's the solution in case anyone needs it, replace the VictoryScatter with VictoryLine

Specify the x property on VictoryLine to place in on the chart and use dx prop on VictoryLabel to move the text label.

<VictoryLine
     labels={() => yourLabelsArray}
     labelComponent={<VictoryLabel renderInPortal={false} y={100} dx={80} verticalAnchor="middle" />}
     x={() => 24}
/>

Insert a text into the horizontally scrollable VictoryChart

1 Answers1