[Feature] Custom Chart Overlays by Jared Broad

Jared Broad

| Reward Discussion

Hello All!

Thanks to some JS magic you can now overlay your charts however you'd like :) This means you can do things like:
Top Chart: SPY Price + SPY EMA + Buy-Sell Trades On the Price
Bottom Chart: RSI of the SPY Controlling the Trades

The chart index to controls where on the chart your overlay occurs:



Chart plotter = new Chart("Plotter");

plotter.AddSeries(new Series("EURUSD", SeriesType.Line, index:0));

plotter.AddSeries(new Series("EURUSD-200MA", SeriesType.Line, index:0));

plotter.AddSeries(new Series("Buy", SeriesType.Scatter, index:0));

plotter.AddSeries(new Series("Sell", SeriesType.Scatter, index:0));

plotter.AddSeries(new Series("EURUSD-RSI", SeriesType.Line, index:1));

AddChart(plotter);

Check out the example below:

Happy Coding!

Update Backtest

The material on this website is provided for informational purposes only and does not constitute an offer to sell, a solicitation to buy, or a recommendation or endorsement for any security or strategy, nor does it constitute an offer to provide investment advisory services by QuantConnect. In addition, the material offers no opinion with respect to the suitability of any security or specific investment. QuantConnect makes no guarantees as to the accuracy or completeness of the views expressed in the website. The views are subject to change, and may have become unreliable for various reasons, including changes in market conditions or economic circumstances. All investments involve risk, including loss of principal. You should consult with an investment professional before making any investment decisions.

Jared Broad

Accepted Answer

Update Backtest

Notebook

Stephen

1.4k ,

You guys rock!

Luke Waldner

39 ,

Hey QC; I'm having some trouble doing this in python as it's pretty hard to piece things together from the API tab. I'd like to simply plot the price of something (let's say SPY). Could you possibly post the python equivilent of this?

Thank You!

Apollos Hill

9.6k ,

Hi Luke, i'm also interested in this via python but i see noone has replied. is there a guide out there?

Gabriel Mercier

73 ,

I agree to say that it would be great to be able to do this in Python or to know how one can do it because when creating custom indicators, we would need to have a visual result of what we created.

Juraj

481 ,

Here is a similar example in Python based on the sample MACDTrendAlgorithm. The original script produces two additional graphs to plot indicators with:

        self.PlotIndicator("MACD", True, self.__macd, self.__macd.Signal)

        self.PlotIndicator("SPY", self.__macd.Fast, self.__macd.Slow)

The QCAlgorithm's PlotIndicator method is great to plot an indicator quickly, but of course it won't allow you to do the overlay.

To create a plot which shows the SPY price with buy/sell signals at the top, along with the MACD indicator at the bottom, I added the following in the Initialize method:

        overlayPlot = Chart("Overlay Plot")

        overlayPlot.AddSeries(Series("SPY", SeriesType.Line, 0))

        overlayPlot.AddSeries(Series("Buy", SeriesType.Scatter, 0))

        overlayPlot.AddSeries(Series("Sell", SeriesType.Scatter, 0))

        overlayPlot.AddSeries(Series("MACD", SeriesType.Line, 1))

        overlayPlot.AddSeries(Series("MACD_Signal", SeriesType.Line, 1))

        self.AddChart(overlayPlot)

The first line creates a new custom chart. Each AddSeries call specifies the name of a series (we use this to add points later), its type, and finally the index in the chart (index=0 series will be plotted in the top subplot and index=1 series in the bottom subplot). Finally, calling AddChart on the QCAlgorithm adds it to the backtesting output.

In the OnData method, I added:

        if buy_signal_triggered:

            self.Plot("Overlay Plot", "Buy", data["SPY"].Value)

        elif sell_signal_triggered:

            self.Plot("Overlay Plot", "Sell", data["SPY"].Value)

        self.Plot("Overlay Plot", "SPY", data["SPY"].Value)

        self.Plot("Overlay Plot", "MACD", self.__macd.Current.Value)

        self.Plot("Overlay Plot", "MACD_Signal", self.__macd.Signal.Current.Value)

which adds a point to each series on every bar. buy_signal_triggered and sell_signal_triggered are just for having all the plotting in the same place.

Enjoy!

(Note the preview below will show the Overlay Plot compressed)

Apollos Hill

9.6k ,

HI Juraj,

Can you show me what i'm doing wrong?

at OnData in main.py:line 107

TypeError : No method matches given arguments for Plot

Jing Wu

209.2k ,

Hi apollos_hill, you need the Current.Value to obtain the indicator value. Check the attached algorithm.

Itumeleng Moreotlotlo

684 ,

Hi Jared Broad i cloned your algorithm this is the result that i am getting

Derek Melchin

STAFF ,

Hi Itumeleng Moreotlotlo,

The algorithm above attempts to purchase SPY without adding a subscription for it. See the attached backtest for a working version.

Best,
Derek Melchin

Jared Broad

Update Backtest

Notebook

To unlock posting to the community forums please complete at least 30% of Boot Camp.
You can continue your Boot Camp training progress from the terminal. We hope to see you in the community soon!

QuantConnect Community

Alpha League Competition: $1,000 Weekly Prize Pool

Filter Discussion by Tags

161,383 Quants.

Online Now

[Feature] Custom Chart Overlays

Started By:

Join QuantConnect for Free Sign Up