Customize dataKey values

user_11516145 0
Viewed 1111

I have just started out using Recharts and am a total beginner. I have managed to render a chart, customise some styling, such as color of the bars and position of the legend, but I am now struggling to customise the dataKey values.

At the moment, the chart looks like this: https://i.stack.imgur.com/glBKE.png

I am trying to render a BarChart from the following data:

const data = [
{day: "2020-07-01", kilogram: 80, calories: 240},
{day: "2020-07-02", kilogram: 80, calories: 240},
{day: "2020-07-03", kilogram: 80, calories: 240},
{day: "2020-07-04", kilogram: 80, calories: 240},
{day: "2020-07-05", kilogram: 80, calories: 240}
];

Setting the dataKey on the <XAxis> component to "day" works fine, but the ticks display the full string. Instead, I would like to only display the day of the month. So instead of saying "2020-07-01", it should only say "1".

I have already tried the following two things:

  1. I have added this function to the render method, to calculate the day and set this as the dataKey value.
  let dataKeyValue = (x) => {
     let value = x.day;
     value = value.getDate();
     value = value.toString();
     return value;
  };
  1. I have added this method to the component, to format the tick.
 axisTickFormatter(day) {
    const date = new Date(day);
    const dataKey = date.getDate();
    dataKey.toString();
    console.log(typeof dataKey);
    return dataKey;
 }

=> you can see both in the code below - commented out

This is my code:

class Chart extends React.Component {
  constructor(props) {
    super(props);
    this.type = this.props.type;
    this.data = this.props.data;
  }

// axisTickFormatter(day) {
  //   const date = new Date(day);
  //   const dataKey = date.getDate();
  //   dataKey.toString();
  //   console.log(typeof dataKey);
  //   return dataKey;
  // }

render() { 
    // let dataKeyValue = (x) => {
    //   let value = x.day;
    //   value = value.getDate();
    //   value = value.toString();
    //   return value;
    //};
      return (
        <ResponsiveContainer>
          <BarChart
            width={730}
            height={250}
            data={this.data.sessions}
            barCategoryGap={8}
            barSize={7}
          >
            <CartesianGrid strokeDasharray="2 2" vertical={false} />
            <XAxis dataKey="day" />
            {/* <XAxis dataKey={(day) => this.axisTickFormatter(day)} /> */}
            {/* <XAxis dataKey={dataKeyValue} /> */}
            <YAxis />
            <Tooltip />
            <Legend
              iconSize={8}
              iconType="circle"
              verticalAlign="top"
              align="right"
            />
            <Bar dataKey="kilogram" fill="#282D30" radius={[3, 3, 0, 0]} />
            <Bar dataKey="calories" fill="#E60000" radius={[3, 3, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
       )
    }

}

Could you give me a hint as to what I am forgetting or doing wrong?

recharts reactjs bar-chart javascript
1 Answers

Christine, welcome to StackOverflow!

What would be really helpful for such a case is a working example, e.g. with jsfiddle or StackOverflow's code snippet tool :) .

I'm not an expert with recharts specifically but it looks like XAxis only takes the key, not the actual value. What that means in turn is, that you would have to modify your data before passing it into the BarChart component.

The approach you already have, reading the date and getting the day, looks valid, though.

Maybe you can try the following:

    function formatDate(input) {
      return new Date(input).getDate();
      
      // alternatively you can also just use the last two characters from that string with 
      // return input.slice(-2);
    }

    class Chart extends React.Component {
      constructor(props) {
        super(props);
        this.type = this.props.type;

        // change the date to the desired format, but keep all the others value as they are
        this.data = this.props.data.map(d => {
          day: formatDate(d.day),
          kilogram: d.kilogram,
          calories: d.calories
        });
      }
user_9820260
Related