JSFiddle - React, Tailwind, and code Playground

by jbristowe

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

const ranksUrl = 'https://storage.googleapis.com/http-archive-beta.appspot.com/js-lib-ranks.json';
fetch(ranksUrl)
	.then(response => response.json())
	.then(ranks => {
  const series = Object.keys(ranks).map(lib => ({name: lib, data: ranks[lib]}));
  drawChart(series);
});

function drawChart(series) {
  Highcharts.chart('container', {
      chart: {
          type: 'column',
          zoomType: 'x'
      },
      title: {
          text: 'Rankings of Popular JS Libraries'
      },
      subtitle: {
          text: 'Source: <a href="https://bigquery.cloud.google.com/savedquery/226352634162:ae7566b78dff4e8baf64aae5fdfa33c0">httparchive.org</a>',
          useHTML: true
      },
      tooltip: {
          formatter: function() {
              return `<b>${this.series.name}:</b> ${this.x} (${this.y})`;
          }
      },
      xAxis: {
          title: {
              text: 'Alexa Rank'
          },
          max: 500000
      },
      yAxis: {
          title: {
              text: 'Volume (per 1000)'
          }
      },
      series,
      credits: false
  });
}