Export react-native-charts-wrapper to PNG

Question

I'm working on a react native application where I want to show data in the chart and then export the chart to PNG or Base64 image. I'm using react-native-charts-wrapper library where I'm able to show the data in charts but not in able to convert it to base64 or png. below is my code:

export default class App extends React.Component {

constructor() {
super();

this.state = {
  legend: {
    enabled: true,
    textSize: 14,
    form: 'SQUARE',
    formSize: 14,
    xEntrySpace: 10,
    yEntrySpace: 5,
    formToTextSpace: 5,
    wordWrapEnabled: true,
    maxSizePercent: 0.5
  },
  data: {
    dataSets: [{
      values: [{y: 100}, {y: 105}, {y: 102}, {y: 110}, {y: 114}, {y: 
109}, {y: 105}, {y: 99}, {y: 120}],
      label: 'Bar dataSet',
      config: {
        color: processColor('pink'),
        drawBarShadow: true,
        barShadowColor: processColor('red'),
        highlightAlpha: 90,
        highlightColor: processColor('red'),
      }
    }],

    config: {
      barWidth: 0.7,
    }
  },
  highlights: [{x: 3}, {x: 6}],
  xAxis: {
    valueFormatter: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'oct'],
    granularityEnabled: true,
    position: 'BOTTOM',
    granularity : 1,
  },
  yAxis: {
    left:{axisMinimum: 10}}
};
 }

 handleSelect(event) {
let entry = event.nativeEvent
if (entry == null) {

  this.setState({...this.state, selectedEntry: null})
} else {
  this.setState({...this.state, selectedEntry: JSON.stringify(entry)})
}

console.log(event.nativeEvent)
}


 render() {
return (
  <View style={{flex: 1}}>

  <View style={{height:80}}>
    <Text> selected entry</Text>
    <Text> {this.state.selectedEntry}</Text>
  </View>


  <View style={styles.container}>
    <BarChart
      style={styles.chart}
      data={this.state.data}
      xAxis={this.state.xAxis}
      animation={{durationX: 2000}}
      legend={this.state.legend}
      gridBackgroundColor={processColor('#000000')}
      visibleRange={{x: { min: 5, max: 5 }}}
      drawBarShadow={false}
      drawValueAboveBar={true}
      drawHighlightArrow={true}
      onSelect={this.handleSelect.bind(this)}
      highlights={this.state.highlights}
      onChange={(event) => console.log(event.nativeEvent)}
    />
  </View>
</View>
);
}
   }

Is there any other library for the requirement or react-native-charts-wrapper inbuilt have any method to export it in base64.

Check with https://github.com/gre/react-native-view-shot library. It capture the View. — Asha, Nov 20 '18 at 11:47
@Asha Thanks for the quick response but my chart is scrollable so if I take the screenshot it will not full and always be the visible chart on the screen. — Mayank Shrivastava, Nov 20 '18 at 13:16
Did you try long short capture? https://github.com/gre/react-native-view-shot/issues/99 - — Asha, Nov 20 '18 at 13:26
@Asha I tried the above solution but my chart is not inside scrollview and its Barchart is itself scrollable as there are large data on x-axis and it's only capturing the bars available on the screen, not the remaining bars which are visible only on scrolling. — Mayank Shrivastava, Nov 21 '18 at 06:01

score 0 · Answer 1 · answered Oct 22 '20 at 14:09

It's never too late. https://echarts.apache.org/en/api.html#echartsInstance.getConnectedDataURL You need to create new function in index.js (react-native-charts-wrapper/src/index.js) and add new case in jsBuilder, smth like this:

    function processMessage (e) {
        var req = parse(e.data)
        switch(req.types) {
          case "SET_OPTION":
            chart.setOption(req.payload.option, req.payload.notMerge,req.payload.lazyUpate);
            break;
          case "CLEAR":
            document.getElementById("tooltip").remove();
            chart.clear();
            break;
          case "SET_BACKGROUND_COLOR":
            setBackgroundColor(req.color);
            break;
          
          case "GET_CHART_URL" :      <--------------
            ...
                var src = chart.getConnectedDataURL({
                  pixelRatio: 2,
                  backgroundColor: '#fff',
                  excludeComponents:['dataZoom']
                });
            ...

              sendCallbackData(req.uuid,src);
              })
            break; 

          default:
            break;
        }
    }

Thats all.

score 0 · Answer 2 · answered Jan 06 '21 at 12:17

A step by step tutorial to set up a new project can be found

yarn add react-native-charts-wrapper

yarn add @babel/runtime

working in both device android as well iOS

https://youtu.be/47B3LwKfAGs

https://github.com/wuxudong/react-native-charts-wrapper/blob/master/installation_guide/README.md

    import React, { useState, useEffect } from 'react';
    import { View, StatusBar,Dimensions, Platform,processColor } from 'react-native';
    
    import { LineChart } from 'react-native-charts-wrapper';
    import styleLocal from './styles';
    import { TopHeader } from 'components/TopHeader';
    import useTheme from 'helpers/useCustomTheme';
    import useCustomColor from 'helpers/checkGlobalColors';
    import colors from '../../constants/colors';
    import { Colors } from 'react-native/Libraries/NewAppScreen';
    
    type Props = {
        navigation: NavigationScreenProp,
    };
    let style = useTheme(styleLocal);
    
    
    const greenBlue = 'rgb(26, 182, 151)';
    const petrel = 'rgb(59, 145, 153)';
    
    const ChartsScreen = (props: Props) => {
    
        return (
            <View style={{ flex: 1, margin: 10 }}>
                {Platform.OS === 'ios' && <StatusBar barStyle="dark-content" />}
    
                <TopHeader
                    onLeftBtnPress={() => this.props.navigation.navigate('Mina_avier')}
                    isBlack
                // hideBackBtn
                />
                <View style={style.container}>
                <LineChart style={style.chart}
              // data={{ dataSets: [{ label: "AVY DEMO", values: [{ y: 1 }, { y: 2 }, { y: 1.5 }, { y: 1 }, { y: 3 }, { y: 1 }, { y: 2 }, { y: 5 }] }] }}
              // data={{ dataSets: [{ label: "AVY DEMO", values: [{ y: 1 }, { y: 2 }, { y: 1 }] }] }}
              // data={{ dataSets: [{ label: "AVY DEMO", values: [{ y: 1 }, { y: 2 }, { y: 1 }]
              data={{ dataSets: [{ label: "AVY DEMO",  values: [39.758, 81.453, 72.588, 200.137, 36.808, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]                  
                        ,config: {
                            // labels: ['9/19', '9/20', '9/21', '9/22', '9/23', '9/24', '9/25'],
                            // mode: 'CUBIC_BEZIER',
                            mode: 'CUBIC_BEZIER',
                            drawValues: false,
                            lineWidth: 2,
                            drawCircles: true,
                            circleColor: processColor(petrel),
                            drawCircleHole: false,
                            circleRadius: 5,
                            highlightColor: processColor('transparent'),
                            color: processColor(petrel),
                            drawFilled: true,
                            fillGradient: {
                                colors: [processColor(petrel), processColor(greenBlue)],
                                positions: [0, 0.5],
                                angle: 90,
                                orientation: 'TOP_BOTTOM',
                                position: 'OUTSIDE_CHART'
                            },
                            fillAlpha: 1000,
                            valueTextSize: 15,
                            // xValuePosition: 'INSIDE_SLICE', // INSIDE_SLICE,OUTSIDE_SLICE
                    // yValuePosition: 'INSIDE_SLICE' // INSIDE_SLICE,OUTSIDE_SLICE
                        },
                    }               
                ]
                }}
            
              // data={{ dataSets: [{ label: "AVY DEMO",  values: [25.3687, 20.9214, 25.856, 21.941111, 25.4857, 25.7556, 13.27125, 14.224666, 13.4993, 22.6275, 21.299444, 29.4592, 22.0446, 19.628222, 24.9856, 20.738875, 44.9617, 25.565333, 25.5194, 22.664333, 19.9573, 13.3966, 28.640777, 30.9701, 21.636333, 19.072333, 19.196125, 18.4592, 19.7976, 20.695, 25.495777]    }]}}
              //  data={{ dataSets: [{ label: "AVY DEMO",  values: [
              //    {x: 5, y: 90},
              //    {x: 10, y: 130},
              //    {x: 50, y: 2000, marker: "eat more"},
              //    {x: 80, y: 9000, marker: "eat less"}
              // ] }]}}
              
              
            />
    
    
                    
                </View>
            </View>
        );
    };
    
    export default ChartsScreen;


export default (colors) => ({
    container: {
    flex: 1,
    backgroundColor: '#F5FCFF'
  },
  chart: {
        flex: 1,
        color: "#286768"
  }
});

IN iOS configuration :- https://youtu.be/47B3LwKfAGs – Keshav Gera Jan 07 '21 at 05:15 — Keshav Gera, Jan 07 '21 at 05:15

Export react-native-charts-wrapper to PNG

2 Answers2