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() {
SciChartSurface.setRuntimeLicenseKey("...");
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);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
const lineSeries1 = new FastLineRenderableSeries(wasmContext, { stroke: "Yellow"});
sciChartSurface.renderableSeries.add(lineSeries1);
lineSeries1.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 3], yValues: [2, 4]});
const lineSeries2 = new FastLineRenderableSeries(wasmContext, { stroke: "Red"});
sciChartSurface.renderableSeries.add(lineSeries2);
lineSeries2.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 7], yValues: [3, 8]});
const lineSeries3 = new FastLineRenderableSeries(wasmContext, { stroke: "Blue"});
sciChartSurface.renderableSeries.add(lineSeries3);
lineSeries3.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 7], yValues: [6, 3]});
const lineSeries4 = new FastLineRenderableSeries(wasmContext, { stroke: "Green"});
sciChartSurface.renderableSeries.add(lineSeries4);
lineSeries4.dataSeries = new XyDataSeries(wasmContext, {xValues: [10, 6], yValues: [6, 3]});
const lineSeries5 = new FastLineRenderableSeries(wasmContext, { stroke: "Purple"});
sciChartSurface.renderableSeries.add(lineSeries5);
lineSeries5.dataSeries = new XyDataSeries(wasmContext, {xValues: [15, 8], yValues: [12, 6]});
const lineSeries6 = new FastLineRenderableSeries(wasmContext, { stroke: "Orange"});
sciChartSurface.renderableSeries.add(lineSeries6);
lineSeries6.dataSeries = new XyDataSeries(wasmContext, {xValues: [13, 8], yValues: [2, 1]});
}
initSciChart();
This is my index.html code:
<html lang="en-us">
<head>
<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>
<style>
body {
font-family: 'Arial'
}
</style>
</head>
<body>
<h1>task</h1>
<p>task 1</p>
<!-- the Div where the SciChartSurface will reside -->
<div id="scichart-root" style="width: 800px; height: 600px;"></div>
</body>
</html>
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.
Version
2.2.2407
Images
- samini retnam asked 4 months ago
- last edited 4 months ago
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- Hi Samini, quick question, are you using React or Vue? We’re working on an example for you. Best regards, Andrew
Good day; I am extremely sorry for the late response … I’m using React … Thank you …
- You must login to post comments
Hello,
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
const legendModifier = new LegendModifier({});
// @ts-ignore
window.changeStroke = function changeSeriesStroke(seriesId: string) {
const series = sciChartSurface.renderableSeries.getById(seriesId);
const selector = document.getElementById(
`${seriesId}-color-selector`
) as HTMLSelectElement;
const colorValue = selector?.value;
series.stroke = colorValue;
selector.value = colorValue;
// make sure that legend is updated and show proper color label
legendModifier.sciChartLegend.invalidateLegend();
};
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="${series.id}" style="background-color: ${series.stroke}; margin: 4px; width: 30px; height: 13px;"></label>`;
str += `<label for="${series.id}" style="margin-left: 4px;">${series.id}</label>`;
str += `<select id="${series.id}-color-selector" onchange="changeStroke('${
series.id
}')" 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" : ""}
value="Red">Red</option>
<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>
</select>`;
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 = "";
sciChartSurface.renderableSeries
.asArray()
.forEach((series: IRenderableSeries) => {
body += getHtmlForSeries(series as FastLineRenderableSeries);
});
return getLegendContainerHtml(
placement,
textColor,
backgroundColor,
margin,
body
);
}
}
legendModifier.sciChartLegend = new CustomLegendControl();
sciChartSurface.chartModifiers.add(legendModifier);
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)
- Jim Risen answered 4 months ago
- last edited 4 months ago
- You must login to post comments
Your Answer
Please login first to submit.
