Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Barchart Vanila Javascript

Public visualization

Viewing a saved revision (read-only)

e34126b1f799469d9f40aac440e0530e

Barchart Vanila Javascript

0 stars2🌍 Public
Sserebryanaya.n@gmail.com
Last edited Feb 21, 2023
Created on Feb 9, 2023

This example displays a bar chart of 80 randomly generated values, rendered as green bars with their numerical values appearing on hover. The visualization is built entirely with vanilla JavaScript and the SVG API, creating each rectangle and text element programmatically using `createElementNS`. The bars have a semi-transparent appearance that becomes fully opaque with a thicker stroke on mouseover, while the corresponding value label fades in using a CSS sibling selector. The chart fills the entire browser window by using `window.innerWidth` and `window.innerHeight` to set the SVG dimensions.

AI-generated description

An example hendmade barchart SVG.