SVG line graph

Developer
Shannon Range
Size
3,645 Kb
Views
10,120
  1. SVG line graph Previews
  2. SVG line graph HTML Codes
  3. SVG line graph CSS Codes

How do I make an svg line graph?

What is a svg line graph? How do you make a svg line graph? This script and codes were developed by Shannon Range on 10 November 2022, Thursday.

SVG line graph Previews
IQ Test

SVG line graph - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG line graph</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="income-gap"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 598.7 432.5" style="enable-background:new 0 0 598.7 432.5;" xml:space="preserve">
<g>	<rect x="30.1" y="0" class="background-rect" width="571.3" height="415.3"/>	<line class="horz-lines" x1="30.1" y1="26.7" x2="598.1" y2="26.7"/>	<line class="horz-lines" x1="30.1" y1="75.7" x2="598.1" y2="75.7"/>	<line class="horz-lines" x1="30.1" y1="124.6" x2="598.1" y2="124.6"/>	<line class="horz-lines" x1="30.1" y1="173.5" x2="598.1" y2="173.5"/>	<line class="horz-lines" x1="30.1" y1="222.5" x2="598.1" y2="222.5"/>	<line class="horz-lines" x1="30.1" y1="271.4" x2="598.1" y2="271.4"/>	<line class="horz-lines" x1="30.1" y1="320.3" x2="598.1" y2="320.3"/>	<line class="horz-lines" x1="30.1" y1="369.3" x2="598.1" y2="369.3"/> <g>	<text transform="matrix(1 0 0 1 0 373.3812)" class="label">20%</text>	</g>	<g>	<text transform="matrix(1 0 0 1 0.6002 79.8102)" class="label">140%</text>	</g>	<g>	<text transform="matrix(1 0 0 1 0.2759 128.7387)" class="label">120%</text>	</g>	<g>	<text transform="matrix(1 0 0 1 5.340576e-005 177.6672)" class="label">100%</text>	</g>	<g>	<text transform="matrix(1 0 0 1 4.0919 226.5957)" class="label">80%</text>	</g>	<g>	<text transform="matrix(1 0 0 1 4.0201 275.5242)" class="label">60%</text>	</g>	<g>	<text transform="matrix(1 0 0 1 4.3799 324.4527)" class="label">40%</text>	</g>	<g>	<text transform="matrix(1 0 0 1 0.2397 30.8812)" class="label">160%</text>	</g>	<text transform="matrix(1 0 0 1 41.7494 429.2027)" class="label">1950</text>	<text transform="matrix(1 0 0 1 128.1789 429.2027)" class="label">1960</text>	<text transform="matrix(1 0 0 1 215.0341 429.2027)" class="label">1970</text>	<text transform="matrix(1 0 0 1 301.0856 429.2027)" class="label">1980</text>	<text transform="matrix(1 0 0 1 387.4848 429.2027)" class="label">1990</text>	<text transform="matrix(1 0 0 1 472.6359 429.2027)" class="label">2000</text>	<text transform="(560.2536 429.2027)" class="label">2010</text>	<g><line class="dotted-line" x1="52.2" y1="417.8" x2="52.2" y2="292.8"/></g>	<g><line class="dotted-line" x1="139" y1="417.8" x2="139" y2="254.4"/></g>	<g><line class="dotted-line" x1="225.2" y1="417.8" x2="225.2" y2="186.5"/></g>	<g><line class="dotted-line" x1="311.9" y1="417.8" x2="311.9" y2="161"/></g>	<g><line class="dotted-line" x1="398.4" y1="417.8" x2="398.4" y2="112.6"/></g>
<g><line class="dotted-line" x1="484.8" y1="417.8" x2="484.8" y2="42.5"/></g>
<g><line class="dotted-line" x1="571.2" y1="417.8" x2="571.2" y2="47.6"/></g> <polyline class="gap-filler" points="597.4,41.1 588.7,47.9 580.1,48.8 571.4,46.4 562.8,42 554.1,41.8 545.5,34.1 536.8,34.1 528.2,35.5	519.5,45.5 510.9,44.4 502.2,48.6 493.6,42.5 484.9,42.5 476.3,42.5 467.6,57.7 459,71.7 450.3,88.1 441.7,92.7 433,94.9	424.4,105.8 415.7,117.8 407.1,119.6 398.4,112.6 389.8,106.7 381.1,115.4 372.5,121.3 363.8,124.6 355.2,134.2 346.5,141	337.9,150.2 329.2,155.2 320.6,162 311.9,160.4 303.3,156.3 294.7,159.1 286,166.1 277.3,173.5 268.7,182.7 260,175.9 251.4,175.1	242.7,176.4 234.1,191 225.4,193 216.8,195.8 208.1,206.5 199.5,208.7 191.7,219.8 182.2,230.6 173.5,237.3 164.9,243.2	156.2,243.2 147.6,246.7 138.9,256.8 130.3,262.5 120.8,271.4 113,273.6 104.3,270.3 95.7,278 87,281.7 78.4,283.4 69.7,291.9	61.1,296.3 52.4,293 43.8,299.4 35.1,297.4 26.5,289.8 26.5,294.3 35.1,299.2 43.8,306.4 52.4,296.8 61.1,287.8 69.7,283.2	78.4,279.9 87,286.9 95.7,272.5 104.3,262 113,264.4 121.6,265.3 130.3,258.1 138.9,254.4 147.6,254.4 156.2,244.1 164.9,241.5	173.5,234.7 182.2,224 190.8,206.7 199.5,203.2 208.1,188 216.8,178.1 225.4,184.7 234.1,189 242.7,179 251.4,173.5 260,173.5	268.7,182.7 277.3,178.8 286,177 294.7,170 303.3,165.7 311.9,179.2 320.6,187.1 329.2,191.9 337.9,193.2 346.5,188.2 355.2,182.5	363.8,174.4 372.5,173.5 381.1,173.5 389.8,169.6 398.4,168.9 407.1,176.6 415.7,185.8 424.4,188 433,178.6 441.7,171.1	450.3,168.5 459,162.8 467.6,153 476.3,145.1 484.9,141 493.6,148.2 502.2,152.3 510.9,156.3 519.5,156.7 528.2,155.8 536.8,151.2	545.5,151 554.1,162 562.8,168.1 571.4,175.9 580.1,175.9 588.7,176.4 597.4,170.3 "/>	<polyline class="bottom20-line" points="26.3,294.3 34.9,299.2 43.6,306.4 52.2,296.8 60.9,287.8 69.5,283.2 78.2,279.9 86.8,286.9	95.5,272.5 104.1,262 112.8,264.4 121.4,265.3 130.1,258.1 138.7,254.4 147.4,254.4 156,244.1 164.7,241.5 173.3,234.7 182,224	190.6,206.7 199.3,203.2 207.9,188 216.6,178.1 225.2,184.7 233.9,189 242.5,179 251.2,173.5 259.8,173.5 268.5,182.7 277.1,178.8	285.8,177 294.5,170 303.1,165.7 311.7,179.2 320.4,187.1 329,191.9 337.7,193.2 346.3,188.2 355,182.5 363.6,174.4 372.3,173.5	380.9,173.5 389.6,169.6 398.2,168.9 406.9,176.6 415.5,185.8 424.2,188 432.8,178.6 441.5,171.1 450.1,168.5 458.8,162.8	467.4,153 476.1,145.1 484.7,141 493.4,148.2 502,152.3 510.7,156.3 519.3,156.7 528,155.8 536.6,151.2 545.3,151 553.9,162	562.6,168.1 571.2,175.9 579.9,175.9 588.5,176.4 597.2,170.3	"/> <polyline class="top5-line" points="26.3,289.8 34.9,297.4 43.6,299.4 52.2,293 60.9,296.3 69.5,291.9 78.2,283.4 86.8,281.7 95.5,278	104.1,270.3 112.8,273.6 120.6,271.4 130.1,262.5 138.7,256.8 147.4,246.7 156,243.2 164.7,243.2 173.3,237.3 182,230.6	191.5,219.8 199.3,208.7 207.9,206.5 216.6,195.8 225.2,193 233.9,191 242.5,176.4 251.2,175.1 259.8,175.9 268.5,182.7	277.1,173.5 285.8,166.1 294.5,159.1 303.1,156.3 311.7,160.4 320.4,162 329,155.2 337.7,150.2 346.3,141 355,134.2 363.6,124.6	372.3,121.3 380.9,115.4 389.6,106.7 398.2,112.6 406.9,119.6 415.5,117.8 424.2,105.8 432.8,94.9 441.5,92.7 450.1,88.1	458.8,71.7 467.4,57.7 476.1,42.5 484.7,42.5 493.4,42.5 502,48.6 510.7,44.4 519.3,45.5 528,35.5 536.6,34.1 545.3,34.1	553.9,41.8 562.6,42 571.2,46.4 579.9,48.8 588.5,47.9 597.2,41.1	"/>
</g>
</svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

SVG line graph - Script Codes CSS Codes

.background-rect { fill:#ECE1CC;
}
.horz-lines { fill:none; stroke:#FFF; stroke-width:1.3575; stroke-miterlimit:10
}
.gap-filler { fill:#f9f9fa; display:none
}
svg:hover .gap-filler { display:inherit;
}
.label { font-family:'ProximaNovaCond-Regular'; font-size:12px; font-weight:600; text-anchor:"start";
}
.dotted-line { fill:none; stroke:#C0C2C4; stroke-width:3; stroke-miterlimit:10; stroke-dasharray:4,6
}
.dotted-line:hover { stroke:#000
}
.bottom20-line { fill:none; stroke:#3F4D6C; stroke-width:3; stroke-linecap:round; stroke-miterlimit:10
}
.top5-line { fill:none; stroke:#B44F26; stroke-width:3; stroke-miterlimit:10
}
SVG line graph - Script Codes
SVG line graph - Script Codes
Home Page Home
Developer Shannon Range
Username silentkrange
Uploaded November 10, 2022
Rating 3
Size 3,645 Kb
Views 10,120
Do you need developer help for SVG line graph?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Shannon Range (silentkrange) Script Codes
Name
Ammap3 - US heat map
D3 Productivity-Wage Gap bar chart
D3 Bar Chart - Poverty Rate - FINAL
Drawing svg line with Lazy Line Painter
Info card jquery slideToggle
D3 line chart 2
Powerball Odds
Hover.css
Animated bar charts in sequence
A Pen by Shannon Range
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!