Code Monkey home page Code Monkey logo

Comments (2)

Abhinandan-Kushwaha avatar Abhinandan-Kushwaha commented on June 30, 2024

Hi @ashishkanhasoft 👋
Thanks for pointing this out.

You can achieve the requested behaviour without using the pointerConfig.
Instead, use the following props-

  1. focusEnabled
  2. showStripOnFocus
  3. showDataPointLabelOnFocus (this prop has been added in version 1.4.11)

Here's an example-

const App = () => {
  const customTooltip = (value: number) => {
    return (
      <View
        style={{
          padding: 6,
          borderWidth: 1,
          borderColor: 'lightgray',
          backgroundColor: 'white',
          borderRadius: 8,
          marginTop: -44,
          marginLeft: -26,
        }}>
        <Text style={{color: 'gray', fontSize: 8, textAlign: 'center'}}>
          Date here
        </Text>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: 90,
            marginTop: 10,
          }}>
          <View
            style={{
              height: 10,
              width: 10,
              borderRadius: 5,
              backgroundColor: 'brown',
            }}
          />
          <Text style={{fontSize: 10, fontWeight: 'bold'}}>
            {(value + 0.1).toFixed(1)}
          </Text>
          <Text style={{fontSize: 10, fontWeight: 'bold'}}>
            {value.toFixed(2)}
          </Text>
        </View>
      </View>
    );
  };

  const values = [
    {value: 0},
    {value: 2},
    {value: 1.8},
    {value: 1.7},
    {value: 3},
    {value: 3.2},
    {value: 2},
    {value: 1.8},
    {value: 1.7},
    {value: 3},
  ];
  const data = values.map(item => ({
    ...item,
    dataPointLabelComponent: () => customTooltip(item.value),
  }));

  return (
    <LineChart
      data={data}
      color="skyblue"
      dataPointsColor="brown"
      noOfSections={4}
      maxValue={4}
      focusEnabled
      showStripOnFocus
      showDataPointLabelOnFocus
    />
  );
};

The output of the above code is-

focusEnabled

Please use the latest version of the library.

from react-native-gifted-charts.

ashishkanhasoft avatar ashishkanhasoft commented on June 30, 2024

@Abhinandan-Kushwaha Thanks, It's working fine in a single-line chart, I want this multiline-chart, I am using pointerConfig to show a label tooltip like this,

Screen.Recording.2024-06-25.at.2.27.11.PM.mov

I have implemented your code in my multiline chart so horizontal scrolling all things works perfectly but here multilabel shows like this,

Screen.Recording.2024-06-25.at.1.19.59.PM.mov 
<LineChart
            areaChart
            showFractionalValues={maxValue % 1 != 0}
            yAxisLabelTexts={
                // TODO: if maxValue is less then equal to 1 then its calculated
                getYaxisLabels(maxValue, 10)
            }

            hideRules
            verticalLinesColor={'#878787'}
            verticalLinesThickness={1}
            verticalLinesSpacing={50}
            // focusEnabled
            // showStripOnFocus
            // showDataPointLabelOnFocus
            // showVerticalLines
            data={lineChart_1_New?.length > 0 ? lineChart_1_New : fakeData}
            data2={lineChart_2_New}
            data3={lineChart_3_New}
            data4={lineChart_4_New}
            data5={lineChart_5_New}
            color1={lineChart_1_New?.length > 0 ? color1 : 'transparent'}
            color2={color2}
            color3={color3}
            color4={color4}
            color5={color5}
            width={screen_width}
            height={200}
            spacing={70}
            thickness={2}
            dashGap={10}
            dashWidth={8}
            startOpacity={0}
            endOpacity={0}
            initialSpacing={40}
            endSpacing={100}
            noOfSections={4}
            onlyPositive
            maxValue={400}
            yAxisThickness={0}
            rulesColor="gray"
            xAxisColor="lightgray"
            yAxisTextStyle={{ fontSize: 10, color: '#7C8DB5', display: 'none' }}
            yAxisLabelWidth={10}
            xAxisLabelTextStyle={{ width: 80, height: 40, paddingTop: 10, fontSize: 10, color: '#7C8DB5' }}
            xAxisThickness={0}
            adjustToWidth
            pointerConfig={{
                pointerStripHeight: 120,
                pointerStripColor: 'black',
                pointerStripWidth: 2,
                pointerColor: "transparent",
                radius: 6,
                pointerLabelWidth: 100,
                pointerLabelHeight: 90,
                activatePointersOnLongPress: true,
                autoAdjustPointerLabelPosition: false,
                stripOverPointer: true,
                pointerVanishDelay: 3000,
                initialPointerAppearDelay: 5,
                activatePointersDelay: 150,
                pointerEvents: 'auto',
                showPointerStrip:
                    lineChart_1_New?.length > 0
                        || lineChart_2_New?.length > 0
                        || lineChart_3_New?.length > 0
                        || lineChart_4_New?.length > 0
                        || lineChart_5_New?.length > 0
                        ? true : false,
                pointerLabelComponent: items => {
                    return pointerComponentCustom(items);
                },
            }}
        />

So what I need to improve is the same label as per the first video can you please help me out, Thank you in Advance.

from react-native-gifted-charts.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.