react-stockcharts

The Fibonacci Retracement Interactive Indicator allows users to draw and manipulate retracement lines directly on the chart using mouse interactions and keyboard shortcuts.

Drawing a Retracement

1. Enter Draw Mode: Press the D key to enable drawing mode.
2. Draw: Click once to set the first point, move the mouse to preview the retracement, and click a second time to finalize the drawing.
3. Exit Draw Mode: Press ESC to exit drawing mode.

Manipulating Existing Retracements

When not in draw mode, you can interact with existing Fibonacci lines:

• Select: Hover over a retracement and click to select it.
• Move Top/Bottom Lines: Drag the top and bottom lines North/South.
• Move Intermediate Lines: Drag the rest of the lines in any direction.
• Move Edges: Drag the edge circles East/West.
• Unselect: Click anywhere outside the selected retracement to deselect it.

Keyboard Shortcuts

• D: Enter draw mode.
• ESC: Exit draw mode.
• DEL: Delete the last drawn retracement.

The Standard Deviation Channel is based on a Linear Regression Trend (using the method of least squares) to represent a median equilibrium price line. Deflections from this line indicate buyer or seller superactivity.

Drawing a Channel

1. Initiate Draw Mode: Use the drawing controls to enter draw mode.
2. Draw: Click to set the first point, move the mouse to define the trend, and click again to set the second point.
3. Automatic Exit: Once the channel is drawn, the tool automatically exits draw mode.

Keyboard Shortcuts

• Press D: Re-enter draw mode.
• Press ESC: Exit draw mode.
• Press DEL: Delete the last drawn channel.

Modifying an Existing Channel

When not in draw mode, you can interact with existing channels:

1. Hover: Move the mouse over the channel to enter the hover state.
2. Select: Click the middle (median) line to select the channel.
3. Resize/Adjust: Move the edge circles to adjust the channel boundaries.
4. Unselect: Click anywhere outside the channel to deselect it.

To create a candlestick chart that handles gaps in time (like weekends), use the discontinuousTimeScaleProvider as the xScaleProvider prop on the <ChartCanvas> component. This ensures the x-axis shows a linear scale by removing discontinuities.

Ensure your data is pre-processed so that date fields are JavaScript Date objects and price fields are numbers.

import { timeParse } from "d3-time-format";
import { tsv } from "d3-request";

// 1. Pre-process data
var parseDate = timeParse("%Y-%m-%d");

tsv("path/to/data.tsv", function(err, data) {
    data.forEach((d, i) => {
        d.date = new Date(parseDate(d.date).getTime());
        d.open = +d.open;
        d.high = +d.high;
        d.low = +d.low;
        d.close = +d.close;
    });

    // 2. Render Chart
    return (
        <ChartCanvas 
            width={width} 
            height={400}
            margin={{left: 50, right: 50, top:10, bottom: 30}} 
            type={type}
            seriesName="MSFT"
            data={data}
            xAccessor={d => d.date} 
            xScaleProvider={discontinuousTimeScaleProvider}
            xExtents={[new Date(2012, 0, 1), new Date(2012, 6, 2)]}>

            <Chart id={1} yExtents={d => [d.high, d.low]}>
                <XAxis axisAt="bottom" orient="bottom" ticks={6}/>
                <YAxis axisAt="left" orient="left" ticks={5} />
                <CandlestickSeries />
            </Chart>
        </ChartCanvas>
    );
});

The interactive indicator allows users to draw lines on a chart using mouse clicks and movement.

Drawing Workflow:

1. Enter Draw Mode: Press D on the keyboard to enter draw mode.
2. Draw a Line: Click to set the first point, move the mouse to position the line, and click again to set the second point.
3. Disable Snapping: By default, line edges snap to the nearest high or low price point. To disable snapping temporarily while drawing, hold the Shift key during the click.
4. Exit Draw Mode: Once a line is drawn, the indicator automatically exits draw mode. To exit manually, press ESC.

Managing Drawn Lines:

• Delete: Press DEL to delete the last drawn line.
• Selection: When not in draw mode, hover over and click a line to select it.
• Manipulation: Once selected, you can move the entire line or adjust its edges.
• Deselection: Click anywhere outside the line to deselect it.