I’m currently working on a React Native application where I’m integrating charts to visualize data. For charting capabilities, I’ve chosen to use the react-native-gifted-charts library.

this is my code:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { BarChart } from "react-native-gifted-charts";

const CombinedChart = () => {
    const data = [
        { value: 0.5 }, { value: 0.8 }, { value: 0.9 }, { value: 0.7 },
        { value: 1 }, { value: 0.9 }, { value: 1 }, { value: 1 }
    ];

    const secondaryYAxisConfig = {
        maxValue: 1,
        noOfSections: 10,
        showFractionalValues: true,
        roundToDigits: 0,
        yAxisLabelTexts: Array.from({ length: 10 }, (_, i) => `${(i + 1) * 10}%`), // Start from 10%
    };

    return (
        <View style={styles.container}>
            <BarChart
                barWidth={20}
                spacing={5}
                data={data}
                showLine
                maxValue={1}
                yAxisLabelSuffix="€"
                secondaryLineConfig={{ color: 'blue' }}
                secondaryYAxis={secondaryYAxisConfig}
                style={styles.chart}
                showFractionalValues={true}
                lineConfig={{
                    color: '#F29C6E',
                    thickness: 3,
                    hideDataPoints: true,
                }}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        width: 300,
        height: 300,
        justifyContent: 'center',
        alignItems: 'center',
    },
    chart: {
        // flex: 1,
        // width: 100,
        // height: 100,
    },
});

export default CombinedChart;

This code snippet demonstrates the configuration of a bar chart using the react-native-gifted-charts library. It includes sample data, styling, and configuration options for the primary and secondary y-axes. The chart is rendered within a container with specified dimensions for display within a React Native application.

I’m striving to achieve a specific design for my project, but it’s quite different from what I have currently implemented. I’m seeking advice on how to align my current implementation with the desired design. Specifically, I’m looking to achieve the following:

1. Is there a way to identify a specific data point within the graph like current point which can be shown on the grapgh?
2. Can I configure the secondary Y-axis to start from 0% – as you cans see it starts with 0?
3. Additionally, I want to ensure that the line graph closely matches
   the design specifications.
4. as you can see the line for the last two items are not being set correctly how can I fix that?

I would greatly appreciate any guidance or assistance in achieving these goals. Thank you!