Hello,
Is there a way to render textbox as an annotation in the chart ? The workaround i could think of is to use CustomAnnotation and supply SVG (svgString) with HTML input tag enclosed. Please let me know if there is a better way to perform this.
-
Hi Vamsi, good question! I will ask the team today at this morning’s standup. Can you clarify what you want to achieve? As in, what is the use-case.
- You must login to post comments
Hi Vamsi!
There are two options to add a text input to SciChartSurface in SciChart.js.
The first one is to use CustomAnnotation and insert foreignObject inside the svg. Please notice that you need also to set “pointer-events”: “initial” in order to allow user interactions.
sciChartSurface.annotations.add(
new CustomAnnotation({
x1: 1,
y1: 9,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
verticalAnchorPoint: EVerticalAnchorPoint.Top,
svgString: `<svg height="100" width="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="5,5 195,10 185,185 10,195" />
<foreignObject x="20" y="20" width="160" height="160">
<div id="inputContainer" xmlns="http://www.w3.org/1999/xhtml">
<label for="fname" style="color: white">First name (annotation):</label>
<input type="text" id="fname" name="fname" style="pointer-events: initial"><br><br>
</div>
</foreignObject>
</svg>`
})
);
The second approach is to add the input into the page using relative position.
<div id="inputContainer" style="position: relative; z-index: 1; left: 100px; top: 300px;">
<label for="fname" style="color: white; display: block;">First name (html):</label>
<input type="text" id="fname" name="fname" style="pointer-events: initial;">
</div>
A screenshot with these two examples is attached.
- Michael Klishevich answered 3 years ago
- last edited 3 years ago
- You must login to post comments
Hello Michael,
I have already implemented first approach but thought of checking if there is a better way or if there is a built in feature. Thank You
- vamsi kunchaparthi answered 3 years ago
- You must login to post comments
Please login first to submit.