Home

SVG Line Graph Generator?

SVG is the perfect solution for graphing, requiring a bit of math to convert the values into something scaled correctly for the size available within the graph, but very small in code size. Styling and many more possibilities exist, however this generator provides as start point, as well as usable line graphs for simple tasks.

SVG Line Graph Options

Number of columns + 1

Number of rows + 1

MUST be same amount of number as Y Axis Points

MUST be same amount of numbers as X Axis Points

SVG Code

Change the settings above in order to generate the graph SVG.

CSS

Basic CSS below can be altered for font, line style, line size and color.

.axis-lines{
	stroke:black;
	stroke-dasharray: 5;
	stroke-width: 0.5;
}

.graphline{
	stroke:green;
	stroke-width: 3;
	fill: none;
}

.x-labels{
	text-anchor: middle;
}

.y-labels{
	text-anchor: end;
	text-anchor: middle;
}

.x-heading{
	text-anchor: middle;
}

.y-heading{
	text-anchor: middle;
}