<div id="chartOne"></div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

#chartOne {
  height: 400px;
  width: 1000px;
}
var xhr = new XMLHttpRequest();

xhr.addEventListener('load', function() {
  if (this.status == 200) {
    var response = JSON.parse(this.responseText);
    var characters = response.results;
    var characterData = [];
    characters.forEach(function(character) {
      characterData.push([character.name, parseInt(character.height)]);
    });
    
    var chartOneData = {
      type: 'bar',
      title: {
        text: 'REST API Endpoint Demo',
        adjustLayout: 'true'
      },
      tooltip: {
        text: 'Name: %kt<br>Height: %vvcm'
      },
      scaleX: {
        item: {
          angle: '-45'
        }
      },
      plotarea: {
        margin: 'dynamic'
      },
      series: [
        {
          values: characterData
        }
      ]
    };
    
    zingchart.render({
      id: 'chartOne',
      data: chartOneData,
      height: '100%',
      width: '100%',
    });
    
  }
});

xhr.open('GET', 'https://swapi.dev/api/people/');

xhr.send();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.zingchart.com/zingchart.min.js