[Solved]-How to use axios to fetch data from servlet and then crossfilter it and display via highcharts-Highcharts

const url = (() => {
  const data = [{"pk_id":1,"acct_doc_header_id":539592086,"company_id":60,"document_number":39439082,"document_number_norm":39439082,"business_code":"pier9","create_year":"","document_line_number":0,"doctype":"ri","customer_number":218994,"customer_number_norm":218994,"fk_customer_map_id":-1,"customer_name":"pied piper","division":"","documentcreatedate":"jul 5, 2018","documentcreatedatenorm":"jul 5, 2018","posting_id":"","invoice_id":39439082,"invoice_id_norm":39439082,"totalopenamount":0.0,"totalopenamountnorm":0.0,"cust_payment_terms":60,"business_area":"","ship_to":"","clearingdate":"sep 5, 2018","clearingdatenorm":"sep 5, 2018","reason_code":"","isopen":0,"debit_credit_indicator":"","payment_method":"","invoiceamountdoccurrency":3925.91,"document_id":539592086,"actualopenamount":3925.91,"paidamount":3925.91,"dayspast_due":2,"invoice_age":62,"disputed_amount":0.0}]
  const blob = new blob([json.stringify(data)], {
    type: 'application/json'
  })
  return url.createobjecturl(blob);
})()

const options = ({data, categories}) => ({
  chart: {
      type : 'bar',
      backgroundcolor:'#1b1f38',
      minwidth: 275,
      height: '222px',              
  },
  title : {
      text : "total amount by company code",
      style:{
          color: '#ffffffa5'
      }
  },
  xaxis : {
      type : 'category',
      categories,
      title: {
        text: null
    },
    overflow : 'auto'

  },
  yaxis : {
    min: 0,
  },
  tooltip: {
    valuesuffix: ' dollars'
  },
  series : [{
      data
  }],
  legend : {
    enabled : false,
  },
  credits: {
     enabled : false,
    },
  exporting: {
    enabled : false,
  },
  plotoptions: {}
})

const preparedataforhighcharts = (groups) => {
  const categories = [];
  const data = [];
  const gdata = groups.top(4);
  for(const {key, value} of gdata) {
    categories.push(key);
    data.push(value);
  }
  
  return {
    categories,
    data
  }
}

const reacthighcharts = reacthighcharts;
const { component, usestate, useeffect } = react;

class analyticssection extends component {

  constructor(props) {
    super(props);
    this.state = {
      isloading: true,
      dataresults: [],
      config: {}
    }
  }

  componentdidmount() {
    this.mounted = true;
    
    axios.get(url)
        .then(response => {
          const dataresults = response.data;
         
          if(!this.mounted) {
            return;
          }
          
          const dataset = crossfilter(dataresults);
          const bcodedim = dataset
            .dimension(({business_code}) => business_code);
          const bcodegrp = bcodedim.group()
            .reducesum(({actualopenamount}) => actualopenamount);
          const obj = preparedataforhighcharts(bcodegrp);
          const config = options(obj);
          
          this.setstate(state => ({
            isloading: false,
            config
          }));
      })
      .catch(error => {
        console.log(error);
      });
  }
  
  componentwillunmount() {
    this.mounted = false;
  }
  
  render() {
    const { isloading, config } = this.state;
  
    return <div>
    {isloading ? <div>loading</div> : <reacthighcharts config = {config}></reacthighcharts>}
  </div>
  }
  
}

reactdom.render(
    <analyticssection />,
    document.getelementbyid('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://unpkg.com/react-highcharts@16.0.2/bundle/reacthighcharts.js"></script>
<script src="https://unpkg.com/crossfilter2@latest/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<div id="root"></div>