@manoj-mohan,
I appreciate your help up to this point! I just have a couple more questions regarding the horizontal lines. Your solution helped and I was almost able to get our desired behavior!
1.) We aren’t just using one graph. We are fetching the data for multiple graphs from our back end and want to cycle through them. In our playground app I’m using a single canvasJS component and passing a new set of graph options on state change. The problem is this does not redraw these horizontal lines when I toggle to the next graph(new options are set). Additionally, if I change the size of the browser window, open the inspect tab, or just toggle the zoom button in the toolbar(to the traverse curve option) the horizontal lines we drew disappear. How can I fix this behavior?
2) Ideally we would like the annotations to be entirely handled by CanvasJS. If we move forward and make a purchase, would it be possible to add x axes start and end points for Y axes striplines to the library?
I’m currently using the CanvasJS react component. I tried to add the code from the JSFiddle into the the componentDidMount life cycle method after this.chart.render() is called. It’s not working as expected. When I debug right after this call the horizontal lines that I just drew on the canvas are visible but the actual data series is not yet. Then the data series is drawn and the the horizontal lines disappear. What am I missing? is the canvas cleared asynchronously when drawing the dataseries?
JSFiddle
I would like to draw striplines like the purple dashed ones from a start point to an end point. In this current example I have them drawn as their own data series which causes them to impact how zooming works, which I do not want. If I draw them as striplines they span the entire width of the graph which I do not want either. Is there any solution to this?
We would like to use your product but this is an important thing to know. Any insight would be appreciated.