candlestick chart – 'user-input' tooltip

[Vineet Deodhar]

Hi !
I am using candlestick charts along with EMA. It works fine.

Is it possible that a ‘user-input’ comment for a particular candle can be made persistent and displayed (maybe in tool-tip). My tool-tip is showing OHLC data already.
To elaborate it, say I am back-testing historical chart. On a particular candle, I with to mark as ‘buy here with stop loss of 12’. It should be visible on the candle (maybe in a tooltip, which is already showing OHLC).

Can I get a hint/help/code for this?
Thanks.

[Indranil]

@d_vineet,

You can add an option to the specific dataPoint with the required description/comment and use the toolTipContent to customize the information showed on the toolTip. Please take a look at this JSFiddle.

__________
Indranil Deo
Team CanvasJS

[Vineet Deodhar]

Thanks for your reply (& sorry for my late reply).
I got your solution.
But for this, the user needs to enter ‘Extra Information’ in the source data itself.
Would it be possible to add the information ‘on the fly’ somewhere in chart window itself?
Tool-tip was just an example. Maybe you can suggest any alternate way to display the extra information.
Thanks.

• This reply was modified 5 years, 2 months ago by Vineet Deodhar.

[Indranil]

@d_vineet,

You can add custom DOM element (input-field) based on mouse click event as shown in this JSFiddle.

__________
Indranil Deo
Team CanvasJS

[Vineet Deodhar]

@Indranil Deo Thank you very much for your code.
Let me test it on my setup.

• This reply was modified 5 years, 2 months ago by Vineet Deodhar.

[Vineet Deodhar]

@indranil Deo
Tested the code.
There are 2 issues.
1) My chart is ‘click-and drag’. After clicking for dragging, it creates unnecessary input field.
2) The input fields added are not (of course) persistent. Therefore let me consider your first suggested solution in this jsfiddle .

Help requested for one addition —
the extra info typed by user needs to be added programatically in the json input data. The data file is stored as sampleFilename.json on local drive. I have a button to select the file and the same is passed to a script for parsing into json object and further passed to CanvasJS.Chart.
This jsfiddle for file load code shows how I load file data.
(although in this jsfiddle, I could not include canvasjs.min.js. Do not know how do I include it in jsfiddle).

Any idea as to how do I add it programatically in the data (after user inputting the same)?
Thanks.

• This reply was modified 5 years, 2 months ago by Vineet Deodhar.
• This reply was modified 5 years, 2 months ago by Vineet Deodhar.

[Indranil]

@d_vineet,

Can you please share a working sample project over google drive/one drive so that we look into it and understand your scenario better.

__________
Indranil Deo
Team CanvasJS