From 0efd0f321c56c64bffe68691c0a9977a72173c9a Mon Sep 17 00:00:00 2001 From: Diogo Perillo Date: Wed, 17 Jul 2019 14:11:25 -0600 Subject: [PATCH 1/2] Hide Horizontal and Vertical Labels --- README.md | 2 ++ src/bar-chart.js | 21 ++++++++++++++++----- src/line-chart.js | 14 ++++++++++---- src/stackedbar-chart.js | 21 ++++++++++++++++----- 4 files changed, 44 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 60ce098f..df4263ff 100644 --- a/README.md +++ b/README.md @@ -122,6 +122,8 @@ const data = { | withShadow | boolean | Show shadow for line - default: True | | withInnerLines | boolean | Show inner dashed lines - default: True | | withOuterLines | boolean | Show outer dashed lines - default: True | +| withVerticalLabels | boolean | Show vertical labels - default: True | +| withHorizontalLabels | boolean | Show horizontal labels - default: True | | fromZero | boolean | Render charts from 0 not from the minimum value. - default: False | | yAxisLabel | string | Prepend text to horizontal labels -- default: '' | | chartConfig | Object | Configuration object for the chart, see example config object above | diff --git a/src/bar-chart.js b/src/bar-chart.js index b1111aa4..23fe993d 100644 --- a/src/bar-chart.js +++ b/src/bar-chart.js @@ -57,7 +57,14 @@ class BarChart extends AbstractChart { render() { const paddingTop = 16 const paddingRight = 64 - const {width, height, data, style = {}} = this.props + const { + width, + height, + data, + style = {}, + withHorizontalLabels = true, + withVerticalLabels = true, + } = this.props const {borderRadius = 0} = style const config = { width, @@ -85,22 +92,26 @@ class BarChart extends AbstractChart { })} - {this.renderHorizontalLabels({ + {withHorizontalLabels + ? this.renderHorizontalLabels({ ...config, count: 4, data: data.datasets[0].data, paddingTop, paddingRight - })} + }) + : null} - {this.renderVerticalLabels({ + {withVerticalLabels + ? this.renderVerticalLabels({ ...config, labels: data.labels, paddingRight, paddingTop, horizontalOffset: barWidth - })} + }) + : null} {this.renderBars({ diff --git a/src/line-chart.js b/src/line-chart.js index 6ff4c8aa..7795bf3e 100644 --- a/src/line-chart.js +++ b/src/line-chart.js @@ -222,6 +222,8 @@ class LineChart extends AbstractChart { withDots = true, withInnerLines = true, withOuterLines = true, + withHorizontalLabels = true, + withVerticalLabels = true, style = {}, decorator, onDataPointClick @@ -265,13 +267,15 @@ class LineChart extends AbstractChart { : null} - {this.renderHorizontalLabels({ + {withHorizontalLabels + ? this.renderHorizontalLabels({ ...config, count: Math.min(...datas) === Math.max(...datas) ? 1 : 4, data: datas, paddingTop, paddingRight - })} + }) + : null} {withInnerLines @@ -290,12 +294,14 @@ class LineChart extends AbstractChart { : null} - {this.renderVerticalLabels({ + {withVerticalLabels + ? this.renderVerticalLabels({ ...config, labels, paddingRight, paddingTop - })} + }) + : null} {this.renderLine({ diff --git a/src/stackedbar-chart.js b/src/stackedbar-chart.js index 86a5f66a..974a34b6 100644 --- a/src/stackedbar-chart.js +++ b/src/stackedbar-chart.js @@ -89,7 +89,14 @@ class StackedBarChart extends AbstractChart { render() { const paddingTop = 15 const paddingRight = 50 - const {width, height, style = {}, data} = this.props + const { + width, + height, + style = {}, + data, + withHorizontalLabels = true, + withVerticalLabels = true, + } = this.props const {borderRadius = 0} = style const config = { width, @@ -125,23 +132,27 @@ class StackedBarChart extends AbstractChart { })} - {this.renderHorizontalLabels({ + {withHorizontalLabels + ? this.renderHorizontalLabels({ ...config, count: 4, data: [0, border], paddingTop, paddingRight - })} + }) + : null} - {this.renderVerticalLabels({ + {withVerticalLabels + ? this.renderVerticalLabels({ ...config, labels: data.labels, paddingRight: paddingRight + 28, stackedBar: true, paddingTop, horizontalOffset: barWidth - })} + }) + : null} {this.renderBars({ From 632943d60f9b94f90dd15f7b4627148b2193907f Mon Sep 17 00:00:00 2001 From: Herman Starikov Date: Thu, 18 Jul 2019 18:15:06 -0400 Subject: [PATCH 2/2] improve docs --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index df4263ff..af368b0a 100644 --- a/README.md +++ b/README.md @@ -200,6 +200,8 @@ const data = { | data | Object | Data for the chart - see example above | | width | Number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive | | height | Number | Height of the chart | +| withVerticalLabels | boolean | Show vertical labels - default: True | +| withHorizontalLabels | boolean | Show horizontal labels - default: True | | fromZero | boolean | Render charts from 0 not from the minimum value. - default: False | | yAxisLabel | string | Prepend text to horizontal labels -- default: '' | | chartConfig | Object | Configuration object for the chart, see example config in the beginning of this file | @@ -234,6 +236,8 @@ const data ={ | data | Object | Data for the chart - see example above | | width | Number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive | | height | Number | Height of the chart | +| withVerticalLabels | boolean | Show vertical labels - default: True | +| withHorizontalLabels | boolean | Show horizontal labels - default: True | | chartConfig | Object | Configuration object for the chart, see example config in the beginning of this file | ## Pie chart