Stock graph with a combined horizontal line at a specific price?

[afilp]

Thanks for your great library!

I am not sure if (how) this "combination" of a line chart with a "horizontal" line is possible:

Is this possible somehow with the library?

Thank you for any insights you can provide.

[marzolfb]

Yes, it is possible and its achieved by just combining text, line, and StockLine components in a single view. I took the example app included in this project, isolated the StockLine chart, gave it a shot:

            <View>
              <Text style={{position: 'absolute', top: 50,left: 200}}>Value $119.59</Text>
              <View style={{backgroundColor: '#0aaf24', position: 'absolute', top: 70,left: 0,width: 300,height: 2}} />
              <Text style={{position: 'absolute', top: 75,left: 200}}>Price $114.62</Text>
              <StockLine data={sampleData.stockLine.data} options={sampleData.stockLine.options} xKey='x' yKey='y' />
            </View>

and I tweaked the options data for the chart in data.js:

options: {
            width: 250,
            height: 250,
            color: '#2980B9',
            margin: {
                top: 10,
                left: 35,
                bottom: 30,
                right: 10
            },
            animate: {
                type: 'delayed',
                duration: 200
            },
            axisX: {
                showAxis: false,
                showLines: false,
                showLabels: false,
                showTicks: false,
                zeroAxis: false,
                orient: 'bottom',
                tickValues: [],
                label: {
                    fontFamily: 'Arial',
                    fontSize: 8,
                    fontWeight: true,
                    fill: '#34495E'
                }
            },
            axisY: {
                showAxis: true,
                showLines: false,
                showLabels: true,
                showTicks: false,
                zeroAxis: false,
                orient: 'left',
                tickValues: [],
                label: {
                    fontFamily: 'Arial',
                    fontSize: 8,
                    fontWeight: true,
                    fill: '#34495E'
                }
            }

and I came up with this:

[afilp]

@marzolfb Thanks! I see that the position of these labels are 'absolute' and not related to the chart value? How can I know for example that the 253453 value is at top:70?

I was expecting for a way to specify the Y position of the line using the Y-axis values.

Any ideas on this?

Thanks again!

[marzolfb]

Thats a fair critique of the solution I offer above.

Perhaps a better strategy is to use all react-native-svg components to show the line and text - i.e. replace the react native Text and View components above with the Text and Line components from react-native-svg. Take a look at the react-native-svg README documentation and see if you can use the existing line chart with some combination of the G, Text, and Line components from react-native-svg to accomplish the relative positioning you seek.

If you do get something worked out and are willing to add an option to toggle showing the line and label to the existing StockLine chart, I think it would make a great addition to the library and I would welcome a PR for it.

[afilp]

Thanks, I will have a look in the next days and will let you know of my findings.