SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

1
0

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.

Version
1.4.1597
  • Andrew Burnett-Thompson
    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 to post comments
0
0

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.

Images
  • You must to post comments
0
0

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

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.