rrag / react-stockcharts

Highly customizable stock charts with ReactJS and d3
http://rrag.github.io/react-stockcharts
MIT License
3.88k stars 958 forks source link

Non-Interactive StraightLines - Programmatically creating trend lines on highs and lows #595

Closed marktellez closed 6 years ago

marktellez commented 6 years ago

I want to do this programatically... it seems the only way to do it (based on the examples) is interactively using the mouse.

https://dailypriceaction.com/free-forex-trading-lessons/how-to-trade-equidistant-channels

Interactive example: https://codesandbox.io/s/github/rrag/react-stockcharts-examples2/tree/master/examples/CandleStickChartWithEquidistantChannel

I am digging through the code to see how i can get the xy points of the candlesticks from the series, but I don't see any straightforward way.

Any tips?

Thanks for the AWESOME library!

seasick commented 6 years ago

Taken from this example.

const trendlines = [
  // start: [x, y], end: [x, y] - you should be able to find correct values with `xAccessor` and `yAccessor`
  { start: [1606, 56], end: [1711, 53], appearance: { stroke: "green" }, type: "XLINE" }
];

return <TrendLine
  enabled={false}
  type="RAY"
  snap={false}
  trends={trendlines}
/>

edit: I am using these lines to create a linear regression trend channel programmatically. Server calculates the start and end points and draws a an upper and lower bound by adding/substracting the standard deviation. This link helped me figuring out how to get the linear regression.

edit2: on second look, you should be able to use EquidistantChannel like the following (didn't test it though):

const channels = [
{
  startXY: [1620, 51.08725274983894],
  endXY: [1683, 54.86463241993551],
  dy: -4.226770902261144,
  appearance: {
    stroke: "#000000",
    strokeOpacity: 1, 
    strokeWidth: 1, 
    fill: "#8AAFE2", 
    fillOpacity: 0.7, 
    edgeStroke: "#000000", 
    edgeFill: "#FFFFFF", 
    edgeFill2: "#250B98", 
    edgeStrokeWidth: 1, 
    r: 5
  }
}
];

return 
<EquidistantChannel
  enabled={false}
  channels={channels} />
rrag commented 6 years ago

you would have to create a custom component to draw a line between (x1, y1) to (x2, y2) no built in non interactive series exists