3D Bar chart for Hotel Booking Availability

100%

3D Bar chart for Hotel Booking Availability

✓ Published1🌍 Public

Last edited Apr 27, 2023

Created on Apr 27, 2023

This example uses Highcharts with its 3D module to render a grouped, stacked 3D column chart of hotel booking metrics across seven countries. The chart displays five series—representing booking percentages, closing rates, availability, opening rates, and low availability—with each country shown along the x-axis and the y-axis measuring booking cancellation percentages. The chart’s 3D perspective is enabled via the `options3d` configuration, setting alpha, beta, and depth, while columns use stacking and group padding to distinguish series visually. Data is hardcoded in the script, with interactions handled through jQuery and the Highcharts API.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 3D Bar chart for Hotel Booking Availability

This example shows a 3D bar chart comparing hotel booking metrics across seven countries, including India, the United States, Brazil, and France. Five series—such as booking cancellation percentage, hotel closing rate, and hotel high availability—are grouped and stacked in a three-dimensional view. The chart is built using the Highcharts library with the highcharts-3d module, enabling rotation and depth through the options3d settings. Data is supplied as inline arrays per country, and axes are labeled to distinguish the booking metrics and sources. The background is set to pink via CSS.

Kkakumanusreya

91% match

Loading thumbnail…

3D Bar chart

This 3D bar chart visualizes public transport usage across six countries for each year from 2014 to 2019, with columns grouped by country along the x-axis and stacked by year along the z-axis. The chart uses the Highcharts library with its highcharts-3d module, enabling a perspective view through the options3d configuration (alpha, beta, and depth). Each series represents a year, and the data is provided as arrays of [category index, value] pairs. The chart also includes styled axes labels and a title, all rendered on a simple HTML page with a blue background.

Hhm0421

74% match

Loading thumbnail…

3D-bar chart(Revanth)

This example shows a 3D bar chart of top-10 car sales, with bars grouped by country of origin (United States, India, UK) and height representing sales in billions of USD. Using Highcharts with the highcharts-3d extension, the chart renders with a rotation angle and perspective via the `options3d` settings, with columns configured through `plotOptions.column` for depth and stacking. The page loads Highcharts from a CDN within a minimal HTML wrapper, with data specified as coordinate pairs in the series.

RRevanthGrreddy

73% match

Loading thumbnail…

Bonus ICE - 3D Bar chart

This 3D bar chart displays visitor counts for seven global landmarks, comparing six countries (USA, China, India, Italy, Turkey, and UK) using stacked, non-grouped columns. Built with Highcharts and the Highcharts-3D extension, it renders a three-dimensional perspective with configurable alpha, beta, and view distance to show depth. The chart uses the `options3d` API to enable 3D rendering and the `grouping: false` property to place all series in a single column cluster. The x-axis lists landmarks, the y-axis counts total visitors, and the z-axis labels the places, with data hard-coded directly in the array structures.

Ssuchitra2602

72% match

Loading thumbnail…

3D Bar chart

This 3D bar chart displays the population of six countries—the UK, Australia, Germany, Italy, Canada, and Switzerland—from 2018 to 2023, with each year grouped as a separate series along the z-axis. The visualization uses Highcharts with the highcharts-3d module, setting chart options like `options3d` for depth, rotation, and view distance, and enables stacked columns with `grouping: false` to position bars by country and year. Data is sourced from Macrotrends and loaded directly into series arrays, while the chart’s title, axes, and margins are configured via jQuery’s `$(function () { ... })` wrapper on the `#container` div.

CChathurya

72% match

Loading thumbnail…

3D Bar chart

This example shows a 3D vertical bar chart comparing the team sizes of six IT roles across seven major technology firms. Each firm appears along the x-axis, with bars grouped and stacked by role, such as Project Management, Security, and Support Team, while the use of depth and rotation makes the comparison visually dimensional. The chart is built with Highcharts and the Highcharts 3D module, using column series with `options3d` enabled and explicit `depth` and `groupZPadding` settings to create the three-dimensional effect and separate stacked groups. Data is loaded directly as static arrays in the script.

Nnikhilagopi

72% match

Loading thumbnail…

3D Bar Plotting

This example shows an interactive 3D bar chart comparing profits for multiple motels across the years 2017–2021. The visualization uses the `d3.x3d.chart.barChartMultiSeries` API to render bars as three-dimensional objects within an X3DOM scene. Data is loaded asynchronously from a CSV file using `d3.csv` and parsed into a hierarchical format with each motel containing five yearly values. Users can rotate and explore the plot, which includes animated transitions as the dataset loads.

SSravyaAnnadi

72% match

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example presents a 3D bar chart comparing the profits of six U.S. motels across several months (2017 through June). The visualization uses x3dom for rendering the three-dimensional scene within the browser. The code constructs the chart using the `d3.x3d.chart.barChartMultiSeries` API, which integrates D3.js v5 with the X3D standard, and loads the data from a remote CSV file. The dataset is parsed with `d3.csv` and bound to the chart holder element to update the display.

SSravyaAnnadi

71% match