Click to show TOC
Using a bar chart to display the populations of European capitals, with each bar representing a city. You can label each bar with the city name, and display the country name when hovering over each bar.
 
cityData
array contains objects for each city, including the city name, population, and country name.cities
, populations
, and countries
are created by mapping over the cityData
array.trace
object defines a bar chart with city names on the x-axis and populations on the y-axis.text
property is used to define the hover text (country names) for each bar.hoverinfo
property is set to 'text'
to display only the country name when hovering.layout
object includes titles for both axes and formats the y-axis ticks with commas.newPlot
function creates the bar chart in the div
with the ID populationBarChart
.The html element to draw the chart looks like the element below:
 
<div id="populationBarChart" style="width: 100%; max-width: 800px; height: 500px;"></div>
You will see a bar chart where each bar represents a European capital. Each bar is labeled with the city name, and when you hover over a bar, the name of the country will be displayed.
This bar chart effectively visualizes the population distribution across European capitals, with added interactivity through the hover functionality.