Skip to main content
SimilarExport ZIP
100%

Side Bar Chart

✓ Published0🌍 Public
CClaudio Puggioni
Last edited May 12, 2023
Created on May 12, 2023
Forked from HTML Starter

A horizontal bar chart displays four categories (A, B, C, D) with bars of varying lengths, drawn as SVG rectangles with custom hex fills. The chart uses static CSS styling to position category labels in a large Share Tech font, while the SVG viewBox defines the 827×555 coordinate space. This React-based example (from vizhub's v3 starter) renders purely through declarative SVG markup, with no JavaScript libraries or data binding beyond the hardcoded values.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart encodes four categories, A through D, as horizontal black bars of varying lengths on a white background, with the first bar highlighted in blue. Each bar’s width suggests a quantitative value, while category labels sit to the left. The visualization uses plain SVG rectangles and text elements, with styling controlled by CSS, including the Share Tech font. The layout is fixed within a 506×321 viewBox, and no interactive or dynamic data binding is present.

DDavid Hojdan
87% match
Loading thumbnail…

Pseudo horizontal bar chart

This pseudo horizontal bar chart is a static SVG composition built directly in HTML. Four labeled bars (A, B, C, D) extend from a common left margin, each with a fixed height and varying widths to represent distinct magnitudes. The visualization relies on raw SVG `<rect>` and `<text>` elements styled with CSS, including a custom Share Tech font. A hover effect is applied to a small circle, changing its fill and stroke color via a CSS transition, though the chart itself is non-interactive.

NNico-Nico
85% match
Loading thumbnail…

Horizantal Bar SVG Fundamentals

This example shows a horizontal bar chart with four bars representing categorical values A, B, C, and D, rendered as simple SVG rectangles on a white canvas. The bars are positioned using explicit x and y coordinates with fixed heights and widths, while category labels are placed to the left using SVG text elements with a shared CSS ID for styling. The visualization is built using raw SVG markup embedded directly in an HTML page, with no external libraries or JavaScript logic, demonstrating fundamental SVG layout techniques in a React-independent context.

Ssubratanp
84% match
Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart uses black rectangles to represent categorical values A through D, with varying heights that suggest a bar chart’s visual hierarchy while omitting traditional axes. The SVG code explicitly places four rectangles and paired text labels, demonstrating a static, hand-coded layout. It relies on React’s rendering approach via the v3 framework, though the visible implementation uses raw SVG elements and CSS styling with the Share Tech font. No data binding or dynamic computation occurs; the chart is purely declarative.

TTheo-0201
84% match
Loading thumbnail…

vs_bar_chart

This chart shows a minimalist horizontal bar chart comparing values for categories A, B, C, and D, with the first bar highlighted in blue and outlined in black. The chart is rendered as an SVG using specific rectangular coordinates for each bar and text elements for the labels. The code sets the bar widths directly, appears to use the Share Tech font loaded from Google Fonts, and relies on raw SVG elements rather than a charting library.

Yyesyesnono01@yahoo.com
84% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

This example approximates a horizontal bar chart using raw SVG rectangles and text elements, displaying categories A through D with varying bar widths. The chart uses a black-on-white design with large ‘Share Tech’ typography, emphasizing a minimalist aesthetic. Built with inline SVG markup and standard HTML/CSS, it relies on fixed pixel coordinates for bar placement and sizing rather than data-driven JavaScript or a charting library. The rendering is fully static, with no interactive or animated behaviors present in the code.

Ttriciascully
84% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

This example presents a pseudo horizontal bar chart where three labeled bars (A, B, C) are drawn as filled black rectangles of varying widths, with large text labels positioned to their left. The visualization uses only raw SVG elements—`rect` and `text`—inside an inline `<svg>` tag, with no JavaScript or data-binding logic. The bars are hardcoded in the markup, and the chart relies on CSS (including the Share Tech font) and the SVG coordinate system to position elements, with commented-out path data suggesting an alternative icon-based labeling approach.

Iissam.benabid@gmail.com
83% match
Loading thumbnail…

Pseudo Horizontal bar chart

This example demonstrates a pseudo horizontal bar chart that uses narrow vertical rectangles to encode four values for categories A through D. The chart is hand-coded with SVG shapes, where each `<path>` element defines a rectangle via its edge coordinates, and `<text>` elements label the bars. The design uses an HTML/CSS foundation with the Share Tech font and custom styling for the first bar. This particular bar chart is implemented in React, leveraging SVG for all visual rendering.

DDanilo Moraes
83% match