How to Display json api data value in stacked bar chart?

Question

Hey i am trying to implement json API data value in stacked bar chart but i don't know how to do it here is json api http://www.mocky.io/v2/5e96ff763000006500b6da20 and its look like

{"topology": [
{
"label": "living_street",
"value": 0.010549953326361517
},
{
"label": "tertiary",
"value": 0.767246375468044
},
{
"label": "primary",
"value": 0.21522791175081937
},
{
"label": "service",
"value": 0.006975759454774865
}
]

}

here is what i did so far in my code .

`fetchData() {
    fetch(`http://www.mocky.io/v2/5e96ff763000006500b6da20`)
      .then(response => response.json())
      .then(dat => {
        const dat1 = dat.map(c => {
          return c.label;
        });
        const dat2 = dat.map(c => {
          return c.value;
        });
        const newXaxis = dat1;
        const newSeries = [];
        newSeries.push({
          data: dat2,
          name: this.state.series.labels
        });
        this.setState({
          series: newSeries,
          options: {
            ...this.state.options,
            labels: newXaxis,
            xaxis: { ...this.state.options.xaxis, categories: newXaxis }
          }
        });
      });
  }

  componentDidMount() {
    this.fetchData();
  }`

...

 return (

        <Chart
          options={this.state.options}
          series={newSeries}
          type="bar"
          height="150px"
        />
}

but it did not show in stacked chart is shows like this

And i want that result will look like this.

Answer 1

Have you been able to pass the data that you fetched to the chart? I've been having some problems with that using Apexcharts and Axios in a React app.

Here is my code:

    let url = 'http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly';


class Bar extends Component {

    constructor(props) {
        super(props);
        this.state = {
            options: {
                chart: {
                    height: 450,
                    type: 'bar',
                },
                plotOptions: {
                    bar: {
                        horizontal: true,
                    }
                },
                dataLabels: {
                    enabled: true
                },
                xaxis: {
                    type: 'datetime',
                    min: new Date('01 Mar 2012').getTime(),
                    tickAmount: 6,
                },
                series: [{
                    data: []
                }
                ],
                title: {
                    text: 'AMR Consumption',
                },
                noData: {
                    text: 'No Data'
                }
            }
        }
    }


    componentDidMount() {
        axios.get(url)
            .then(res => {
                const series = res.data;
                // this.state.options.series.push
                // console.log('SERIES ARRAY: ' + res.data);

                const myArray = [];
                myArray.push(series);

                console.log(myArray);

                // this.setState({
                //     data: myArray
                // })


                for (let i = 0; i < myArray.length; i++) {
                    this.setState({
                        options: {
                            ...this.state.options,
                            series: {
                                ...this.state.options.series,
                                data: myArray[i]
                            }
                        }
                        // series: myArray[i]
                    })
                }

                console.log("CHART SERIES: " + JSON.stringify(this.state.options.series.data));


            })

    }

    render() {

        return (
            <div className="container">
                <Chart options={this.state.options} series={this.state.options.series} type="bar" width="500" />
            </div>
        );
    }

}

export default Bar;

Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See (...) for more information.

Answer 2

You can do that with the stacked parameter in your options:

scales: {
    xAxes: [{
        stacked: true,
    }],
    yAxes: [{
        stacked: true
    }]
}