Pre loader

How to create a "Trace Setting Panel" using custom annotation with html element inside


Good day 🙂

I am kinda new to SciChart …
Still under learning process on how to use it …
I was doing this particular task assigned and I got stuck …
May I know to create a Trace Setting Panel using custom annotation with html element inside ?

This is my index.js code :

import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";

async function initSciChart() {


    const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");

    // Create an X,Y Axis and add to the chart
    const xAxis = new NumericAxis(wasmContext);
    const yAxis = new NumericAxis(wasmContext);


    const lineSeries1 = new FastLineRenderableSeries(wasmContext, { stroke: "Yellow"});
    lineSeries1.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 3], yValues: [2, 4]});

    const lineSeries2 = new FastLineRenderableSeries(wasmContext, { stroke: "Red"});
    lineSeries2.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 7], yValues: [3, 8]});

    const lineSeries3 = new FastLineRenderableSeries(wasmContext, { stroke: "Blue"});
    lineSeries3.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 7], yValues: [6, 3]});

    const lineSeries4 = new FastLineRenderableSeries(wasmContext, { stroke: "Green"});
    lineSeries4.dataSeries = new XyDataSeries(wasmContext, {xValues: [10, 6], yValues: [6, 3]});

    const lineSeries5 = new FastLineRenderableSeries(wasmContext, { stroke: "Purple"});
    lineSeries5.dataSeries = new XyDataSeries(wasmContext, {xValues: [15, 8], yValues: [12, 6]});

    const lineSeries6 = new FastLineRenderableSeries(wasmContext, { stroke: "Orange"});
    lineSeries6.dataSeries = new XyDataSeries(wasmContext, {xValues: [13, 8], yValues: [2, 1]});


This is my index.html code:

<html lang="en-us">

    <meta charset="utf-8" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>SciChart.js Task 1</title>
    <script async type="text/javascript" src="bundle.js"></script>
        body {
            font-family: 'Arial'

    <p>task 1</p>

    <!-- the Div where the SciChartSurface will reside -->
    <div id="scichart-root" style="width: 800px; height: 600px;"></div>



Together I will attach my output (from the above code) and also the output which I suppose to get (which I’m not sure how to do it …

Hope to hear from you soon.

Thank you in advance.

  • Andrew Burnett-Thompson
    This is a great question & an opportunity for us to demonstrate the flexibility of SciChart. I will talk to the team and get back to you. Best regards, Andrew
  • Andrew Burnett-Thompson
    Hi Samini, quick question, are you using React or Vue? We’re working on an example for you. Best regards, Andrew
  • samini retnam
    Good day; I am extremely sorry for the late response … I’m using React … Thank you …
  • You must to post comments


There are several options that you can use to make a custom legend in SciChart.js.

Method 1 – Custom Annotation

One of them as you mentioned is using a Custom Annotation and adding HTML directly into an SVG template.
Here is an example on our Github: Annotations example.

Method 2 – Custom Legend class

Another one is to create a Custom Legend by overriding a method for generating an inner HTML string.

Here’s a code example on CodeSandbox

Custom Legend Example

const legendModifier = new LegendModifier({});
 // @ts-ignore
window.changeStroke = function changeSeriesStroke(seriesId: string) {
const series = sciChartSurface.renderableSeries.getById(seriesId);
const selector = document.getElementById(
) as HTMLSelectElement;
const colorValue = selector?.value;
series.stroke = colorValue;
selector.value = colorValue;
// make sure that legend is updated and show proper color label
const getHtmlForSeries = (series: FastLineRenderableSeries): string => {
let str = `<span class="scichart__legend-item" style="display: flex; align-items: center; margin-right: 4px; white-space: nowrap;">`;
str += `<label for="${}" style="background-color: ${series.stroke}; margin: 4px; width: 30px; height: 13px;"></label>`;
str += `<label for="${}" style="margin-left: 4px;">${}</label>`;
str += `<select id="${}-color-selector" onchange="changeStroke('${
}')" name="colors">
      <option ${
        series.stroke === "Blue" ? "selected" : ""
      } value="Blue">Blue</option>
      <option ${
        series.stroke === "Green" ? "selected" : ""
      } value="Green">Green</option>
      <option ${series.stroke === "Red" ? "selected" : ""}
      <option ${
        series.stroke === "Yellow" ? "selected" : ""
      } value="Yellow">Yellow</option>
      <option ${
        series.stroke === "Orange" ? "selected" : ""
      } value="Yellow">Orange</option>
      <option ${
        series.stroke === "Purple" ? "selected" : ""
      } value="Yellow">Purple</option>
str += `</span>`;
return str;
class CustomLegendControl extends SciChartLegend {
public getLegendHTML(
  placement: ELegendPlacement,
  textColor: string,
  backgroundColor: string,
  margin: Thickness,
  orientation: ELegendOrientation,
  showCheckboxes: boolean,
  showSeriesMarkers: boolean,
  items: TLegendItem[]
): string {
  let body = "";
    .forEach((series: IRenderableSeries) => {
      body += getHtmlForSeries(series as FastLineRenderableSeries);
return getLegendContainerHtml(
legendModifier.sciChartLegend = new CustomLegendControl();

Method 3- React Example

Or alternatively, you can simply reference the chart from your Custom Control.

Here’s another Code sandbox example

Then you can apply proper positioning accordingly to your use case ( e.g. by using sciChartSurface.seriesViewRect as a base container)

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies