CODEWITHSUNDEEP
javascriptreactjsapexcharts
Will Rollason
Will Rollason

Reputation: 155

How to format the x-axis labels in ApexCharts

I have an API that returns data like this: 

[
    {
        "attributes": {
            "type": "AggregateResult"
        },
        "expr0": 25937961.52,
        "expr1": 1,
        "expr2": 2020
    },
    {
        "attributes": {
            "type": "AggregateResult"
        },
        "expr0": 4092447.85,
        "expr1": 3,
        "expr2": 2020
    },
    {
        "attributes": {
            "type": "AggregateResult"
        },
        "expr0": 18509414.84,
        "expr1": 6,
        "expr2": 2019
    },
    {
        "attributes": {
            "type": "AggregateResult"
        },
        "expr0": 13572118.12,
        "expr1": 10,
        "expr2": 2019
    },
...

Where expr0 is an monetary value, expr1 is the month and expr2 is the year. I am using ApexCharts in React to display the results on my website, however I can't seem to format the data correctly. My component is shown below, however it currently only displays a single point. I'm not sure whether the data points need x/y keys to be displayed or if the dates need to be in the x-axis in options.

class SFAllTimeQuoteValue extends Component {
    constructor(props) {
        super(props);
        this.state = {
            series: [{
                name: "Opportunities",
                data: []
            }],
            options: {
                chart: {
                    id: "line"
                },
                xaxis: {
                    type: "date"
                }

            }
        }
    }

    async componentDidMount() {

        var res = await axios.get(api);
        const value = res.data;
        var data = [];
        for(var i = 0; i < value.length; i++) {
            var date = new Date(value[i].expr2, value[i].expr1 - 1);
            data.push([date, value[i].expr0]);
        }

        this.setState({
          series: [{
            data: data
          }]
        })

      }

    render() {
        return (
            <div>
                <Chart series={this.state.series} type ='line' options ={this.state.options}/>
            </div>
        )
    }
}

I would preferably like the data points to display just the month and year as the label too, however using my current method I am getting full date time strings as the label.

Upvotes: 3

Views: 24836

Answers (2)

jsonx
jsonx

Reputation: 1090

please check formatter method of xaxis

yaxis: {
  labels: {
    formatter: function (value) {
      return value + "$";
    }
  },
},
xaxis: {
  labels: {
    formatter: function (value) {
      return value;
    }
  }
}

Upvotes: 1

junedchhipa
junedchhipa

Reputation: 5607

You should set the xaxis type as datetime and also set the labels.format property

xaxis: {
  type: 'datetime',
  labels: {
    format: 'MM yyyy'
  }
}

Upvotes: 8

Related Questions