How to Create an SVG Line Chart  Pure SVG and D3.js Guide
SVG line charts connect data points with polyline or curved path elements  build responsive, animated, and multi-series line charts.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Line Chart with <polyline>
Map each data point to SVG coordinates: `x = index / (points-1) * chartWidth`, `y = chartHeight - (value/max * chartHeight)`. Join all points as a `<polyline points='x1,y1 x2,y2 ...'>` for a simple line chart.
- Map data: x = i / (n-1) * width, y = height - val/max * height
- <polyline points='0,50 100,30 200,80' fill='none' stroke='blue'/>
- Add <circle> elements at each data point for markers
Smooth Curved Line with SVG Path
For smooth curves, use the SVG `<path>` element with cubic bezier curves. D3.js `d3.line().curve(d3.curveCatmullRom)` calculates smooth path data from data points automatically.
- D3: d3.line().x(d => xScale(d.x)).y(d => yScale(d.y)).curve(curveCatmullRom)
- Area chart: close the line path along the baseline for fill
- Multi-series: render one <path> per data series with different strokes
Frequently Asked Questions
How do I add a fill under a line chart in SVG?
Extend the path down to the baseline: add L width,height L 0,height Z to close the path, then set fill on the <path> with opacity for an area chart effect.
How do I make a multi-series SVG line chart?
Render one <path> or <polyline> element per data series, each with a different stroke color. Add a legend with colored <rect> and <text> elements referencing each series name.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG