Custom bar chart msb

examples/pure-chart/common.js

@@ -219,10 +219,9 @@ export const getGuideArray = (max, height, numberOfPoints = 5) => {
   }
 
   for (let i = 1; i < numberOfPoints + 1; i++) {
-    let v = x / numberOfPoints * i
+    let v = (x / numberOfPoints * (i/2.5 ))
     arr.push([v + postfix, v * temp / max * height, 1 * temp / max * height])
   }
-
   return arr
 }
 
@@ -335,18 +334,18 @@ export const drawXAxisLabels = (sortedData, gap, color = '#000000', showEvenNumb
     <View style={{
       width: '100%',
       paddingVertical: 10,
-      height: 10
+      height: 10,
     }}>
       {sortedData.map((data, i) => {
         // if (data[3] && i % 2 === 1) {
-        if (data['x'] && i % 2 === 1 || !showEvenNumberXaxisLabel) {
+        if (data['x']  || !showEvenNumberXaxisLabel) {
           return (
             <View key={'label' + i} style={{
               position: 'absolute',
               // left: data[0] - gap / 2,
-              left: data['gap'] - gap / 2,
-              width: gap,
-              alignItems: 'center'
+              left: data['gap']/1.135 - gap /3,
+              width: gap/1.5,
+              alignItems: 'center',
             }}>
               <Text style={{fontSize: 9, color: color}}>
                 {

examples/pure-chart/components/column-chart-item.js

@@ -13,11 +13,12 @@ export default class ColumnChartItem extends Component {
       }
       renders.push(
         <View key={seriesIndex} style={[styles.bar, {
-          width: this.props.defaultWidth / seriesCount,
+          width: this.props.defaultWidth / seriesCount/1.2,
           height: this.props.seriesArray[seriesIndex].data[this.props.dataIndex]['ratioY'],
           marginRight: lastElementMarginRight,
           backgroundColor: this.props.seriesArray[seriesIndex].seriesColor,
-          borderColor: this.props.isSelected ? this.props.highlightColor : this.props.defaultBorderColor
+          borderColor: this.props.isSelected ? this.props.highlightColor : this.props.defaultBorderColor,
+          borderRadius:1000,
         }]} />
       )
     }

examples/pure-chart/components/column-chart.js

@@ -2,10 +2,10 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Animated, ScrollView, Easing, Text } from 'react-native'
 import ColumnChartItem from './column-chart-item'
-import {initData, drawYAxis, drawYAxisLabels, drawGuideLine, numberWithCommas, drawXAxis, drawXAxisLabels} from '../common'
+import { initData, drawYAxis, drawYAxisLabels, drawGuideLine, numberWithCommas, drawXAxis, drawXAxisLabels } from '../common'
 
 export default class ColumnChart extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     let defaultGap = this.props.defaultColumnWidth + this.props.defaultColumnMargin
     let newState = initData(this.props.data, this.props.height, defaultGap, this.props.numberOfYAxisGuideLine)
@@ -25,7 +25,7 @@ export default class ColumnChart extends Component {
     this.drawTooltip = this.drawTooltip.bind(this)
   }
 
-  componentWillReceiveProps (nextProps) {
+  componentWillReceiveProps(nextProps) {
     if (nextProps.data !== this.props.data) {
       this.setState(Object.assign({
         fadeAnim: new Animated.Value(0)
@@ -35,27 +35,27 @@ export default class ColumnChart extends Component {
     }
   }
 
-  componentDidUpdate(nextProps, nextState){
-    if(this.scrollView != null && nextState.max == 0){
+  componentDidUpdate(nextProps, nextState) {
+    if (this.scrollView != null && nextState.max == 0) {
       setTimeout(
         () => this.scrollView.scrollTo(this.props.initialScrollPosition), this.props.initialScrollTimeOut
       )
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     Animated.timing(this.state.fadeAnim, {
       toValue: 1, easing: Easing.bounce, duration: 1000, useNativeDriver: true
     }).start()
-    if(this.scrollView != null){
+    if (this.scrollView != null) {
       setTimeout(
         () => this.scrollView.scrollTo(this.props.initialScrollPosition), this.props.initialScrollTimeOut
       )
     }
-    
+
   }
 
-  renderColumns (fadeAnim) {
+  renderColumns(fadeAnim) {
     let seriesArray = this.state.sortedData
     let seriesCount = seriesArray.length
     let renderColumns = []
@@ -78,15 +78,15 @@ export default class ColumnChart extends Component {
     }
     return (
       <Animated.View style={[styles.chartView, {
-        transform: [{scaleY: fadeAnim}],
+        transform: [{ scaleY: fadeAnim }],
         marginBottom: this.props.minValue && this.state.guideArray && this.state.guideArray.length > 0 ? -1 * this.state.guideArray[0][2] * this.props.minValue : null
       }]}>
         {renderColumns}
       </Animated.View>
     )
   }
 
-  handleClick (event, index) {
+  handleClick(event, index) {
     this.setState({
       selectedIndex: index
     }, () => {
@@ -95,7 +95,7 @@ export default class ColumnChart extends Component {
       }
     })
   }
-  drawTooltip (selectedIndex) {
+  drawTooltip(selectedIndex) {
     if (typeof (selectedIndex) === 'number' && selectedIndex >= 0) {
       let standardSeries = this.state.sortedData[0]
       if (!standardSeries) {
@@ -120,8 +120,8 @@ export default class ColumnChart extends Component {
           tooltipRenders.push(<Text key={'tooltipTitle-' + i} style={styles.tooltipTitle}>{series.data[selectedIndex]['x']}</Text>)
         }
         tooltipRenders.push(
-          <View key={'tooltipText-' + i} style={{flexDirection: 'row', paddingLeft: 5, alignItems: 'center'}}>
-            <View style={[styles.tooltipColor, {backgroundColor: !series.seriesColor ? this.props.primaryColor : series.seriesColor}]} />
+          <View key={'tooltipText-' + i} style={{ flexDirection: 'row', paddingLeft: 5, alignItems: 'center' }}>
+            <View style={[styles.tooltipColor, { backgroundColor: !series.seriesColor ? this.props.primaryColor : series.seriesColor }]} />
             <Text style={styles.tooltipValue}>{numberWithCommas(series.data[selectedIndex]['y'], false)}</Text>
           </View>
         )
@@ -138,15 +138,15 @@ export default class ColumnChart extends Component {
     }
   }
 
-  render () {
-    let {fadeAnim} = this.state
+  render() {
+    let { fadeAnim } = this.state
     if (this.state.sortedData && this.state.sortedData.length === 0) return null
 
     return (
       <View style={StyleSheet.flatten([styles.wrapper, {
-        backgroundColor: this.props.backgroundColor
+        backgroundColor: 'rgba(0,0,0,0)'
       }])}>
-        <View style={{paddingRight: 5}}>
+        <View style={{ paddingRight: 5 }}>
           {this.props.showYAxisLabel &&
             drawYAxisLabels(this.state.guideArray, this.props.height + 20, this.props.minValue, this.props.labelColor, this.props.yAxisSymbol)}
         </View>
@@ -181,7 +181,8 @@ const styles = StyleSheet.create({
     paddingBottom: 0,
     paddingLeft: 0,
     paddingRight: 0,
-    height: '100%'
+    height: '100%',
+    flexDirection: 'row'
   },
   chartContainer: {
     flexDirection: 'row',
@@ -211,8 +212,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     opacity: 0.8
   },
-  tooltipTitle: {fontSize: 10},
-  tooltipValue: {fontWeight: 'bold', fontSize: 15},
+  tooltipTitle: { fontSize: 10 },
+  tooltipValue: { fontWeight: 'bold', fontSize: 15 },
   tooltipColor: {
     width: 10,
     height: 5,
@@ -233,7 +234,7 @@ ColumnChart.defaultProps = {
   primaryColor: '#297AB1',
   highlightColor: 'red',
   showEvenNumberXaxisLabel: true,
-  initialScrollPosition: {x: 0, y: 0, animated: true},
+  initialScrollPosition: { x: 0, y: 0, animated: true },
   initialScrollTimeOut: 300,
   showYAxisLabel: true,
   showXAxisLabel: true,