Custom Price Colors

Visualize price tiers with custom color schemes in this practical demonstration of the SeatmapBookingRenderer’s price color configuration.

The example illustrates how to define color arrays for different price tiers and shows how the renderer automatically selects the appropriate color set based on the number of prices returned from the API. The interface includes two zoom control buttons (+ and -) that allow users to zoom in and out of the seatmap to better examine the color-coded pricing throughout the venue.

How-To set custom Price colors

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = '78c6e0d2-347e-424d-9d7a-ac092655bf56';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10
11  theme: {
12    // We will look this array for a matching amount of colors pased on the amount of different prices we got from API
13    priceColors: [
14      // Keep the longest price first for fallback
15      // 6: red, gree, blue, mix1, mix2, mix3
16      ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF'],
17
18      // For configured example this will be used, as it has 5 colors and API return 5 prices
19      // 5: red, gree, blue, mix1, mix2
20      ['#FF0000', '#00FF00', '#0000FF', '#FF00FF', '#00FFFF'],
21
22      // Configuration for other events where we have different amount of prices
23      // 3: red, green, blue
24      ['#FF0000', '#00FF00', '#0000FF'],
25      // 2: red, blue
26      ['#FF0000', '#0000FF'],
27      // 1: blue
28      ['#0000FF'],
29    ],
30
31    // Move this feature to admin section:
32    // colorCategories: ['#0000FF', '#00FF00', '#FF0000'],
33  },
34};
35
36(() => {
37  const el = document.getElementById('root');
38  if (!el) {
39    return;
40  }
41
42  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
43
44  renderer.loadEvent(eventId);
45})();

HTML

1<div id="root"></div>
2<div class="ZoomButtonList">
3  <div class="ZoomButton" onclick="seatmapRenderer.zoomIn()">+</div>
4  <div class="ZoomButton" onclick="seatmapRenderer.zoomOut()">–</div>
5</div>