Series isVisible and isVisibleChanged API

Each RenderableSeries has an isVisible property. This defines whether the series is included in rendering or not.

isVisible can be set programmatically, or is also set by SciChart.js when checking or unchecking a Legend row checkbox (see LegendModifier API).

You can listen to isVisible changes via the BaseRenderableSeries.isVisibleChanged event. Listen to the event (get a callback) using the following code:

Javascript

// Create and add a series with onIsVisibleChanged handler
const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
  dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "Scatter Series"}),
  pointMarker: new EllipsePointMarker(wasmContext, {
    width: 7,
    height: 7,
    strokeThickness: 2,
    fill: "steelblue",
    stroke: "LightSteelBlue",
  }),
  onIsVisibleChanged: (sourceSeries, isVisible) => {
    console.log(`Series ${sourceSeries.type} was set to isVisible=${isVisible}`);
  }
});

// You can also subscribe to isVisibleChanged like this
scatterSeries.isVisibleChanged.subscribe((seriesVisibleChangedArgs) => {
  // See SeriesVisibleChangedArgs in typedoc
  const renderableSeries = seriesVisibleChangedArgs.sourceSeries;
  const isVisible = seriesVisibleChangedArgs.isVisible;

  console.log(`isVisibleChanged handler: Series ${renderableSeries.type} was set to isVisible=${isVisible}`);
  textAnnotation.text = `${renderableSeries.dataSeries.dataSeriesName} is ${isVisible ? 'visible' : 'hidden'}`;
});

// Explicitly set visibility like this
scatterSeries.isVisible = true;

sciChartSurface.renderableSeries.add(scatterSeries);

This can be used to get feedback about the current visibility state of a series, as in the following demo:

<div id="scichart-root" ></div>

body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }

async function testIsVisibleOnChart(divElementId) {
  // Demonstrates how to listen to isVisible changes in SciChart.js
  const {
    SciChartSurface,
    NumericAxis,
    XyScatterRenderableSeries,
    EllipsePointMarker,
    XyDataSeries,
    SciChartJsNavyTheme,
    LegendModifier,
    TextAnnotation,
    ECoordinateMode,
    EHorizontalAnchorPoint,
    EVerticalAnchorPoint
  } = SciChart;

  // or, for npm, import { SciChartSurface, ... } from "scichart"

  const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
  });
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

  // Add instructions
  const textAnnotation = new TextAnnotation({ x1: 0.5, y1: 0.5, text: "Click on the legend to show/hide the series", textColor: "White", fontSize: 20,
    xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
    horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Center})
  sciChartSurface.annotations.add(textAnnotation);

  // Create some data
  const xValues = [];
  const yValues = [];
  for(let i = 0; i < 100; i++) {
    xValues.push(i);
    yValues.push(0.2 * Math.sin(i*0.1) - Math.cos(i * 0.01));
  }

  // #region ExampleA
  // Create and add a series with onIsVisibleChanged handler
  const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "Scatter Series"}),
    pointMarker: new EllipsePointMarker(wasmContext, {
      width: 7,
      height: 7,
      strokeThickness: 2,
      fill: "steelblue",
      stroke: "LightSteelBlue",
    }),
    onIsVisibleChanged: (sourceSeries, isVisible) => {
      console.log(`Series ${sourceSeries.type} was set to isVisible=${isVisible}`);
    }
  });

  // You can also subscribe to isVisibleChanged like this
  scatterSeries.isVisibleChanged.subscribe((seriesVisibleChangedArgs) => {
    // See SeriesVisibleChangedArgs in typedoc
    const renderableSeries = seriesVisibleChangedArgs.sourceSeries;
    const isVisible = seriesVisibleChangedArgs.isVisible;

    console.log(`isVisibleChanged handler: Series ${renderableSeries.type} was set to isVisible=${isVisible}`);
    textAnnotation.text = `${renderableSeries.dataSeries.dataSeriesName} is ${isVisible ? 'visible' : 'hidden'}`;
  });

  // Explicitly set visibility like this
  scatterSeries.isVisible = true;

  sciChartSurface.renderableSeries.add(scatterSeries);
  // #endregion

  // add a legend which allows showing/hiding series
  sciChartSurface.chartModifiers.add(new LegendModifier({ showCheckboxes: true, showLegend: true }));
};

testIsVisibleOnChart("scichart-root");

See the onIsVisibleChanged parameter in IBaseRenderableSeriesOptions.onIsVisibleChanged for type information.

The BaseRenderableSeries.isVisibleChanged event handler also has args of type SeriesVisibleChangedArgs. In TypeScript, the code would look like this:

Typescript isVisibleChanged	Copy Code
series.isVisibleChanged.subscribe((args: SeriesVisibleChangedArgs) => { console.log(`isVisibleChanged handler: Series ${args.sourceSeries.type} was set to isVisible=${args.isVisible}`); });