0

I have the following code to display the bar chart but it displays only limited dataset and not the entire JSON obtained. Can anyone please guide me to get the obtained result.

My Implementation

this.myChart = new Chart(this.canvasRef.current, {
  type: this.props.horizontal ? 'horizontalBar' : 'bar',
  options: {
    aspectRatio: 1,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        stacked: true
      }],
      xAxes: [{
        stacked: true
      }]
    }
  },
  data: {
    labels: this.props.data.map(d => d.label),
    datasets: [{
      label: this.props.title,
      data: this.props.data.map(d => d.value),
      backgroundColor: this.props.colors || getRandomColor(this.props.data.length)
    }]
  }
});



<div style={{ position: 'relative', display: 'flex', alignItems: 'center', width: '100%', height: '100%' }}>
    <canvas ref={this.canvasRef} />
</div>

Dataset which needs to be Implemented:

{"data":[{"id":13,"name":"Amazon","spend":"34405.15"},{"id":65,"name":"Fisher Scientific","spend":"5265.32"},{"id":204,"name":"Airgas","spend":"29237.79"},{"id":219,"name":"Technical Safety Services LLC (TSS)","spend":"2840.00"},{"id":220,"name":"Biotechnical Services Inc (BTS)","spend":"720.00"},{"id":244,"name":"Walmart","spend":"133.76"},{"id":258,"name":"Best Buy","spend":"652.88"},{"id":334,"name":"Poppin","spend":"143763.37"},{"id":369,"name":"REUZEit, Inc.","spend":"400.00"},{"id":404,"name":"Genesee Scientific Corporation","spend":"561.00"},{"id":443,"name":"Cascade Thermal Solutions","spend":"4700.00"},{"id":504,"name":"Chemometec","spend":"2052.76"},{"id":553,"name":"Home Depot ","spend":"349.30"},{"id":568,"name":"Apex Mechanical Systems INC.","spend":"40721.27"},{"id":577,"name":"Grainger","spend":"4798.09"},{"id":578,"name":"Reese Building Services, Inc.","spend":"1360.00"},{"id":588,"name":"Waxie","spend":"563.00"},{"id":593,"name":"WestAir Gases & Equipment Inc.","spend":"170.00"},{"id":601,"name":"Division 9 Flooring and Finishes, INC.","spend":"500.00"},{"id":609,"name":"Century Painting Corp","spend":"456.00"},{"id":628,"name":"ICKLER ELECTRIC CORPORATION","spend":"16985.00"},{"id":630,"name":"Sullivan","spend":"707.50"},{"id":633,"name":"Vape pen Wholesale","spend":"299.98"},{"id":634,"name":"Bret Manwill","spend":"200.00"},{"id":638,"name":"La Jolla Lock ","spend":"200.00"},{"id":646,"name":"La Mesa Glass","spend":"1830.00"},{"id":652,"name":"Zoubek Consulting, LLC ","spend":"6603.00"},{"id":678,"name":"Geigle Safety Group, Inc.","spend":"1176.00"},{"id":703,"name":"Openpath Security Inc.","spend":"13245.00"},{"id":704,"name":"Fernando Ontiveros","spend":"951.18"},{"id":712,"name":"Ratermann Cryogenics","spend":"808.78"},{"id":718,"name":"UCSD Surplus Sales ","spend":"3750.00"},{"id":719,"name":"Keurig ","spend":"671.04"},{"id":732,"name":"Central Computers, Inc.","spend":"4627.35"},{"id":738,"name":"Sears","spend":"2879.98"},{"id":761,"name":"Ubiquiti Networks ","spend":"2743.00"},{"id":762,"name":"Monoprice","spend":"582.55"},{"id":772,"name":"123 Security Products","spend":"257.94"},{"id":773,"name":"Tech Instrumentation, Inc.","spend":"676.80"},{"id":805,"name":"Lowe's","spend":"3031.96"},{"id":810,"name":"Apple Spice Box Lunch Delivery & Catering Co","spend":"759.50"},{"id":811,"name":"Corner Bakery","spend":"369.72"},{"id":844,"name":"Sketch B.V","spend":"9.00"},{"id":845,"name":"Adobe","spend":"2913.99"},{"id":862,"name":"JB Pacific, Inc.","spend":"6456.00"},{"id":864,"name":"MERCHOLOGY","spend":"703.00"},{"id":865,"name":"National Pen","spend":"237.04"},{"id":866,"name":"MAKES BY MIKE","spend":"601.72"},{"id":870,"name":"Lenovo USA","spend":"1371.86"},{"id":877,"name":"Espime, S. A.","spend":"600.00"},{"id":878,"name":"Brave Gowns","spend":"540.00"},{"id":879,"name":"Rush Order Tees","spend":"997.65"},{"id":882,"name":"Costco","spend":"155.29"},{"id":927,"name":"Solar | Art","spend":"4944.00"},{"id":929,"name":"Avery","spend":"461.94"},{"id":962,"name":"Global Equipment Company Inc.","spend":"929.25"},{"id":969,"name":"Carewell","spend":"349.90"},{"id":996,"name":"eBay Inc.","spend":"23.00"},{"id":1011,"name":"TPS Printing","spend":"840.00"}]}

Output which I get:

enter image description here

Can anyone help me to display all the results from the JSON which I get instead of displaying only limited results ?

Naresh Kumar P
  • 4,127
  • 2
  • 16
  • 33

0 Answers0