Skip to content

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

Enable y axis padding as ratio - #251

parent dcd707f9
Show whitespace changes
Inline Side-by-side
Showing with 71 additions and 4 deletions
c3.js
View file @ 5988709d
......@@ -1133,6 +1133,11 @@
//-- Domain --//
function getAxisPadding(padding, key, defaultValue, all) {
var ratio = padding.unit === 'ratio' ? all : 1;
return isValue(padding[key]) ? padding[key] * ratio : defaultValue;
}
function getYDomainMin(targets) {
var ids = mapToIds(targets), ys = getValuesAsIdKeyed(targets), j, k, baseId, idsInGroup, id, hasNegativeValue;
if (__data_groups.length > 0) {
......@@ -1223,12 +1228,12 @@
padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
}
if (axisId === 'y' && __axis_y_padding) {
padding_top = isValue(__axis_y_padding.top) ? __axis_y_padding.top : padding;
padding_bottom = isValue(__axis_y_padding.bottom) ? __axis_y_padding.bottom : padding;
padding_top = getAxisPadding(__axis_y_padding, 'top', padding, domainLength);
padding_bottom = getAxisPadding(__axis_y_padding, 'bottom', padding, domainLength);
}
if (axisId === 'y2' && __axis_y2_padding) {
padding_top = isValue(__axis_y2_padding.top) ? __axis_y2_padding.top : padding;
padding_bottom = isValue(__axis_y2_padding.bottom) ? __axis_y2_padding.bottom : padding;
padding_top = getAxisPadding(__axis_y2_padding, 'top', padding, domainLength);
padding_bottom = getAxisPadding(__axis_y2_padding, 'bottom', padding, domainLength);
}
// Bar chart with only positive values should be 0-based
if (hasBarType(yTargets) && !hasNegativeValueInTargets(yTargets)) {
......
c3.min.js
View file @ 5988709d
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/samples/axes_padding.html 0 → 100644
View file @ 5988709d
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 300, 2000, 1000, 4000, 1500, 2500],
],
axes: {
data2: 'y2'
}
},
axis: {
y: {
padding: {
top: 0.1,
bottom: 0.1,
unit: 'ratio'
}
},
y2: {
show: true,
padding: {
top: 200,
bottom: 200,
}
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', 3000, 20000, 10000, 40000, 15000, 25000],
],
},
axis: {
y: {
padding: {
top: 0.1,
bottom: 0.1,
unit: 'ratio'
}
}
}
});
</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