Skip to main content
SimilarExport ZIP
100%

Bar Chart from figma

✓ Published0🌍 Public
Aavia62490
Last edited Aug 23, 2022
Created on Aug 23, 2022
Forked from HTML Starter

This example displays a static bar chart with four vertical bars in red, yellow, blue, and green, each with varying heights and positioned across a fixed 640×420 canvas. It uses raw SVG `<rect>` elements directly written in the HTML, with no JavaScript or data-binding libraries, and relies solely on hard-coded coordinates and dimensions for the bars. The rendering approach is pure SVG markup, with each bar’s fill color specified as a CSS color keyword.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

svg _ figma

This example shows four evenly spaced gray vertical bars of descending height, creating a simple bar chart-like composition on a white background. The chart is drawn entirely with static SVG `<rect>` elements, whose dimensions and positions are hardcoded in the markup. The page uses plain HTML and CSS, with no JavaScript libraries or data-binding logic present, and it is rendered directly in the browser via the SVG namespace.

Yyoohayung10309@gmail.com
88% match
Loading thumbnail…

Bar SVG Fundamentals

This example demonstrates a basic bar chart rendered entirely as static SVG elements, with a grey background and four dark bars of varying heights. The chart uses raw SVG markup within an HTML page, with each bar drawn using a `<rect>` element that specifies its x and y position, width, height, and fill color. The visualization relies on manual coordinate and dimension values rather than any data-binding or layout algorithm, showing the fundamental building blocks of SVG-based graphics in a React-free, bare-minimum HTML context. The chart’s values are hard-coded, so it does not respond to data changes or user interaction.

Ssubratanp
85% match
Loading thumbnail…

Bar Chart

This example shows a bar chart with six labeled bars (a–f) of varying heights, rendered as an SVG in a React environment using D3 v3. The code defines a band scale for the horizontal axis, a linear scale for the vertical axis, and draws axes with tick marks. It uses D3’s selection and data-join pattern (`selectAll`, `data`, `enter`) to create a `rect` for each data point, with bars filled in steel blue. The data is hardcoded in the script, with margins and padding configured around the 500-by-500 pixel canvas.

Ssojung114
85% match
Loading thumbnail…

Psuedo bar chart

This example shows a bar chart with four labeled bars (A through D) of varying lengths, rendered as SVG rectangles. The first bar is styled with red fill and a thick black stroke via a CSS class that overrides its inline blue fill, while the remaining bars alternate between blue and black fills. The visualization uses raw SVG elements within an HTML page, styled using CSS rules that set the font family, size, and bar appearance. No JavaScript libraries are used; the rendering relies entirely on static SVG markup and CSS properties.

Gguththered
85% match
Loading thumbnail…

Psuedo bar chart SVG from Figma

This example shows a pseudo bar chart rendered as static SVG rectangles on a gray background, with black bars of varying heights and positions representing categorical data values. The visualization relies on raw SVG elements—specifically `<rect>` tags—defined directly in the HTML, with fixed pixel coordinates and dimensions supplied from a Figma design. The code uses no JavaScript charting library; instead, it employs plain SVG and CSS styling within a React context. The layout is hardcoded, not generated from a dataset, and the bars’ heights and x-positions are manually set in the markup.

NNita
84% match
Loading thumbnail…

Bar graph chart

A static bar chart displays four colored bars with distinct heights, rendered as SVG rectangles. The red, green, yellow, and blue bars are positioned at different x-coordinates, with varying y-coordinates and heights that encode categorical data values. The chart uses raw SVG elements within an HTML document, specifying the `width`, `height`, and `viewBox` attributes on the root `<svg>` element. No JavaScript or external libraries are used; the visualization is achieved solely through declarative SVG markup.

SSumit Ningolli
83% match
Loading thumbnail…

Bar Chart

This example shows a bar chart with five rectangular bars of varying heights, rendered as black shapes against a white background. It presents categorical data where each bar’s height encodes a value, with the chart drawn directly in SVG using hard-coded `rect` elements. The visualization is built with React and relies on plain SVG markup, not a data-binding library like D3, as all dimensions and positions are explicitly defined within the JSX structure. The bars sit on a baseline, and the black-on-white contrast emphasizes the length differences across categories.

CClaudio Puggioni
83% match
Loading thumbnail…

Pseudo bar chart

The visualization presents a pseudo bar chart built from four rectangular bars of varying heights, each rendered as a static SVG element. It uses raw SVG `<rect>` shapes within an HTML page, with CSS styling for hover effects on circles. The chart relies on basic JavaScript and CSS, with no external charting library, instead encoding categorical data through bar lengths. The backdrop is a white canvas, and the bars are positioned to create a simple, unlabeled comparison.

NNico-Nico
83% match