Skip to content

C
c3-closed
Commit c4914d3d authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Update sample for padding

parent d3c00681
Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 8 deletions
htdocs/samples/padding.html
View file @ c4914d3d
......@@ -4,23 +4,139 @@
<style type="text/css">
<!--
.c3 svg {
font-size: 13px;
/* font-size: 13px;*/
}
-->
</style>
</head>
<body>
<div id="chart"></div>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart1',
padding: {
top: 50,
right: 200,
bottom: 50,
left: 200,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
}
});
var chart = c3.generate({
bindto: '#chart2',
padding: {
top: 50,
right: 200,
bottom: 50,
left: 200,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
},
legend: {
position: 'right'
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
}
});
var chart = c3.generate({
bindto: '#chart3',
padding: {
top: 50,
right: 200,
bottom: 50,
left: 200,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
},
subchart: {
show: true
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
}
});
var chart = c3.generate({
bindto: '#chart',
bindto: '#chart4',
padding: {
top: 20,
// left: 60
bottom: 20
top: 50,
right: 200,
bottom: 50,
left: 200,
},
data: {
columns: [
......@@ -32,10 +148,10 @@
},
},
legend: {
// position: 'right'
position: 'right'
},
subchart: {
// show: true
show: true
},
axis: {
rotated: true,
......@@ -54,6 +170,7 @@
}
}
});
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment