Home › Dev & Data › CSV Chart (SVG)
Dev & Data
CSV Chart (SVG)
Pick a label column and a value column and get a bar chart as clean SVG — save it, or paste it straight into a document, slide or web page. Vector, so it stays sharp at any size, and generated on your machine rather than uploaded to a chart service.
Try it now
Worked example
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 360" width="720" height="360" font-family="system-ui,sans-serif">
<rect width="720" height="360" fill="#0b0e14"/>
<text x="60.0" y="24" fill="#e6e9f0" font-size="16" font-weight="700">Revenue by row</text>
<line x1="60.0" y1="290.0" x2="700.0" y2="290.0" stroke="#232a3d"/>
<line x1="60.0" y1="290.0" x2="700.0" y2="290.0" stroke="#1a2030"/>
<text x="54.0" y="294.0" fill="#9aa3b5" font-size="11" text-anchor="end">0</text>
<line x1="60.0" y1="165.0" x2="700.0" y2="165.0" stroke="#1a2030"/>
<text x="54.0" y="169.0" fill="#9aa3b5" font-size="11" text-anchor="end">9000</text>
<line x1="60.0" y1="40.0" x2="700.0" y2="40.0" stroke="#1a2030"/>
<text x="54.0" y="44.0" fill="#9aa3b5" font-size="11" text-anchor="end">18000</text>
<rect x="79.2" y="90.0" width="89.6" height="200.0" fill="#4ade80"/>
<text x="124.0" y="304.0" fill="#9aa3b5" font-size="11" text-anchor="end" transform="rotate(-45 124.0 304.0)">North</text>
<rect x="207.2" y="140.0" width="89.6" height="150.0" fill="#4ade80"/>
<text x="252.0" y="304.0" fill="#9aa3b5" font-size="11" text-anchor="end" transform="rotate(-45 252.0 304.0)">South</text>
<rect x="335.2" y="40.0" width="89.6" height="250.0" fill="#4ade80"/>
<text x="380.0" y="304.0" fill="#9aa3b5" font-size="11" text-anchor="end" transform="rotate(-45 380.0 304.0)">North</text>
<rect x="463.2" y="190.0" width="89.6" height="100.0" fill="#4ade80"/>
<text x="508.0" y="304.0" fill="#9aa3b5" font-size="11" text-anchor="end" transform="rotate(-45 508.0 304.0)">East</text>
<rect x="591.2" y="140.0" width="89.6" height="150.0" fill="#4ade80"/>
<text x="636.0" y="304.0" fill="#9aa3b5" font-size="11" text-anchor="end" transform="rotate(-45 636.0 304.0)">South</text>
</svg>
<!-- 5 bar(s). Save as .svg, or paste straight into a document or web page. -->
Inputs
- Label column
region - Value column
revenue - Chart title
Revenue by row
Frequently asked
Why SVG and not an image?
SVG is text: it scales without blurring, it is editable, and it can be pasted directly into a document or web page. It is also why this can be produced without a server.
How many bars?
Up to 30, so labels stay readable. Filter or sort with CSV Query first if you need the top slice of a bigger file.