Layered BarChart and LineChart out of alignment

[purplegamba]

What is the problem?

Layered BarChart and LineChart do not line up horizontally because the x coordinates are different to account for the width of the bars. This is probably not exactly a bug, but it does present a serious problem for me. I am attempting to create a complex chart with multiple layered charts. My data is an array, where each entry has a date, and a variety of other values. The dates are used for the x-axis, and the other values are displayed on various LineCharts, BarCharts, or used in creating decorators or other visuals on the charts. I need them to line up perfectly so that data for a given date is visually correlated.

ETA: I have added code and a screenshot. I didn't use dates in this example, just x and y values where x is used for the LineChart and y for the BarChart. Ideally, the points and gridlines of the LineChart would be centered inside the corresponding bar of the BarChart.

When does it happen?

Anytime a BarChart and LineChart using the same x data are layered.

What platform?

• [ x ] iOS
• [ x ] Android

React Native version: 0.59 react-native-svg-charts-version: 5.3.0

Code to reproduce

// put code here
import React from 'react';                                                                                               
import { XAxis, BarChart, LineChart, Grid } from 'react-native-svg-charts'
import * as shape from 'd3-shape'
import {G, Line} from "react-native-svg";
import { StyleSheet, Text, View } from 'react-native';
import moment from 'moment'; 

export default function App() {
   const inset = 20;

   const testdata = [
      { x: 23, y: 4 },
      { x: 49, y: 2 },
      { x: 41, y: 3 },
      { x: 75, y: 2 },
   ];

   const CustomGrid = ( { x, y, data, ticks } ) => (
      <G>
         {
            // Vertical grid
            data.map( ( _, index ) => (
               <Line
                  key={ index }
                  y1={ '0%' }
                  y2={ '100%' }
                  x1={ x( index ) }
                  x2={ x( index ) }
                  stroke={ 'rgba(0,0,0,0.4)' }
               />
            ))
         }
      </G>
   );

   return (
      <View style={ styles.container }>
         <View style={ { height: 300, width: 300 } } >
            <BarChart
               style= { { flexGrow: 1, borderWidth: 2, borderColor: 'black'} }
               data={ testdata }
               yAccessor = { ({ item } ) => item.y }
               contentInset={ { top: inset, bottom: inset, left: inset, right: inset }}
               yMin = { 0 }
               yMax = { 4 }
               svg={ { fill: 'pink' } }
            >
            </BarChart>
            <LineChart
               style= { [ { flex: 1, backgroundColor: 'transparent', borderWidth: 2 }, StyleSheet.absoluteFill ] }
               data={ testdata }
               yAccessor = { ({ item } ) => item.x }
               contentInset={ { top: inset, bottom: inset, left: inset, right: inset }}
               svg={{ stroke: 'blue', strokeWidth: 3 }}
            >
               <CustomGrid />
            </LineChart>
         </View>
         <XAxis
            style={{ height: 30, marginHorizontal: 2, width: 300, backgroundColor: 'cyan', paddingTop: 5 }}
            data={testdata}
            formatLabel={(value, index) => index }
            contentInset={{ left: inset, right: inset }}
            svg={{ fontSize: 18, fill: 'black' }}
         />
      </View>
   );
}

const styles = StyleSheet.create({
   container: {
      flex: 1,
      backgroundColor: '#fff',                                                                                           
      alignItems: 'center',
      justifyContent: 'center',
   },
});

[usrbowe]

@purplegamba Thanks for reporting the issue. Can you provide with reproducible code, so we can take a look at this. Thanks

[purplegamba]

@purplegamba Thanks for reporting the issue. Can you provide with reproducible code, so we can take a look at this. Thanks

I've added code and a screenshot above. This is my first time reporting an issue and providing code, so if I haven't done it correctly please let me know.

[usrbowe]

@purplegamba no worries, you did it correct, this code is good enough for reproducing :). I'll look into this soon.