Victory-native: Hiding only the axis lines and display tick values

Created on 19 Feb 2018  路  2Comments  路  Source: FormidableLabs/victory-native

The Problem

I wanted hide only the axis line and display the tick values, i tried using the solution

but this hides the y axis tick values and axis line , but xaxis tick values are displayed but line is hidden

Reproduction


animate={{ duration: 200, easing: "linear" }}
scale={{ x: "time", y: "linear" }}
style={{
parent: {
backgroundColor: "#ffffff",
borderRadius: 5,
elevation: 1,
marginTop: 8,
}
}}
padding={{ top: 50, left: 50, bottom: 50, right: 75 }}
height={300}
alignment="start"
>

x1='0%'
x2='0%'
y1='0%'
y2='100%'
>



x1='0%'
x2='0%'
y1='0%'
y2='100%'
>



x1='0%'
x2='0%'
y1='0%'
y2='100%'
>



          <VictoryArea
            style={{
              data: { fill: "url(#gradientFillPurple)", stroke: "#d47dff" }
            }}
            data={[{
              x:1,y:1
            }]}
            interpolation="natural"
          />
          <VictoryArea
            style={{
              data: { fill: "url(#gradientFillBlue)", stroke: "#5fb1fd" }
            }}
            data={[
              {
                x: 2, y: 2
              }]
            }
            interpolation="natural"
          />
          <VictoryArea
            style={{
              data: { fill: "url(#gradientFillRed)", stroke: "#ff5252" }
            }}
            data={[
              {x: 3, y: 3}
            ]}
            interpolation="natural"
          />

            <VictoryAxis style={{ axis: {stroke: "none"} }} />

      </VictoryChart>
      </View>

Most helpful comment

I dont know if @gogoku found his answer, but for anyone looking for the same, as I just did, maybe this helps you:

       `<VictoryAxis
            dependentAxis
            style={{ axis: {stroke: "none"} }}
        />
        <VictoryAxis
            crossAxis
            style={{ axis: {stroke: "none"} }}
        />`

You need to add one style for each axis. That's why only the X axis worked out in the code above

All 2 comments

@gogoku This FAQ should help you: https://formidable.com/open-source/victory/docs/faq/#why-is-victorychart-rendering-only-one-axis

I dont know if @gogoku found his answer, but for anyone looking for the same, as I just did, maybe this helps you:

       `<VictoryAxis
            dependentAxis
            style={{ axis: {stroke: "none"} }}
        />
        <VictoryAxis
            crossAxis
            style={{ axis: {stroke: "none"} }}
        />`

You need to add one style for each axis. That's why only the X axis worked out in the code above

Was this page helpful?
0 / 5 - 0 ratings