Question 33117 in React native Question posted in
The official React Native documentation can be found here.

can't understand how to change my 'react-native-svg-charts' x and y axis labels – React native

Can’t understand how to change my ‘react-native-svg-charts’ x and y axis labels. Can’t see the labels

import React,{useState} from 'react';
import {View, StyleSheet, Text, Button, Dimensions, TouchableOpacity} from 'react-native';
// import {LineChart} from "react-native-chart-kit";
import { LineChart, XAxis, YAxis } from 'react-native-svg-charts';

let {height, width} = Dimensions.get("window");//(Below) make it as width as the screen

const GraphComponent_1 = (props) => {
    const {pinnedMeasurements, Labelss} = props;
        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24 ]
        const xLabels = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
        const yLabels = [ 'Poor', 'Fair', 'Good', 'Very Good', 'Excellent' ]
        
        return (
          <View style={{ height: 200, padding: 20 }}>
            <LineChart
              style={{ flex: 1 }}
              data={data}
              svg={{ stroke: 'rgb(134, 65, 244)' }}
              contentInset={{ top: 20, bottom: 20 }}
            >
              <XAxis
                style={{ marginTop: 10 }}
                data={data}
                formatLabel={(value, index) => xLabels[index]}
                style={{
                    axisLabel: {
                        color: 'red', // changes x axis text color to red
                    },
                }}
              />
              <YAxis
                style={{ marginRight: 10 }}
                data={data}
                contentInset={{ top: 20, bottom: 20 }}
                min={-60}
                max={100}
                numberOfTicks={yLabels.length}
                
                formatLabel={(value, index) => yLabels[index]}
              />

            </LineChart>
          </View>
        )
      }
      
const styles = StyleSheet.create({

});

Best I’ve done is this(below) with this error(below):
Updated Image

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Error is solved

    import React,{useState} from 'react';
import {View, StyleSheet, Text, Button, Dimensions, TouchableOpacity} from 'react-native';
// import {LineChart} from "react-native-chart-kit";
import { LineChart, XAxis, YAxis } from 'react-native-svg-charts';

let {height, width} = Dimensions.get("window");//(Below) make it as width as the screen

const GraphComponent_1 = (props) => {
    const {pinnedMeasurements, Labelss} = props;
        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24 ]
        const xLabels = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
        const yLabels = [ 'Poor', 'Fair', 'Good', 'Very Good', 'Excellent' ]
        
        return (
            <View style={{ height: 200, margin: 20, marginTop: 60, flexDirection: "row" }}>
                <YAxis
                    style={{ marginRight: 10 }}
                    svg={{
                    fill: "grey",
                    fontSize: 10,
                    }}
                    contentInset={{ top: 20, bottom: 20 }}
                    data={data}
                min={-60}
                max={100}
                numberOfTicks={yLabels.length}
                formatLabel={(value, index) => yLabels[index]}
                />
            <View style={{flex: 1,}}>
              <LineChart
              data={data}
                style={{ flex: 1 }}
                svg={{ stroke: "rgb(134, 65, 244)" }}
                contentInset={{ top: 20, bottom: 20 }}
              />
              <XAxis
              data={xLabels}
                contentInset={{ left: 10, right: 10 }}
                svg={{
                  fill: "grey",
                  fontSize: 10,
                }}
                numberOfTicks={xLabels.length}
                formatLabel={(value, index) => xLabels[index]}
              />
            </View>
          </View>
        )
      }
      
const styles = StyleSheet.create({

});
// formatLabel={(value) => `${value}ºC`}


export default GraphComponent_1;

  2. 0

    The error is happening because the index gets out of range. The xLabels has a length of 12 while the actual data has a length of 15.

    You can either add extra labels for the x-axis or reduce the data back to 12.

    The YAxis has the same issue. I see you want to "group" them with some labels. You can use the numberOfTicks prop with the yLabels.length. Then when formatting the label you can use the index.

    <YAxis
  style={{ marginRight: 10 }}
  data={data}
  contentInset={{ top: 20, bottom: 20 }}
  numberOfTicks={yLabels.length}
  formatLabel={(value, index) => yLabels[index]}
/>

    EDIT

    I found something with the min and max of the YAxis. If they’re provided the error is gone.

    <YAxis
  style={{ marginRight: 10 }}
  data={data}
  contentInset={{ top: 20, bottom: 20 }}
  min={-60}
  max={100}
  numberOfTicks={yLabels.length}
  formatLabel={(value, index) => yLabels[index]}
/>

    For the layout:

    <View style={{ height: 200, margin: 20, marginTop: 60, flexDirection: "row" }}>
  <YAxis
    style={{ marginRight: 10 }}
    svg={{
      fill: "grey",
      fontSize: 10,
    }}
    contentInset={{ top: 20, bottom: 20 }}
  />
  <View
    style={{
      flex: 1,
    }}
  >
    <LineChart
      style={{ flex: 1 }}
      svg={{ stroke: "rgb(134, 65, 244)" }}
      contentInset={{ top: 20, bottom: 20 }}
    />
    <XAxis
      contentInset={{ left: 10, right: 10 }}
      svg={{
        fill: "grey",
        fontSize: 10,
      }}
    />
  </View>
</View>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search