diff --git a/examples/area-chart/App.js b/examples/area-chart/App.js index a00c91f..d4ef20c 100644 --- a/examples/area-chart/App.js +++ b/examples/area-chart/App.js @@ -437,7 +437,8 @@ class AreaChartContainer extends PureComponent {
- The axes can be turned on by simply passing a boolean flag to true for axes. + The axes can be turned on by simply passing a boolean flag to true for axes + or an object with both a x and y visibility boolean.
@@ -482,6 +483,90 @@ class AreaChartContainer extends PureComponent {
]}
/>
+
+ {(() => {
+ const html = (`
+ `);
+ return (
+
+ );
+ })()}
+
+
+
+
+
+ {(() => {
+ const html = (`
+ `);
+ return (
+
+ );
+ })()}
+
+
+
+
diff --git a/examples/bar-chart/App.js b/examples/bar-chart/App.js
index 0971ec8..bf064f9 100644
--- a/examples/bar-chart/App.js
+++ b/examples/bar-chart/App.js
@@ -586,7 +586,8 @@ export default class BarChartContainer extends PureComponent {
Axes
- The axes can be turned on by simply passing a boolean flag to true for axes.
+ The axes can be turned on by simply passing a boolean flag to true for axes
+ or an object with both a x and y visibility boolean.
@@ -620,6 +621,51 @@ export default class BarChartContainer extends PureComponent {
data={this.defaultData}
/>
+
+ {(() => {
+ const html = (`
+ `);
+ return (
+
+ );
+ })()}
+
+
+
+
+
+
+ {(() => {
+ const html = (`
+ `);
+ return (
+
+ );
+ })()}
+
+
+
+
diff --git a/examples/line-chart/app.js b/examples/line-chart/app.js
index 4248c4b..13b2e8b 100644
--- a/examples/line-chart/app.js
+++ b/examples/line-chart/app.js
@@ -430,7 +430,8 @@ class LineChartContainer extends PureComponent {
Axes
- The axes can be turned on by simply passing a boolean flag to true for axes.
+ The axes can be turned on by simply passing a boolean flag to true for axes
+ or an object with both a x and y visibility boolean.
@@ -475,6 +476,91 @@ class LineChartContainer extends PureComponent {
]}
/>
+
+
+ {(() => {
+ const html = (`
+ `);
+ return (
+
+ );
+ })()}
+
+
+
+
+
+ {(() => {
+ const html = (`
+ `);
+ return (
+
+ );
+ })()}
+
+
+
+
diff --git a/examples/scatterplot-chart/App.js b/examples/scatterplot-chart/App.js
index 7bfe4ad..3cbca84 100644
--- a/examples/scatterplot-chart/App.js
+++ b/examples/scatterplot-chart/App.js
@@ -594,8 +594,8 @@ export default class ScatterplotContainer extends PureComponent {
Axes
- The axes can be turned on by simply passing a boolean flag to true for
- axes.
+ The axes can be turned on by simply passing a boolean flag to true for axes
+ or an object with both a x and y visibility boolean.
@@ -614,6 +614,49 @@ export default class ScatterplotContainer extends PureComponent {
+
+
+ {(() => {
+ const html = (`
+ `);
+ return (
+
+ );
+ })()}
+
+
+
+
+
+ {(() => {
+ const html = (`
+ `);
+ return (
+
+ );
+ })()}
+
+
+
+
diff --git a/modules/area-chart/index.js b/modules/area-chart/index.js
index 75adf38..98fe9da 100644
--- a/modules/area-chart/index.js
+++ b/modules/area-chart/index.js
@@ -40,7 +40,13 @@ export default class AreaChart extends PureComponent {
interpolate: PropTypes.string,
style: PropTypes.object,
margin: PropTypes.object,
- axes: PropTypes.bool,
+ axes: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.shape({
+ x: PropTypes.bool,
+ y: PropTypes.bool
+ })
+ ]),
grid: PropTypes.bool,
verticalGrid: PropTypes.bool,
xDomainRange: PropTypes.array,
@@ -464,13 +470,15 @@ export default class AreaChart extends PureComponent {
noAreaGradient
} = this.props;
+ const hasXAxes = axes === true || axes.x;
+ const hasYAxes = axes === true || axes.y;
+
const hasFill = !noAreaGradient;
const p = this.calculateChartParameters();
if (axes) {
- this.createXAxis(p);
-
- this.createYAxis(p);
+ if (hasXAxes) this.createXAxis(p);
+ if (hasYAxes) this.createYAxis(p);
}
if (hasFill) {
diff --git a/modules/bar-chart/index.js b/modules/bar-chart/index.js
index 0c392bd..09a59e2 100644
--- a/modules/bar-chart/index.js
+++ b/modules/bar-chart/index.js
@@ -52,7 +52,13 @@ export default class BarChart extends PureComponent {
interpolate: PropTypes.string,
style: PropTypes.object,
colorBars: PropTypes.bool,
- axes: PropTypes.bool,
+ axes: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.shape({
+ x: PropTypes.bool,
+ y: PropTypes.bool
+ })
+ ]),
grid: PropTypes.bool,
axisLabels: PropTypes.shape({
x: PropTypes.string,
@@ -463,7 +469,7 @@ export default class BarChart extends PureComponent {
yDomainRange,
margin,
width,
- height
+ height,
} = this.props;
const hasLineData = this.hasLineData();
@@ -489,16 +495,19 @@ export default class BarChart extends PureComponent {
render() {
const {
- axes
+ axes,
} = this.props;
const hasLineData = this.hasLineData();
const p = this.calculateChartParameters();
+ const hasXAxes = axes === true || axes.x;
+ const hasYAxes = axes === true || axes.y;
+
if (axes) {
- this.createXAxis(p);
+ if (hasXAxes) this.createXAxis(p);
- this.createYAxis(p); // const yAxis = this.createYAxis(p);
+ if (hasYAxes) this.createYAxis(p); // const yAxis = this.createYAxis(p);
if (hasLineData) {
this.createYAxis2(p); // { ...p, yAxis });
diff --git a/modules/line-chart/index.js b/modules/line-chart/index.js
index d263456..5fcda75 100644
--- a/modules/line-chart/index.js
+++ b/modules/line-chart/index.js
@@ -41,7 +41,13 @@ export default class LineChart extends React.Component {
interpolate: PropTypes.string,
style: PropTypes.object,
margin: PropTypes.object,
- axes: PropTypes.bool,
+ axes: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.shape({
+ x: PropTypes.bool,
+ y: PropTypes.bool
+ })
+ ]),
grid: PropTypes.bool,
verticalGrid: PropTypes.bool,
xDomainRange: PropTypes.array,
@@ -356,7 +362,7 @@ export default class LineChart extends React.Component {
width,
height,
lineColors,
- yAxisOrientRight
+ yAxisOrientRight,
} = this.props;
/*
@@ -405,10 +411,12 @@ export default class LineChart extends React.Component {
const p = this.calculateChartParameters();
- if (axes) {
- this.createXAxis(p);
+ const hasXAxes = axes === true || axes.x;
+ const hasYAxes = axes === true || axes.y;
- this.createYAxis(p);
+ if (axes) {
+ if (hasXAxes) this.createXAxis(p);
+ if (hasYAxes) this.createYAxis(p);
}
this.createLinePathChart(p);
diff --git a/modules/scatterplot-chart/hybrid/index.js b/modules/scatterplot-chart/hybrid/index.js
index 76abf3f..9a69722 100644
--- a/modules/scatterplot-chart/hybrid/index.js
+++ b/modules/scatterplot-chart/hybrid/index.js
@@ -40,7 +40,13 @@ const axisMargin = 18;
export default class ScatterplotChart extends PureComponent {
static get propTypes() {
return {
- axes: PropTypes.bool,
+ axes: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.shape({
+ x: PropTypes.bool,
+ y: PropTypes.bool
+ })
+ ]),
axisLabels: PropTypes.shape({
x: PropTypes.string,
y: PropTypes.string
@@ -685,12 +691,14 @@ export default class ScatterplotChart extends PureComponent {
axes
} = this.props;
+ const hasXAxes = axes === true || axes.x;
+ const hasYAxes = axes === true || axes.y;
+
const p = this.calculateChartParameters();
if (axes) {
- this.createXAxis(p);
-
- this.createYAxis(p);
+ if (hasXAxes) this.createXAxis(p);
+ if (hasYAxes) this.createYAxis(p);
}
this.createScatterplotChart(p);
diff --git a/modules/shared.js b/modules/shared.js
index 20f20cc..ba446c7 100644
--- a/modules/shared.js
+++ b/modules/shared.js
@@ -162,16 +162,28 @@ export function createUniqueID(o) {
return hash(o);
}
-export function calculateMargin(axes, margin, yAxisOrientRight, y2) {
+export function calculateMargin(
+ axes,
+ margin,
+ yAxisOrientRight,
+ y2) {
if (margin) return margin;
+ const hasXAxes = axes === true || axes.x;
+ const hasYAxes = axes === true || axes.y;
if (yAxisOrientRight) {
- return (axes)
- ? { top: 20, right: 50, bottom: 50, left: (y2) ? 50 : 20 }
- : { top: 0, right: 0, bottom: 0, left: 0 };
+ return (hasXAxes || hasYAxes)
+ ? { top: 20,
+ right: hasXAxes ? 50 : 20,
+ bottom: hasYAxes ? 50 : 20,
+ left: (y2) ? 50 : 20 }
+ : { top: 0, right: 0, bottom: 0, left: 0 };
}
- return (axes)
- ? { top: 20, right: (y2) ? 50 : 20, bottom: 50, left: 50 }
- : { top: 0, right: 0, bottom: 0, left: 0 };
+ return (hasXAxes || hasYAxes)
+ ? { top: 20,
+ right: (y2) ? 50 : 20,
+ bottom: hasXAxes ? 50 : 20,
+ left: hasYAxes ? 50 : 20 }
+ : { top: 0, right: 0, bottom: 0, left: 0 };
}
/* eslint no-shadow: 0 */