Cannot get data formatted correctly for apexcharts

Question

I receive data like this from an API

{
    "Bob Knight": 30774.72000002,
    "Samuel Herman": 10310.61000004,
    "Lucie Perry": 26308.41,
    "Andreas Smith": 8960.189999999999,
    "Frederic Smith": 2029.5000000599998,
}

I'm trying to display this in a bar chart using apex charts in my react app however I can't seem to format the data in the correct way to get apex to display anything. I have tried formatting in javascript like this:

{
    {x: "Bob Knight", y:"30774.720002"},
    ...
}

Which seems to be what the documentation suggest however it doesn't render anything. Below are the useful bits of my component

constructor(props) {
        super(props);
        this.state = {
            options: {
                chart: {
                    id: "basic-bar"
                },
                xaxis: {
                    type: 'category'
                }
            },
            values: []
        }
    }

    componentDidUpdate(prevProps) {
        if (!equal(this.props.selectedDate, prevProps.selectedDate))
        {
            var m = moment(this.props.selectedDate).format("M");
            var y = moment(this.props.selectedDate).format("YYYY");
            axios.get('http://localhost:8080/opportunity/owner/' + y + '/' + m)
                .then(res => {
                    values = res.data;
                    this.setState({
                        values
                    })
                })
                .catch(console.log)
        }
    }

render(
<Chart series = {this.state.values} type ='bar' options ={this.state.options}/>

score 1 · Accepted Answer · answered Mar 11 '20 at 12:05

1

const obj = {
  "Bob Knight": 30774.72000002,
  "Samuel Herman": 10310.61000004,
  "Lucie Perry": 26308.41,
  "Andreas Smith": 8960.189999999999,
  "Frederic Smith": 2029.5000000599998,
}

const arr = Object.entries(obj).map(x => ({
  'x': x[0],
  'y': x[1]
}))
console.log(arr)

answered Mar 11 '20 at 12:05

EugenSunic

13,162
13
64
86

Can someone please help? https://stackoverflow.com/questions/62590738/how-to-remove-the-horizontal-lines-of-chart-its-axis-lines-in-angular – reacg garav Jun 26 '20 at 10:36

Hemanath · Answer 2 · 2020-03-12T05:11:04.070

0

Checkout this codesandbox, I implemented a simple bar chart, data is y-axis values and categories in xaxis is x-axis labels. So from the object you can separate both of them like this

const obj = {
 "Bob Knight": 30774.72000002,
 "Samuel Herman": 10310.61000004,
 "Lucie Perry": 26308.41,
 "Andreas Smith": 8960.189999999999,
 "Frederic Smith": 2029.5000000599998
};
let categories = Object.keys(obj);
let data = Object.keys(obj).map(k => obj[k]);

after doing this set the categories and data in the state like this

this.setState({
  values: [...this.state.series, { data }],
  options: { ...this.state.options, xaxis: { categories } }
});

you have to add categories to xaxis in options object and data to values array

edited Mar 12 '20 at 05:11

answered Mar 11 '20 at 12:17

Hemanath

1,075
6
15

I get the error "Failed prop type: Invalid prop `series` of type `object` supplied to `r`, expected `array`" when using this – Will Rollason Mar 11 '20 at 12:55
i have edited my answer can you check if this solves your error – Hemanath Mar 12 '20 at 05:11
Can someone please help? https://stackoverflow.com/questions/62590738/how-to-remove-the-horizontal-lines-of-chart-its-axis-lines-in-angular – reacg garav Jun 26 '20 at 10:36

Cannot get data formatted correctly for apexcharts

2 Answers2