JSFiddle - React, Tailwind, and code Playground

by seatsio

HTML

<script src="https://cdn.seatsio.net/chart.js"></script>
<div id="container">
  <div id="chart"></div>
</div>

CSS

#chart {
  height: 100vh;
}

JavaScript

new seatsio.SeatingChart({
  divId: 'chart',
  event: 'e1b652d0-501a-4ba7-8d7f-55fbaf0d5a09',
  workspaceKey: 'publicDemoKey',
  pricing: [{
      'category': 'Ground Floor',
      'ticketTypes': [{
          'ticketType': 'Adult',
          'price': 40
        },
        {
          'ticketType': 'Child (< 18)',
          'price': 30
        }
      ]
    },
    {
      'category': 'Balcony',
      'ticketTypes': [{
          'ticketType': 'Adult',
          'price': 50
        },
        {
          'ticketType': 'Child (< 18)',
          'price': 40
        }
      ]
    }
  ],
  priceFormatter: price => price + '€',
  showLegend: true
}).render()