Pre loader

Single Legend entry for multiple Lines

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

Answered
0
0

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);
Version
3.3.560
Images
  • You must to post comments
Best Answer
0
1

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

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.