feat(label): bar chart x axis size

adds prop to customize x axis font size
Tripwire · Mar 23, 2017 · 77cbd5b · 77cbd5b
1 parent 885c9b2
commit 77cbd5b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/components/charts/BarChart/BarChart.examples.md b/src/components/charts/BarChart/BarChart.examples.md
@@ -10,6 +10,7 @@ Standard Area AreaChart
        xDataType='date'
        showIcon
        showXLabel
+       XLabelFontSize='12'
        tooltipTitle='OPERATIONS'
       />
     </div>

diff --git a/src/components/charts/BarChart/BarChart.jsx b/src/components/charts/BarChart/BarChart.jsx
@@ -89,6 +89,7 @@ class BarChart extends React.Component {
               xDataType={xDataType}
               showXLabel={showXLabel}
               showIcon={showIcon}
+              XLabelFontSize={this.props.XLabelFontSize}
             />
             <ToolTip tooltip={this.state.tooltip} yScale={yScale} />
           </g>
@@ -108,7 +109,8 @@ BarChart.propTypes = {
   xDataType: string,
   showXLabel: bool,
   showIcon: bool,
-  tooltipTitle: string
+  tooltipTitle: string,
+  XLabelFontSize: string
 }
 
 BarChart.defaultProps = {
@@ -120,7 +122,8 @@ BarChart.defaultProps = {
   xDataType: 'month',
   showXLabel: false,
   showIcon: false,
-  tooltipTitle: ''
+  tooltipTitle: '',
+  XLabelFontSize: '16'
 }
 
 export default BarChart
diff --git a/src/components/charts/BarChart/Rect.jsx b/src/components/charts/BarChart/Rect.jsx
@@ -62,7 +62,7 @@ const Rect = (props) => {
         />
        : '' }
         { (props.showXLabel)
-        ? <text x={(xScale(d.x)) + (xScale.bandwidth() / 2)} key={`${i}-t`} width={xScale.bandwidth()} y={innerHeight + 13} fill={palette.grey} textAnchor='middle'>
+        ? <text fontSize={props.XLabelFontSize} x={(xScale(d.x)) + (xScale.bandwidth() / 2)} key={`${i}-t`} width={xScale.bandwidth()} y={innerHeight + 13} fill={palette.grey} textAnchor='middle'>
           {xDateLabel}
         </text>
       : '' }
@@ -88,14 +88,16 @@ Rect.propTypes = {
   xScale: func.isRequired,
   yScale: func.isRequired,
   showXLabel: React.PropTypes.bool,
-  showIcon: React.PropTypes.bool
+  showIcon: React.PropTypes.bool,
+  XLabelFontSize: string
 }
 
 Rect.defaultProps = {
   borderRadius: 3,
   fill: palette.blue,
   showXLabel: false,
-  showIcon: false
+  showIcon: false,
+  XLabelFontSize: '16'
 }
 
 export default Rect