JSFiddle - React, Tailwind, and code Playground

by seatsio

HTML

<div id="chart"></div>
<script type="text/javascript" src="https://cdn.seatsio.net/chart.js"></script>
<script>
    var chart = new seatsio.SeatingChart({
        divId: "chart",
        publicKey: "publicDemoKey",
        event: "smallTheatreEvent2",
        pricing: [
            {'category': 1, 'ticketTypes': [
                {'ticketType': 'adult', 'price': 30},
                {'ticketType': 'child', 'price': 20}
            ]},
            {'category': 2, 'ticketTypes': [
                {'ticketType': 'adult', 'price': 40},
                {'ticketType': 'child', 'price': 30},
                {'ticketType': '65+', 'price': 25}
            ]},
            {'category': 3, 'price': 50}
        ],
        priceFormatter: function(price) {
            return '$' + price;
        }
    }).render();
    
    function printSelectedObjects() {
			chart.listSelectedObjects(selectedObjects => console.table(selectedObjects));
    }
</script>

<button onClick="printSelectedObjects()">
  Print Selected Seats to console
</button>