Victory-Chart-Native Line chart overflows

Question

Good morning everyone. This is my first time using victory-native and I'm trying to create simple line chart. Below is my component that creates my card with a linechart inside.

import { Card, Paragraph, Stack, YStack } from "tamagui";
import {
  VictoryAxis,
  VictoryChart,
  VictoryLine,
  VictoryTheme,
} from "victory-native";

export type ProgressProps = {
  title: string;
};

export default function Progress(props: ProgressProps) {
  return (
    <>
      <Card
        elevate
        size="$3"
        backgroundColor={"#201B20"}
        borderRadius={"$5"}
        height={"$10"}
      >
        <Card.Header>
          <YStack>
            <Paragraph color={"#FFFFFF"}>{props.title}</Paragraph>
            <VictoryChart>
              <VictoryLine
                style={{
                  data: { stroke: "#BC6D29" },
                  parent: { border: "1px solid #ccc" },
                }}
                data={[
                  { x: "Oct", y: 2 },
                  { x: "Nov", y: 3 },
                  { x: "Dec", y: 5 },
                  { x: "Jan", y: 4 },
                  { x: "Feb", y: 7 },
                  { x: "Mar", y: 7 },
                ]}
              />
            </VictoryChart>
          </YStack>
        </Card.Header>
      </Card>
    </>
  );
}

This is what I'm getting:

This is what I want:

Currently looking through the docs still trying to learn it. Thanks in Advance.

Answer 1

You can achieve the required chart display as follow:

• Adjust the width and height of VictoryChart to fit the chart within the display view.
• Use VictoryScatter with VictoryLine
• Use VictoryToolTip with labels.

    <VictoryChart height={200}>
      <VictoryScatter
        style={{ data: { fill: '#BC6D29' } }}
        size={5}
        labels={(({ datum }) => `${parseFloat(datum.y).toFixed(2)}km`)}
        labelComponent={
          <VictoryTooltip
            dy={10}
            pointerOrientation="bottom"
            pointerLength={0}
            cornerRadius={5}
            flyoutWidth={80}
            flyoutHeight={30}
            flyoutStyle={{ fill: '#666', stroke:  '#666',}}
            style={ {
              fill: '#BC6D29',
              fontSize: 12,
              fontWeight: 'bold',
            }}
          />
        }
        data={[
          { x: 'Oct', y: 2 },
          { x: 'Nov', y: 3 },
          { x: 'Dec', y: 5 },
          { x: 'Jan', y: 4 },
          { x: 'Feb', y: 7 },
          { x: 'Mar', y: 7 },
        ]}
      />
      <VictoryLine
        style={{
          data: { stroke: '#BC6D29' },
          parent: { border: '1px solid #ccc' },
        }}
        data={[
          { x: 'Oct', y: 2 },
          { x: 'Nov', y: 3 },
          { x: 'Dec', y: 5 },
          { x: 'Jan', y: 4 },
          { x: 'Feb', y: 7 },
          { x: 'Mar', y: 7 },
        ]}
      />
      <VictoryAxis
        style={{ axis: { stroke: 'none' } ,tickLabels: { fill: '#666',fontSize: 13 }, }}
      />
    </VictoryChart>