Skip to main content
SimilarExport ZIP
100%

Fork of Digital mockup of a horizontal bar chart

✓ Published1🌍 Public
Ddsims2157
Last edited Jan 27, 2023
Created on Jan 26, 2023

This horizontal bar chart mockup displays five black bars of varying heights on a white background, labeled A through E below the x-axis. Using embedded SVG within an HTML page, the visualization renders dark rectangles with hardcoded coordinates and dimensions. The chart applies the Share Tech font from Google Fonts to both the title text and axis labels. The code uses plain SVG elements like rect and text, styled through CSS, demonstrating a static pseudo-viz rather than an interactive data-driven chart.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows four horizontal bars labeled A through D, each with equal length, rendered as black rectangles with white fill and a thick black stroke on the first bar. The visualization uses raw SVG elements defined directly in HTML, with CSS styling controlling the font family 'Share Tech' and the bar’s stroke properties. JavaScript is not used; the chart is static, relying on inline SVG `rect` and `text` tags within a 960x600 viewport.

Bbillzhou2005
87% match
Loading thumbnail…

Digital mockup of a barchart

This example displays a dark-themed digital mockup of a bar chart, using a series of black rectangles of varying heights and widths arranged horizontally on a white background to suggest categorical data. The visualization is rendered as static inline SVG within an HTML page, styled with basic CSS for the heading text. Built with React and rendered via SVG, the chart is purely illustrative, with no interactive behavior or data binding, serving as a visual placeholder for a future chart implementation.

Ddsims2157
86% match
Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

A fork of the "Pseudo Horizontal Bar Chart" example, this SVG visualization renders four labeled bars (A through D) as plain black rectangles on a white canvas. The chart compares categorical values through the varying widths of each bar, with the first bar distinguished by an outlined stroke and no fill. Built with raw SVG elements—`rect` and `text`—and styled using the Share Tech font, the chart is rendered directly in HTML without any JavaScript libraries or data-binding code.

NNixonthiyagesh-Hexa
86% match
Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

This fork of a pseudo horizontal bar chart uses SVG rectangles and text elements to display four labeled bars (A–D) with varying widths. The bars are drawn as black rectangles, with the first bar styled in blue and outlined with a white fill and black stroke. The chart is rendered via SVG directly in HTML, using the Share Tech font for labels, and approximates a bar chart without relying on external plotting libraries.

Aadventuresenglish.info@gmail.com
86% match
Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

This fork of a pseudo horizontal bar chart displays four labeled bars (A–D) using raw SVG rectangles and text elements. The first bar is blue with a thick black stroke, while the remaining bars are black, sized to approximate descending values. Rendered with inline SVG in an HTML page, it uses the Share Tech font and no JavaScript libraries or data-binding frameworks. The chart is a static approximation of a bar chart, with the SVG viewBox, rect positioning, and font styling defined directly in the markup.

Iinnocent thomas
86% match
Loading thumbnail…

Fork of Fork of Pseudo Bar Chart Horizontal

This example demonstrates a horizontal bar chart using pure SVG shapes, with four black bars of varying lengths representing categories A through D. The chart is built directly in HTML with React, using SVG `<rect>` and `<text>` elements positioned via transform matrices to create the horizontal layout. The rendering relies on inline SVG with CSS styling for typography, featuring the Poppins font at a large size for labels. The data is hardcoded within the SVG markup, showing a straightforward approach to simple categorical visualization without external charting libraries.

Jjinjuta.s.au@gmail.com
85% match
Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

This example shows a simple horizontal bar chart with four labeled bars (A–D) drawn as plain SVG rectangles, using the burlywood background and black or white fills to distinguish the first bar. Text labels appear in orange, red, green, and blue. The visualization uses static SVG elements directly in HTML, with styling via CSS (including the Share Tech font), and no JavaScript or data-binding libraries. All dimensions and positions are hard-coded in the SVG markup, making it a purely declarative rendering of categorical values.

Mmrteee2
85% match
Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

This fork of the Pseudo Horizontal Bar Chart presents a minimalist categorical comparison using four labeled bars rendered as SVG `<rect>` elements. The first bar, A, has a distinct white fill with a black stroke, while the remaining bars B through D are solid black, creating a visual hierarchy. The chart uses HTML and inline SVG within a standalone HTML file, with text elements for labels. The specific data values are not derived from an external dataset; instead, the bar widths are hard-coded, and the design relies on the 'Share Tech' font for a stylized look.

FFangda Qiu
84% match