Skip to content

Instantly share code, notes, and snippets.

@tcmacdonald

tcmacdonald/jsbin.ikowub.css

Created August 7, 2013 14:17
Show Gist options
  • Save tcmacdonald/6174460 to your computer and use it in GitHub Desktop.
Save tcmacdonald/6174460 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive SVG Charts
Raw
jsbin.ikowub.css
.chart{
width: 100%;
height: 100px;
overflow: hidden;
}
.chart_icon{
position: absolute;
font-size: 25px;
right: 5px;
top: 0;
}
.chart_content{
background: #D4D4D4;
}
.chart_line{
fill: none;
stroke: #666;
stroke-width: 2px;
vector-effect: non-scaling-stroke;
}
.chart_circle{
fill: #666;
radius: 5px;
vector-effect: non-scaling-stroke;
}
Raw
jsbin.ikowub.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="chart">
<svg width='100%' height='100%' class="chart_content">
<line x1="5%" y1="10%" x2="60%" y2="80%" class="chart_line" />
<line x1="60%" y1="80%" x2="80%" y2="50%" class="chart_line" />
<circle class="chart_circle" cx="5%" cy="10%" r="5"></circle>
<circle class="chart_circle" cx="60%" cy="80%" r="5"></circle>
<circle class="chart_circle" cx="80%" cy="50%" r="5"></circle>
</svg>
</div>
<br>
<div class="chart">
<svg xmlns="http://www.w3.org/2000/svg" class="chart_content" viewBox="0 0 1000 150" preserveAspectRatio="none">
<path class="chart_line" d="M20,10 L100,80 L200,40 L280,30"></path>
<circle class="chart_circle" cx="20" cy="10" r="5"></circle>
<circle class="chart_circle" cx="100" cy="80" r="5"></circle>
<circle class="chart_circle" cx="200" cy="40" r="5"></circle>
<circle class="chart_circle" cx="280" cy="30" r="5"></circle>
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment