JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/keen-analysis@3"></script>
<script src="https://cdn.jsdelivr.net/npm/keen-dataviz@3/dist/keen-dataviz.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-dataviz@3/dist/keen-dataviz.min.css">
<div id='chart'></div>

CSS

#chart{
  height: 400px;
}

JavaScript

const client = new KeenAnalysis({
  projectId: '5c87b64ec9e77c0001cf5b6e',
  readKey: 'FB952962910C97DE3E1C6A25EB2FC6B22FDB1ACA9D572948EA18227287BC4E12'
});

const chart = new KeenDataviz({
  container: '#chart',
  type: 'funnel',
  title: 'Actions and purchases',
  labelMapping: {
  	pageviews: 'Pageviews',
    signups: 'Signups',
    purchases: 'Purchases'
  },
  funnel: {
  	percents: {
    	show: true,
    },
  }
});

client
  .query({
		analysis_type: 'funnel',
    steps: [
      {
        event_collection: 'pageviews',
        actor_property: 'user.uuid',
        timeframe: {
          start: '2019-03-13T00:00:00.000Z',
          end: '2019-08-14T00:00:00.000Z'
        }
      },
      {
        event_collection: 'signups',
        actor_property: 'user.uuid',
        timeframe: {
          start: '2019-03-13T00:00:00.000Z',
          end: '2019-08-14T00:00:00.000Z'
        }
      },
      {
        event_collection: 'purchases',
        actor_property: 'user.uuid',
        timeframe: {
          start: '2019-03-13T00:00:00.000Z',
          end: '2019-08-14T00:00:00.000Z'
        }
      }
    ]
  })
  .then(function(res) {
    // Handle the result
    chart.render(res);
  })
  .catch(function(err) {
    // Handle the error
    chart
      .message(err.message);
  });