diff --git a/README.md b/README.md index 60ce098f..af368b0a 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 | @@ -198,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 | @@ -232,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 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({