Currently I’m using line series to render data of two different types. But when using legend, a separate entry is made for each line. I want a single legend for each data type.
const {sciChartSurface, wasmContext} = await SciChart.SciChartSurface.create("scichart-root");
sciChartSurface.xAxes.add(new SciChart.NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new SciChart.NumericAxis(wasmContext));
for (let i = 0; i < 5; i++) {
const xValues = [1, 2, 3, 4, 5];
const yValues = xValues.map(x => x * (i + 1));
const dataSeries = new SciChart.XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "file 1" });
const lineSeries = new SciChart.FastLineRenderableSeries(wasmContext, {
dataSeries,
stroke: "red",
strokeThickness: 2,
});
sciChartSurface.renderableSeries.add(lineSeries);
}
for (let i = 0; i < 5; i++) {
const xValues = [1, 2, 3, 4, 5];
const yValues = xValues.map(x => x * (i + 10));
const dataSeries = new SciChart.XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "file 2" });
const lineSeries = new SciChart.FastLineRenderableSeries(wasmContext, {
dataSeries,
stroke: "blue",
strokeThickness: 2,
});
sciChartSurface.renderableSeries.add(lineSeries);
}
const legendModifier = new SciChart.LegendModifier({
placement: SciChart.ELegendPlacement.TopRight,
orientation: SciChart.ELegendOrientation.Vertical,
showLegend: true,
showCheckboxes: true,
showSeriesMarkers: true,
});
legendModifier.getLegendData = () => {
return [{
seriesName: "Grouped Lines",
stroke: "#000000",
seriesType: "LineSeries"
}];
};
sciChartSurface.chartModifiers.add(legendModifier);
- Manash Prajapati asked 4 months ago
- You must login to post comments
Hello, you can probably achieve the desired behavior with the ManualLegend.
Try something like this:
const legend = new ManualLegend(
{
textColor: "black",
backgroundColor: "#E0E0E077",
items: [
{ name: "Group1", color: appTheme.VividBlue, id: "group1Prefix", checked: true },
{ name: "Group2", color: appTheme.VividPurple, id: "group2Prefix", checked: true },
],
isCheckedChangedCallback: (item, isChecked) => {
sciChartSurface.renderableSeries.getById(`${item.id}-0`).isVisible = isChecked
sciChartSurface.renderableSeries.getById(`${item.id}-1`).isVisible = isChecked
// ...
}
},
sciChartSurface
);
Here is the typedoc of its options: https://www.scichart.com/documentation/js/current/typedoc/interfaces/imanuallegendoptions.html
And you can find an example of usage here: https://demo.scichart.com/react/chart-background-annotations
Alternatively, you can check these examples of custom legends:
https://codesandbox.io/p/sandbox/staging-currying-vg636t
and
https://codesandbox.io/p/sandbox/customscichartlegendexample-32ox1s
- Jim Risen answered 4 months ago
- You must login to post comments
Please login first to submit.